UICollectionViewのセルの境界線とサイズ変更

Question

screen shotのように、UIViewControllerに基づいてUICollectionViewを実装します。

は、ここに私のコードです：

class SettingViewController: BaseViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout { 
    @IBOutlet var collectionView: UICollectionView! 

    override func viewDidLoad() { 
     super.viewDidLoad() 
     // Do any additional setup after loading the view. 
    } 

    override func didReceiveMemoryWarning() { 
     super.didReceiveMemoryWarning() 
     // Dispose of any resources that can be recreated. 
    } 

    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int { 
     return 3 
    } 

    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { 
     return 3 
    } 

    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { 
     let cell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath) as! SettingCollectionViewCell 
     cell.backgroundColor = UIColor.greenColor() 
     cell.lb.text = "Something" 
     cell.img.image = UIImage(named: "setting") 
     cell.layer.borderColor = UIColor.lightGrayColor().CGColor 
     cell.layer.borderWidth = 1 
     return cell; 
    } 

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize { 
     let screen = UIScreen.mainScreen().bounds 
     return CGSize(width: CGFloat(screen.width/3 - 10), height: 120) 
    } 
} 

、これが結果です：result :)））私は実際に私の心をlosed

！
私はfunc sizeForItemAtIndexPathを実装してセルのサイズを変更しましたが、各セルの間隔は同じで、同じ幅を持たず、設計上の境界をどのように取得するのか分かりませんでした。

私を助けてください！セルフサイジング電池用

Answer 1

ここトリックです、我々はカスタムを作成する必要がありますUICollectionViewFlowLayoutとして：

CustomCollectionLayout.h

#import <UIKit/UIKit.h> 

@protocol CustomCollectionLayoutDelegate  
<UICollectionViewDelegateFlowLayout> 

@end 

@interface CustomCollectionLayout : UICollectionViewFlowLayout 
@end 

CustomCollectionLayout.m

#import "CustomCollectionLayout.h" 

@interface CustomCollectionLayout() 

@end 

@implementation CustomCollectionLayout 
{ 
    NSDictionary *_layoutInfo; 
    CGFloat maxColumnHeight; 
    __weak id<CustomCollectionLayoutDelegate> delegate; 
} 

- (void)prepareLayout{ 

    delegate = (id<CustomCollectionLayoutDelegate>) self.collectionView.delegate; 
    //Calculate max values 
    maxColumnHeight = [self maxColumnHeight]; 

    //Store calculated frames for cells in the dictionary 
    NSMutableDictionary *cellLayoutInfo = [NSMutableDictionary dictionary]; 

    //Calculate Frame for a cell, per values from DataSource 
    CGFloat originY = 0; 
    NSInteger sectionCount = [self.collectionView numberOfSections]; 

    for (NSInteger section = 0; section < sectionCount; section++) { 

     UIEdgeInsets itemInsets = UIEdgeInsetsZero; 
     if ([delegate respondsToSelector:@selector(collectionView:layout:insetForSectionAtIndex:)]) { 
      itemInsets = [delegate collectionView:self.collectionView layout:self insetForSectionAtIndex:section]; 
      originY += itemInsets.top; 
     } 

     CGFloat height = 0; 
     NSInteger itemCount = [self.collectionView numberOfItemsInSection:section]; 
     CGFloat originX = itemInsets.left; 

     for (NSInteger item = 0; item < itemCount; item++) { 
      NSIndexPath *indexPath = [NSIndexPath indexPathForItem:item inSection:section]; 

      UICollectionViewLayoutAttributes *itemAttributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath]; 
      CGSize itemSize = CGSizeZero; 
      if ([delegate respondsToSelector:@selector(collectionView:layout:sizeForItemAtIndexPath:)]) { 
       itemSize = [delegate collectionView:self.collectionView layout:self sizeForItemAtIndexPath:indexPath]; 
       float selectedOriginY = originY; 
       itemAttributes.frame = CGRectMake(originX, selectedOriginY, itemSize.width, itemSize.height); 
      } 
      cellLayoutInfo[indexPath] = itemAttributes; 

      CGFloat interItemSpacingX = 0; 
      if ([delegate respondsToSelector:@selector(collectionView:layout:minimumInteritemSpacingForSectionAtIndex:)]) { 
       interItemSpacingX = [delegate collectionView:self.collectionView layout:self minimumInteritemSpacingForSectionAtIndex:section]; 
      } 

      originX += floorf(itemSize.width + interItemSpacingX); 
      height = height > itemSize.height ? height : itemSize.height; 
     } 

     CGFloat interItemSpacingY = 0; 
     if ([delegate respondsToSelector:@selector(collectionView:layout:minimumLineSpacingForSectionAtIndex:)]) { 
      interItemSpacingY = [delegate collectionView:self.collectionView layout:self minimumLineSpacingForSectionAtIndex:section]; 
     } 

     originY += floor(height + interItemSpacingY); 
    } 

    _layoutInfo = cellLayoutInfo; 
} 

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect 
{ 
    NSMutableArray *allAttributes = [NSMutableArray arrayWithCapacity:_layoutInfo.count]; 

    [_layoutInfo enumerateKeysAndObjectsUsingBlock:^(NSIndexPath *indexPath, 
                UICollectionViewLayoutAttributes *attributes, 
                BOOL *innerStop) { 
     if (CGRectIntersectsRect(rect, attributes.frame)) { 
      [allAttributes addObject:attributes]; 
     } 
    }]; 

    return allAttributes; 
} 

- (BOOL) shouldInvalidateLayoutForBoundsChange:(CGRect)newBound 
{ 
    return YES; 
} 

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath 
{ 
    return _layoutInfo[indexPath]; 
} 

- (CGSize)collectionViewContentSize 
{ 
    CGFloat width = self.collectionView.frame.size.width; 
    CGFloat height = maxColumnHeight; 
    return CGSizeMake(width, height); 
} 

//Maximum Height of perticular Column in CollectionView 
- (CGFloat)maxColumnHeight 
{ 
    NSInteger sectionCount = [self.collectionView numberOfSections]; 
    CGFloat maxHeight = 0; 
    for (NSInteger section = 0; section < sectionCount; section++) { 
     NSInteger itemCount = [self.collectionView numberOfItemsInSection:section]; 
     CGFloat maxRowHeight = 0; 
     for (NSInteger item = 0; item < itemCount; item++) { 
      NSIndexPath *indexPath = [NSIndexPath indexPathForItem:item inSection:section]; 
      if ([delegate respondsToSelector:@selector(collectionView:layout:sizeForItemAtIndexPath:)]) { 
       CGSize itemSize = [delegate collectionView:self.collectionView layout:self sizeForItemAtIndexPath:indexPath]; 
       maxRowHeight = itemSize.height > maxRowHeight ? itemSize.height : maxRowHeight; 
      } 
     } 
     CGFloat interSectionSpacingY = 0; 
     if ([delegate respondsToSelector:@selector(collectionView:layout:minimumLineSpacingForSectionAtIndex:)]) { 
      interSectionSpacingY = [delegate collectionView:self.collectionView layout:self minimumLineSpacingForSectionAtIndex:section]; 
     } 

     UIEdgeInsets itemInsets = UIEdgeInsetsZero; 
     if ([delegate respondsToSelector:@selector(collectionView:layout:insetForSectionAtIndex:)]) { 
      itemInsets = [delegate collectionView:self.collectionView layout:self insetForSectionAtIndex:section]; 
     } 

     maxHeight += maxRowHeight; 

     //Add interSectionSpacing and Insets for all sections except last. 
     if (section != sectionCount-1) { 
      maxHeight += interSectionSpacingY + itemInsets.top; 
     } 
    } 

    return maxHeight; 
} 

@end 

Objective-Cコードを提供するために私を許して、私たちは、このカスタムレイアウトを使用すると

にブリッジングヘッダーを使用することができます。

灰色はコレクションビューで、ピンクはセルです。

デリゲートメソッド：

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { 
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("CollectionCellId", forIndexPath: indexPath) 
    cell.backgroundColor = UIColor.greenColor() 
    //cell.lb.text = "Something" 
    //cell.img.image = UIImage(named: "setting") 
    cell.layer.borderColor = UIColor.lightGrayColor().CGColor 
    cell.layer.borderWidth = 1 
    return cell; 
} 

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize { 
    let screen = UIScreen.mainScreen().bounds 
    return CGSize(width: CGFloat(screen.width/3), height: 120) 
} 

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat { 
    return 0 
} 

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat { 
    return 0 
} 

そして、ここでは出力されます：
今

、我々は、任意のカスタムセルを使用して、目的の外観n個の感触を得ることができます。

これがあなたを手伝ってくれることを願っています！

Answer 2

方法下の2つの実装：このカスタムフローレイアウトを実装するセルbetwween等しいスペースのため

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { 
     let cell = collectionView.dequeueReusableCellWithReuseIdentifier("hobbiesCell", forIndexPath: indexPath) as! HobbiesTagCell 
     self.configureCell(cell, forIndexPath: indexPath) 
     return cell 
    } 

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize { 
     self.configureCell(self.sizingCell!, forIndexPath: indexPath) 
     return self.sizingCell!.systemLayoutSizeFittingSize(UILayoutFittingCompressedSize) 
    } 

を：

class CustomViewFlowLayout : UICollectionViewFlowLayout { 

    let cellSpacing:CGFloat = 2 

    override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? { 
     if let attributes = super.layoutAttributesForElementsInRect(rect) { 
      for (index, attribute) in attributes.enumerate() { 
       if index == 0 { continue } 
       let prevLayoutAttributes = attributes[index - 1] 
       let origin = CGRectGetMaxX(prevLayoutAttributes.frame) 
       if(origin + cellSpacing + attribute.frame.size.width < self.collectionViewContentSize().width) { 
        attribute.frame.origin.x = origin + cellSpacing 
       } 
      } 
      return attributes 
     } 
     return nil 
    } 
}