CollectionView 居左对齐（搜索、历史记录）

之前做使用collection做历史记录，不管sollection的怎么设置，item之间能设置最小距离，却不能设置最大距离，所以总是达不到预期效果。后来查看资料重写UICollectionViewFlowLayout方法来达到预期效果。废话不多说，上代码。

未完成效果.png
预期效果.png

一、下面是继承UICollectionViewFlowLayout写的类

import UIKit

extension UICollectionViewLayoutAttributes {

    /** 每行第一个item左对齐 **/
    func leftAlignFrame(sectionInset:UIEdgeInsets) {
        var frame = self.frame
        frame.origin.x = sectionInset.left
        self.frame = frame
    }
}

class UICollectionViewLeftAlignedLayout: UICollectionViewFlowLayout {

    //MARK: - 重新UICollectionViewFlowLayout的方法

    /** Collection所有的UICollectionViewLayoutAttributes */
    override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        let attributesToReturn = super.layoutAttributesForElementsInRect(rect)!
        for attributes in attributesToReturn {
            if nil == attributes.representedElementKind {
                let indexPath = attributes.indexPath
                attributes.frame = self.layoutAttributesForItemAtIndexPath(indexPath)!.frame
            }
        }
        return attributesToReturn
    }

    /** 每个item的UICollectionViewLayoutAttributes */
    override func layoutAttributesForItemAtIndexPath(indexPath: NSIndexPath) -> UICollectionViewLayoutAttributes? {
        //现在item的UICollectionViewLayoutAttributes
        let currentItemAttributes = super.layoutAttributesForItemAtIndexPath(indexPath)!
        //现在section的sectionInset
        let sectionInset = self.evaluatedSectionInset(indexPath.section)
        //是否是section的第一个item
        let isFirstItemInSection = indexPath.item == 0
        //出去section偏移量的宽度
        let layoutWidth: CGFloat = CGRectGetWidth(self.collectionView!.frame) - sectionInset.left - sectionInset.right
        //是section的第一个item
        if isFirstItemInSection {
            //每行第一个item左对齐
            currentItemAttributes.leftAlignFrame(sectionInset)
            return currentItemAttributes
        }
    
        //前一个item的NSIndexPath
        let previousIndexPath = NSIndexPath(forItem: indexPath.item - 1, inSection: indexPath.section)
        //前一个item的frame
        let previousFrame = self.layoutAttributesForItemAtIndexPath(previousIndexPath)!.frame
        //为现在item计算新的left
        let previousFrameRightPoint: CGFloat = previousFrame.origin.x + previousFrame.size.width
        //现在item的frame
        let currentFrame = currentItemAttributes.frame
        //现在item所在一行的frame
        let strecthedCurrentFrame = CGRectMake(sectionInset.left, currentFrame.origin.y, layoutWidth, currentFrame.size.height)
    
        //previousFrame和strecthedCurrentFrame是否有交集，没有，说明这个item和前一个item在同一行，item是这行的第一个item
        let isFirstItemInRow = !CGRectIntersectsRect(previousFrame, strecthedCurrentFrame)
        //item是这行的第一个item
        if isFirstItemInRow {
            //每行第一个item左对齐
            currentItemAttributes.leftAlignFrame(sectionInset)
            return currentItemAttributes
        }
        //不是每行的第一个item
        var frame = currentItemAttributes.frame
        //为item计算新的left = previousFrameRightPoint + item之间的间距
        frame.origin.x = previousFrameRightPoint + self.evaluatedMinimumInteritemSpacing(indexPath.item)
        //为item的frame赋新值
        currentItemAttributes.frame = frame
        return currentItemAttributes
    }

    //MARK: - System

    /** item行间距 **/
    private func evaluatedMinimumInteritemSpacing(ItemAtIndex:Int) -> CGFloat     {
        if let delete = self.collectionView?.delegate {
            weak var delegate = (delete as! UICollectionViewDelegateFlowLayout)
            if delegate!.respondsToSelector(#selector(UICollectionViewDelegateFlowLayout.collectionView(_:layout:minimumInteritemSpacingForSectionAtIndex:))) {
                let mini =  delegate?.collectionView!(self.collectionView!, layout: self, minimumInteritemSpacingForSectionAtIndex: ItemAtIndex)
                if mini != nil {
                    return mini!
                }
            }
        }
        return self.minimumInteritemSpacing
    }

    /** section的偏移量 **/
    private func evaluatedSectionInset(itemAtIndex:Int) -> UIEdgeInsets {
        if let delete = self.collectionView?.delegate {
            weak var delegate = (delete as! UICollectionViewDelegateFlowLayout)
            if delegate!.respondsToSelector(#selector(UICollectionViewDelegateFlowLayout.collectionView(_:layout:insetForSectionAtIndex:))) {
                let sectionInset =  delegate?.collectionView!(self.collectionView!, layout: self, insetForSectionAtIndex: itemAtIndex)
                if sectionInset != nil {
                    return sectionInset!
                }
            }
        }
        return self.sectionInset
    }
}

