如何显示每行3个单元的UICollectionView

根据标题，我使用UICollectionView来显示图像。 我需要每行显示3个单元格，就像Instagram做的那样。

因为有很多屏幕尺寸，我得到iPhone屏幕的宽度，然后除以3。但是，它不显示为我所需要的。

这里是我的代码里面的viewDidLoad()方法：

 private let leftAndRightPaddings: CGFloat = 8.0 private let numberOfItemsPerRow: CGFloat = 3.0 private let heightAdjustment: CGFloat = 30.0 let bounds = UIScreen.mainScreen().bounds let width = (bounds.size.width - leftAndRightPaddings) / numberOfItemsPerRow let layout = userDetailCollection.collectionViewLayout as! UICollectionViewFlowLayout layout.itemSize = CGSizeMake(width, width) 

Answer 1

replace这一行

 let width = (bounds.size.width - leftAndRightPaddings) / numberOfItemsPerRow 

同

 let width = (bounds.size.width - leftAndRightPaddings*4) / numberOfItemsPerRow 

由于您不考虑两个项目之间的间距和右插入间距，因此它不在屏幕上调整。

 private let leftAndRightPaddings: CGFloat = 15.0 private let numberOfItemsPerRow: CGFloat = 3.0 let bounds = UIScreen.mainScreen().bounds let width = (bounds.size.width - leftAndRightPaddings*(numberOfItemsPerRow+1)) / numberOfItemsPerRow let layout = userDetailCollection.collectionViewLayout as! UICollectionViewFlowLayout layout.itemSize = CGSizeMake(width, width) 

试试这个代码

Answer 2

重写UICollectionViewLayout将使您在创buildcollectionView时有更大的灵活性。 这里是YourOwnCollectionViewLayout : UICollectionViewLayout一个片段YourOwnCollectionViewLayout : UICollectionViewLayout ：

 - (NSInteger)itemWidth { return (self.collectionView.bounds.size.width - (HORIZONTAL_PAD * (NUMBER_OF_ITEMS_PER_ROW+1))) / NUMBER_OF_ITEMS_PER_ROW; // pad from each side + pad in the middle } - (NSInteger)itemHeight { return self.itemWidth; // or something else } - (NSString *)keyForIndexPath:(NSIndexPath *)indexPath { NSString *retVal = [NSString stringWithFormat:@"%ld-%ld", (long)indexPath.section, (long)indexPath.row]; return retVal; } - (CGRect)frameForItemAtIndexPath:(NSIndexPath *)indexPath { CGFloat itemWidth = [self itemWidth]; CGFloat itemHeight = [self itemHeight]; CGFloat originX = HORIZONTAL_PAD + ((indexPath.row % NUMBER_OF_ITEMS_PER_ROW)*(HORIZONTAL_PAD + itemWidth)); CGFloat originY = VERTICAL_PAD + (floorf(indexPath.row/NUMBER_OF_ITEMS_PER_ROW)*(VERTICAL_PAD + itemHeight)); return CGRectMake(originX, originY, itemWidth, itemHeight); } - (void)prepareLayout { NSMutableDictionary *newLayoutInfo = [NSMutableDictionary dictionary]; NSMutableDictionary *cellLayoutInfo = [NSMutableDictionary dictionary]; NSInteger sectionCount = [self.collectionView numberOfSections]; NSIndexPath *indexPath = [NSIndexPath indexPathForItem:0 inSection:0]; for (NSInteger section = 0; section < sectionCount; section++) { NSInteger itemCount = [self.collectionView numberOfItemsInSection:section]; for (NSInteger item = 0; item < itemCount; item++) { indexPath = [NSIndexPath indexPathForItem:item inSection:section]; UICollectionViewLayoutAttributes *itemAttributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath]; itemAttributes.frame = [self frameForItemAtIndexPath:indexPath]; NSString *key = [self keyForIndexPath:indexPath]; cellLayoutInfo[key] = itemAttributes; } } newLayoutInfo[@"CellKind"] = cellLayoutInfo; self.layoutInfo = newLayoutInfo; } - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath { NSString *key = [self keyForIndexPath:indexPath]; UICollectionViewLayoutAttributes *retVal = self.layoutInfo[@"CellKind"][key]; return retVal; } - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect { NSMutableArray *allAttributes = [NSMutableArray arrayWithCapacity:self.layoutInfo.count]; [self.layoutInfo enumerateKeysAndObjectsUsingBlock:^(NSString *elementIdentifier, NSDictionary *elementsInfo, BOOL *stop) { [elementsInfo enumerateKeysAndObjectsUsingBlock:^(NSIndexPath *indexPath, UICollectionViewLayoutAttributes *attributes, BOOL *innerStop) { if (CGRectIntersectsRect(rect, attributes.frame)) { [allAttributes addObject:attributes]; } }]; }]; return allAttributes; } - (CGSize)collectionViewContentSize { return CGSizeMake(self.collectionView.bounds.size.width, floorf([self.collectionView numberOfItemsInSection:0]/NUMBER_OF_ITEMS_PER_ROW) * (self.itemHeight + VERTICAL_PAD) + VERTICAL_PAD); } 

在你的mainView中添加： [[UICollectionView alloc] initWithFrame:self.bounds collectionViewLayout:[[YourOwnCollectionViewLayout alloc] init]]; 你完成了！

Answer 3

您不考虑sectionInset和interItemSpacing 。 它有一些默认值推动单元格（填充）。 您可以将interItemSpacing设置为0，将sectionInset为UIEdgeInsetsZero或者在计算UIEdgeInsetsZero时必须考虑它们的值。

重写这些协议方法来设置大小，插入和项目间距

 optional public func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize optional public func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets optional public func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat optional public func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat