我有一个水平的 UICollectionView。我想让单元格相互重叠一定数量的 60 像素，以便第二个单元格与第一个单元格重叠 60 个像素，第三个单元格与第二个单元格重叠相同的数量，依此类推。
我尝试对 UICollectionViewFlowLayout 进行子类化。但我无法将 UICollectionviewCell 放在另一个之上。
问问题
12206 次
5 回答
10
我专门为水平 UICollectionView 修改了 stacklayout
UICollectionViewStackLayout.h
#import <UIKit/UIKit.h>
@interface UICollectionViewStackLayout : UICollectionViewFlowLayout
#define STACK_OVERLAP 60 //this corresponds to 60 points which is probably what you want, not pixels
#define ITEM_SIZE CGSizeMake(190,210)
@end
UICollectionViewStackLayout.m
#import "UICollectionViewStackLayout.h"
@implementation UICollectionViewStackLayout
-(id)init{
self = [super init];
if (self) {
[self commonInit];
}
return self;
}
-(id)initWithCoder:(NSCoder *)aDecoder
{
if (self = [super init]) {
[self commonInit];
}
return self;
}
-(void)commonInit
{
self.itemSize = ITEM_SIZE;
//set minimum layout requirements
self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
self.minimumInteritemSpacing = 0;
}
-(CGSize)collectionViewContentSize
{
NSInteger xSize = [self.collectionView numberOfItemsInSection:0]
* self.itemSize.width;
NSInteger ySize = [self.collectionView numberOfSections]
* (self.itemSize.height);
CGSize contentSize = CGSizeMake(xSize, ySize);
if (self.collectionView.bounds.size.width > contentSize.width)
contentSize.width = self.collectionView.bounds.size.width;
if (self.collectionView.bounds.size.height > contentSize.height)
contentSize.height = self.collectionView.bounds.size.height;
return contentSize;
}
-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
{
NSArray* attributesArray = [super layoutAttributesForElementsInRect:rect];
int numberOfItems = [self.collectionView numberOfItemsInSection:0];
for (UICollectionViewLayoutAttributes *attributes in attributesArray) {
CGFloat xPosition = attributes.center.x;
CGFloat yPosition = attributes.center.y;
if (attributes.indexPath.row == 0) {
attributes.zIndex = INT_MAX; // Put the first cell on top of the stack
} else {
xPosition -= STACK_OVERLAP * attributes.indexPath.row;
attributes.zIndex = numberOfItems - attributes.indexPath.row; //Other cells below the first one
}
attributes.center = CGPointMake(xPosition, yPosition);
}
return attributesArray;
}
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)path {
UICollectionViewLayoutAttributes* attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:path];
return attributes;
}
@end
于 2013-11-05T18:36:02.687 回答
5
我使用了 mdewitt 的答案，将其转换为 swift 3，效果很好！对于任何有兴趣的人：
class CollectionViewOverlappingLayout: UICollectionViewFlowLayout {
var overlap: CGFloat = 30
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.scrollDirection = .horizontal
self.minimumInteritemSpacing = 0
}
override var collectionViewContentSize: CGSize{
let xSize = CGFloat(self.collectionView!.numberOfItems(inSection: 0)) * self.itemSize.width
let ySize = CGFloat(self.collectionView!.numberOfSections) * self.itemSize.height
var contentSize = CGSize(width: xSize, height: ySize)
if self.collectionView!.bounds.size.width > contentSize.width {
contentSize.width = self.collectionView!.bounds.size.width
}
if self.collectionView!.bounds.size.height > contentSize.height {
contentSize.height = self.collectionView!.bounds.size.height
}
return contentSize
}
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
let attributesArray = super.layoutAttributesForElements(in: rect)
let numberOfItems = self.collectionView!.numberOfItems(inSection: 0)
for attributes in attributesArray! {
var xPosition = attributes.center.x
let yPosition = attributes.center.y
if attributes.indexPath.row == 0 {
attributes.zIndex = Int(INT_MAX) // Put the first cell on top of the stack
} else {
xPosition -= self.overlap * CGFloat(attributes.indexPath.row)
attributes.zIndex = numberOfItems - attributes.indexPath.row //Other cells below the first one
}
attributes.center = CGPoint(x: xPosition, y: yPosition)
}
return attributesArray
}
override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
return UICollectionViewLayoutAttributes(forCellWith: indexPath)
}
}
于 2017-05-19T14:41:37.737 回答
3
基于 Maik Fruhner 的回答。要使用：
let someCollectionView = UICollectionView(frame: <frame you want>,
collectionViewLayout: CollectionViewOverlappingLayout())
自定义布局代码：
class CollectionViewOverlappingLayout: UICollectionViewFlowLayout {
var overlap: CGFloat = 14
override init() {
super.init()
self.sharedInit()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.sharedInit()
}
func sharedInit(){
self.scrollDirection = .horizontal
self.minimumInteritemSpacing = 0
}
override var collectionViewContentSize: CGSize{
let xSize = CGFloat(self.collectionView!.numberOfItems(inSection: 0)) * self.itemSize.width
let ySize = CGFloat(self.collectionView!.numberOfSections) * self.itemSize.height
var contentSize = CGSize(width: xSize, height: ySize)
if self.collectionView!.bounds.size.width > contentSize.width {
contentSize.width = self.collectionView!.bounds.size.width
}
if self.collectionView!.bounds.size.height > contentSize.height {
contentSize.height = self.collectionView!.bounds.size.height
}
return contentSize
}
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
let attributesArray = super.layoutAttributesForElements(in: rect)
let numberOfItems = self.collectionView!.numberOfItems(inSection: 0)
for attributes in attributesArray! {
var xPosition = attributes.center.x
let yPosition = attributes.center.y
if attributes.indexPath.row == 0 {
attributes.zIndex = Int(INT_MAX) // Put the first cell on top of the stack
} else {
xPosition -= self.overlap * CGFloat(attributes.indexPath.row)
attributes.zIndex = numberOfItems - attributes.indexPath.row //Other cells below the first one
}
attributes.center = CGPoint(x: xPosition, y: yPosition)
}
return attributesArray
}
override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
return UICollectionViewLayoutAttributes(forCellWith: indexPath)
}
}
适用于 swift 5（可能还有 4.x）。
于 2019-09-11T08:05:51.373 回答
2
这不会在调用 numberOfItemsInSection 时使用 UICollectionViewDiffableDataSource 爆炸）
（注意，其他解决方案修复了 collectionViewContentSize / 我欢迎进行编辑以解决此问题，而无需调用 numberOfItemsInSection。
var cellLayout = OverlapLayout()
cellLayout.scrollDirection = .horizontal
cellLayout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
cellLayout.itemSize = CGSize(width: 44, height: 44)
class OverlapLayout: UICollectionViewFlowLayout {
var overlap: CGFloat = 20
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
let arr = super.layoutAttributesForElements(in: rect)!
return arr.map { atts in
var atts = atts
if atts.representedElementCategory == .cell {
let ip = atts.indexPath
atts = self.layoutAttributesForItem(at: ip)!
}
return atts
}
}
override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
let atts = super.layoutAttributesForItem(at: indexPath)!
var xPosition = atts.center.x
if indexPath.item == 0 {
return atts
}else{
xPosition -= self.overlap * CGFloat(atts.indexPath.row)
atts.center = CGPoint(x: xPosition, y: atts.center.y)
return atts
}
}
}
// Requires Snapkit
class BubbleCell: UICollectionViewCell {
static let ID = "BubbleCell"
var magicCornerRadius = 22 // make this half the collectionview height
lazy var bubbleImageView: UIImageView = UIImageView(frame: .zero)
override init(frame: CGRect) {
super.init(frame: frame)
setupViews()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func setupViews() {
self.backgroundColor = .clear
contentView.backgroundColor = .clear
// Hero Image
contentView.addSubview(bubbleImageView)
bubbleImageView.snp.remakeConstraints { (make) in
make.edges.equalToSuperview()
}
bubbleImageView.layer.cornerRadius = magicCornerRadius
bubbleImageView.layer.borderColor = UIColor.white.cgColor
bubbleImageView.layer.borderWidth = 2
bubbleImageView.clipsToBounds = true
bubbleImageView.image = kPlaceholderImage
bubbleImageView.contentMode = .scaleAspectFill
}
func configureCell(imageURL: URL) {
// use third party library to fetch image here / that caches eg. SDWebImage
}
}
于 2020-07-16T09:16:33.967 回答
2
我使用上面的两个答案为 Xamarin.iOS 创建了一个示例：
public class CustomFlowLayout : UICollectionViewFlowLayout
{
public CustomFlowLayout(nfloat width, nfloat height)
{
ItemSize = new CGSize(width, height);
ScrollDirection = UICollectionViewScrollDirection.Horizontal;
}
public override CGSize CollectionViewContentSize
{
get
{
var xSize = CollectionView.NumberOfItemsInSection(0) * ItemSize.Width;
var ySize = CollectionView.NumberOfSections() * ItemSize.Height;
var contentSize = new CGSize(xSize, ySize);
if (CollectionView.Bounds.Size.Width > contentSize.Width)
contentSize.Width = CollectionView.Bounds.Size.Width;
if (CollectionView.Bounds.Size.Height > contentSize.Height)
contentSize.Height = CollectionView.Bounds.Size.Height;
return contentSize;
}
}
public override UICollectionViewLayoutAttributes[] LayoutAttributesForElementsInRect(CGRect rect)
{
var attributesArray = base.LayoutAttributesForElementsInRect(rect);
var numberOfItems = CollectionView.NumberOfItemsInSection(0);
foreach (var attributes in attributesArray)
{
var xPosition = attributes.Center.X;
var yPosition = attributes.Center.Y;
if (attributes.IndexPath.Row == 0)
attributes.ZIndex = int.MaxValue; // Put the first cell on top of the stack
else
{
xPosition -= 20 * attributes.IndexPath.Row; //20 - value based on your cell width
attributes.ZIndex = numberOfItems - attributes.IndexPath.Row; //Other cells below the first one
}
attributes.Center = new CGPoint(xPosition, yPosition);
}
return attributesArray;
}
}
于 2019-01-26T01:22:52.630 回答