下面是OC版本
UICollectionViewLeftAlignedLayout.h

#import <UIKit/UIKit.h>

@interface UICollectionViewLeftAlignedLayout : UICollectionViewFlowLayout

@end

/**
 *  Just a convenience protocol to keep things consistent.
 *  Someone could find it confusing for a delegate object to conform to UICollectionViewDelegateFlowLayout
 *  while using UICollectionViewLeftAlignedLayout.
 */
@protocol UICollectionViewDelegateLeftAlignedLayout <UICollectionViewDelegateFlowLayout>

@end

UICollectionViewLeftAlignedLayout.m

#import "UICollectionViewLeftAlignedLayout.h"

@interface UICollectionViewLayoutAttributes (LeftAligned)

- (void)leftAlignFrameWithSectionInset:(UIEdgeInsets)sectionInset;

@end

@implementation UICollectionViewLayoutAttributes (LeftAligned)

/** 每行第一个item左对齐 **/
- (void)leftAlignFrameWithSectionInset:(UIEdgeInsets)sectionInset
{
    CGRect frame = self.frame;
    frame.origin.x = sectionInset.left;
    self.frame = frame;
}

@end


@implementation UICollectionViewLeftAlignedLayout

#pragma mark - UICollectionViewLayout

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
    NSArray* attributesToReturn = [super layoutAttributesForElementsInRect:rect];
    for (UICollectionViewLayoutAttributes* attributes in attributesToReturn) {
        if (nil == attributes.representedElementKind) {
            NSIndexPath* indexPath = attributes.indexPath;
            attributes.frame = [self layoutAttributesForItemAtIndexPath:indexPath].frame;
        }
    }
    return attributesToReturn;
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
    //现在item的UICollectionViewLayoutAttributes
    UICollectionViewLayoutAttributes* currentItemAttributes = [super layoutAttributesForItemAtIndexPath:indexPath];
    //现在section的sectionInset
    UIEdgeInsets sectionInset = [self evaluatedSectionInsetForItemAtIndex:indexPath.section];

    //是否是section的第一个item
    BOOL isFirstItemInSection = indexPath.item == 0;
    //出去section偏移量的宽度
    CGFloat layoutWidth = CGRectGetWidth(self.collectionView.frame) - sectionInset.left - sectionInset.right;

    //是section的第一个item
    if (isFirstItemInSection) {
        //每行第一个item左对齐
        [currentItemAttributes leftAlignFrameWithSectionInset:sectionInset];
        return currentItemAttributes;
    }

    //前一个item的NSIndexPath
    NSIndexPath* previousIndexPath = [NSIndexPath indexPathForItem:indexPath.item-1 inSection:indexPath.section];
    //前一个item的frame
    CGRect previousFrame = [self layoutAttributesForItemAtIndexPath:previousIndexPath].frame;
    //为现在item计算新的left
    CGFloat previousFrameRightPoint = previousFrame.origin.x + previousFrame.size.width;
    //现在item的frame
    CGRect currentFrame = currentItemAttributes.frame;
    //现在item所在一行的frame
    CGRect strecthedCurrentFrame = CGRectMake(sectionInset.left,
                                              currentFrame.origin.y,
                                              layoutWidth,
                                              currentFrame.size.height);
    //previousFrame和strecthedCurrentFrame是否有交集，没有，说明这个item和前一个item在同一行，item是这行的第一个item
    BOOL isFirstItemInRow = !CGRectIntersectsRect(previousFrame, strecthedCurrentFrame);

    //item是这行的第一个item
    if (isFirstItemInRow) {
        //每行第一个item左对齐
        [currentItemAttributes leftAlignFrameWithSectionInset:sectionInset];
        return currentItemAttributes;
    }

    //不是每行的第一个item
    CGRect frame = currentItemAttributes.frame;
    //为item计算新的left = previousFrameRightPoint + item之间的间距
    frame.origin.x = previousFrameRightPoint + [self evaluatedMinimumInteritemSpacingForItemAtIndex:indexPath.row];
    //为item的frame赋新值
    currentItemAttributes.frame = frame;
    return currentItemAttributes;
}

