流水布局的实现(Objective-C & Swift)

Objective-C

最终效果:

1. 图片水平滚动
2. 图片初始位置在屏幕中间
3. 滑动到最左和最右时图片停留在屏幕最中间.
4. 中间任意位置停止滑动时, 总有一个图片显示在屏幕的最中间

实现原理

• 使用自定义布局,这里创建自定义类LineLayout继承自流水布局UICollectionViewFlowLayout

#import "LineLayout.h"

@implementation LineLayout

/** collectView会在布局时调用该方法 */
- (void)prepareLayout
{
    [super prepareLayout];
    
    /** 设置滚动方向为水平滚动 */
    self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    
    /** 设置内间距, 保证左右两边的显示的图片在collectView的最中间 */
    CGFloat inset = (self.collectionView.frame.size.width - self.itemSize.width) * 0.5;
    self.sectionInset = UIEdgeInsetsMake(0, inset, 0, inset);
}



/** 返回YES时, 每次滚动都会调用layoutAttributesForElementsInRect:方法; 默认返回NO,即轻微的滚动不会调用layoutAttributesForElementsInRect:方法 */
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;   
}

/** 
*  1.一个cell对应一个UICollectionViewLayoutAttributes对象;
*  2.UICollectionViewLayoutAttributes对象决定了cell的frame;
*
*  layoutAttributesForElementsInRect:
*  返回值为一个数组,里面存放着rect范围内所有元素的布局属性; 
*  返回值也就决定了rect范围内所有元素的排布(frame);
*/
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    // 调用super, 获得计算好的属性值
    NSArray *attrs = [super layoutAttributesForElementsInRect:rect];
    
    for (UICollectionViewLayoutAttributes *attr in attrs)
    {
        // collectView的中心点x = 偏移量 + 自身宽度的一半
        CGFloat collectViewCenterX = self.collectionView.contentOffset.x + self.collectionView.frame.size.width * 0.5;
        
        // cell的中心点x = 偏移量 + cell宽度的一半 = attr.center.x
        CGFloat cellCenterX = attr.center.x;
        
        // 计算cell的中心点到collectView中心点的距离(距离越近,尺寸越大)
        CGFloat delta = ABS(cellCenterX - collectViewCenterX);
        
        // 计算缩放比例
        CGFloat scale = 1 - delta / self.collectionView.frame.size.width;;
        
        // 设置缩放
        attr.transform = CGAffineTransformMakeScale(scale, scale);
    }
    return attrs;
}


/**
 *  作用: 让collectView停止滚动时总有一个cell显示在屏幕的最中间.
 *
 *  @return 返回值决定了collectionView停止滚动时的偏移量
 */
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
    // 获得最终的矩形框frame
    CGRect rect;
    rect.origin.x = proposedContentOffset.x;
    rect.origin.y = 0;
    rect.size = self.collectionView.frame.size;
    
    NSArray *attrs = [self layoutAttributesForElementsInRect:rect];
    
    // 计算collectView最中心点的x的值
    CGFloat centerX = proposedContentOffset.x + self.collectionView.frame.size.width * 0.5;
    
    // 计算cell的的中心点x距离collectView中心x的最小值
    CGFloat minDelta = MAXFLOAT;
    for (UICollectionViewLayoutAttributes *attr in attrs) {
        if (ABS(attr.center.x - centerX) < ABS(minDelta) ){
            minDelta = attr.center.x - centerX;
        }
    }
    
    // 修改最终的偏移量
    proposedContentOffset.x += minDelta;
    return proposedContentOffset;
}
@end

• 创建collectView, 并设置创建好的自定义布局

#import "ViewController.h"
#import "LineLayout.h"
#import "LVPictureCell.h"

@interface ViewController () 
@end