/** item行间距 **/
- (CGFloat)evaluatedMinimumInteritemSpacingForItemAtIndex:(NSInteger)index
{
    if ([self.collectionView.delegate respondsToSelector:@selector(collectionView:layout:minimumInteritemSpacingForSectionAtIndex:)]) {
        id<UICollectionViewDelegateLeftAlignedLayout> delegate = (id<UICollectionViewDelegateLeftAlignedLayout>)self.collectionView.delegate;

        return [delegate collectionView:self.collectionView layout:self minimumInteritemSpacingForSectionAtIndex:index];
    } else {
        return self.minimumInteritemSpacing;
    }
}

/** section的偏移量 **/
- (UIEdgeInsets)evaluatedSectionInsetForItemAtIndex:(NSInteger)index
{
    if ([self.collectionView.delegate respondsToSelector:@selector(collectionView:layout:insetForSectionAtIndex:)]) {
        id<UICollectionViewDelegateLeftAlignedLayout> delegate = (id<UICollectionViewDelegateLeftAlignedLayout>)self.collectionView.delegate;

        return [delegate collectionView:self.collectionView layout:self insetForSectionAtIndex:index];
    } else {
        return self.sectionInset;
    }
}

@end

二、下面在collectionView中使用这个类，我的collectionView是使用xib创建的。

/// 搜索记录
@IBOutlet weak var collectionView: UICollectionView!
/// 历史搜索类型
var historyArray = [String]()

override func awakeFromNib() {
    super.awakeFromNib()

    historyArray = ["关键词","iOS学习基础","牛奶","跳绳","轮滑鞋","香蕉","面包","苹果梨","苹果"]

    let layout = UICollectionViewLeftAlignedLayout()
    //竖向cell之间的距离
    layout.minimumLineSpacing = 15
    //横向cell之间的距离，没有设置0.0
    layout.minimumInteritemSpacing = 10
    //section的header的大小
    layout.headerReferenceSize = CGSizeMake(ScreenWidth , 44);
    //section的偏移量
    layout.sectionInset = UIEdgeInsetsMake(0, 10, 0, 10)
    //collectionView的偏移量
    collectionView.contentInset = UIEdgeInsetsMake(0, 0, 5, 0)
    //SearchCell:xib中item的identifier
    collectionView.registerNib(UINib.init(nibName: "SearchCell", bundle: nil), forCellWithReuseIdentifier: "SearchCell")
    //SearchHeaderView中sender的header的identifier
    collectionView.registerNib(UINib.init(nibName: "SearchHeaderView", bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "SearchHeaderView")
    collectionView.collectionViewLayout = layout
}

//MARK: - UICollectionViewDataSource

/** Section数 */
func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int{
    if historyArray.count > 0 {
        return 1
    }
    return 0
}

/** Items数 */
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return historyArray.count
}

/** Items创建 */
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell{
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("SearchCell", forIndexPath: indexPath) as? SearchCell
    cell?.name.text = historyArray[indexPath.item]
    return cell!
}

/** collection的header创建 */
func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
    let view = collectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier: "SearchHeaderView", forIndexPath: indexPath) as? SearchHeaderView
    return view!
}

//MARK: - UICollectionViewDelegate

/** 历史记录关键词点击 */
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
   
}

//MARK: - UICollectionViewDelegateFlowLayout

/** 设置关键词大小 */
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    let name = historyArray[indexPath.item]
    let size = self.boundingRectWithSize(CGSizeMake(ScreenWidth - 20, 30), options: .UsesLineFragmentOrigin, attributes: [NSFontAttributeName: UIFont.systemFontOfSize(12)], context: nil).size
    let with = size.width
    return CGSizeMake(with + 40, 30)
}

参考文档
http://code.cocoachina.com/view/126206

end:小编是很认真的写文哦，如果小编的文对您有用，一定要点“喜欢”哦！如果有问题欢迎评论

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,204评论 4赞 61
  • 奶奶爷爷
    小时候，爷爷奶奶似乎是在吵骂中过日子。印象最深的一次是每天晚上奶奶会给爷爷烧一锅奶茶，有一天爷爷说奶奶这次烧的不好...
    Taylor記阅读 1,618评论 0赞 0
  • 外语到底应该怎么学？
    年年说：这是一本学习外语的方法论集锦，对于外语学习困难户尤其值得一读。 我的学生史如果要加上一个有关外语学习方面的...
    汝年年阅读 5,910评论 14赞 39
  • 王健林大举卖楼！李嘉诚潘石屹加速撤退！
    今天上午，万达商业、融创中国联合发布公告：融创中国以295.75亿元收购了13个万达文旅城的项目股权，并以335....
    恻隐之心_6bfd阅读 1,352评论 0赞 0
  • 品读丨古诗里的夏天
    你对夏天有什么美好的印象？是竹席、折扇、半杯清茶，还是微风，鸣蝉，十里荷香？每个人都有自己的答案，古人也一样，在诗...
    杨三岁阿阅读 3,165评论 0赞 3