static NSString *ID = @"mycell";

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    /** 设置背景色 */
    self.view.backgroundColor = [UIColor redColor];
    
    /** 设置状态栏文字颜色 */
    [UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleLightContent;

    /** 创建布局 */
    LineLayout *layout = [[LineLayout alloc] init];
    
    /** 设置cell的大小 */
    layout.itemSize = CGSizeMake(250 * 0.5, 370 * 0.5);
    
    /** 设置collectView的frame */
    CGRect frame = CGRectMake(0, 100, self.view.frame.size.width, 370);
    
    /** 创建collectView */
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:frame collectionViewLayout:layout];
    
    /** 注册cell */
    [collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([LVPictureCell class]) bundle:nil] forCellWithReuseIdentifier:ID];
    
    /** collectView的背景色 */
    collectionView.backgroundColor = [UIColor blackColor];
    
    /** 设置collectView的代理和数据源 */
    collectionView.dataSource = self;
    collectionView.delegate = self;
    
    /** collectView添加到当前view上 */
    [self.view addSubview:collectionView];
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    LVPictureCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
    
    cell.imageName = [NSString stringWithFormat:@"%zd",indexPath.item];

    return cell;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 13;
}
@end

Swift

1. 自定义布局

private class NewFeatureLayout: UICollectionViewFlowLayout {
    override func prepareLayout()
        super.prepareLayout()
        itemSize = UIScreen.mainScreen().bounds.size
        minimumInteritemSpacing = 0
        minimumLineSpacing = 0
        scrollDirection = UICollectionViewScrollDirection.Horizontal
        collectionView?.bounces = false
        collectionView?.pagingEnabled = true
        collectionView?.showsHorizontalScrollIndicator = false
    }
}

2. 创建控制器继承自UICollectionViewController

private let reuseIdentifier = "Cell"
private let numberOfPages = 4
class FlowLayoutViewController: UICollectionViewController {
    // 重写初始化方法, 初始化时必须指定布局
    let layout: UICollectionViewFlowLayout = NewFeatureLayout()
    init() {
       super.init(collectionViewLayout: layout)
   }
   required init?(coder aDecoder: NSCoder) {
       fatalError("init(coder:) has not been implemented")
   }
   override func viewDidLoad() {
        super.viewDidLoad()
        // 注册cell
        self.collectionView!.registerClass(NewFeatureCell.self, forCellWithReuseIdentifier: reuseIdentifier)
    }

    // MARK: UICollectionViewDataSource
    override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return numberOfPages
    }

    override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! NewFeatureCell
        cell.imageIndex = indexPath.item
        return cell
    }
}

3. 自定义cell

class FlowLayoutCell: UICollectionViewCell {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupUI()
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupUI() {
        // add subView onto contentView
        contentView.addSubview(imageView)
        contentView.addSubview(startButton)
        // set constraints for ImageView
        imageView.snp_makeConstraints { (make) -> Void in
            make.top.equalTo(0)
            make.bottom.equalTo(0)
            make.leading.equalTo(0)
            make.trailing.equalTo(0)
        }
        // set constraints for startButton
        startButton.snp_makeConstraints { (make) -> Void in
            make.centerX.equalTo(contentView)
            make.bottom.equalTo(-150)
        }
    }
    
    // set imageView's image when imageIndex was set
    var imageIndex: Int? {
        didSet{
            imageView.image = UIImage(named: "new_feature_\(imageIndex! + 1)")
            if imageIndex == 3 {
                startButton.hidden = false
            }
        }
    }
    
    // lazy loading
    private lazy var imageView = UIImageView()
    private lazy var startButton: UIButton = {
        let button = UIButton()
        button.setImage(UIImage(named: "new_feature_button"), forState: .Normal)
        button.setImage(UIImage(named: "new_feature_button_highlighted"), forState: .Highlighted)
        button.addTarget(self, action: "enterWeiboClick", forControlEvents: .TouchUpInside)
        button.hidden = true
        return button
    }()
    
    // enterWeibo button click
    func enterWeiboClick() {
        print(__FUNCTION__)
    }
}

• 方法调用顺序

  1. collectionView(_:numberOfItemsInSection:) // 询问控制器要显示的cell的个数
  2. prepareLayout() // 开始布局
  3. collectionView(_:cellForItemAtIndexPath:) // 问控制器要cell
  4. init(frame:) // 初始化cell