IOS开发--横向流水布局实现

最新推荐文章于 2024-08-29 08:23:38 发布

转载最新推荐文章于 2024-08-29 08:23:38 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/27497

文章标签：

#移动开发

本文介绍如何实现UICollectionView的自定义流水布局效果，包括创建自定义布局、注册UICollectionViewCell及设置数据源等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//
//  ViewController.m
//  自定义流水布局
//
//  Created by xmg on 16/1/15.
//  Copyright © 2016年 HeYang. All rights reserved.
//

#import "ViewController.h"
#import "PhotoCell.h"
#import "PhotoLayout.h"

/*
 // a , b , c a = b + c
 //    int d = (2,3,5);
 
 // 高聚合,低耦合
 int a = ({
 int b = 2;
 int c = 3;
 a = b + c;
 20;
 });
 */

/*
 UICollectionView注意点:
 1.初始化必须要传入布局,(流水布局:九宫格布局)
 2.UICollectionViewCell必须要注册
 3.必须自定义cell
 */


#define XMGScreenW [UIScreen mainScreen].bounds.size.width
static NSString * const ID = @"cell";
@interface ViewController ()<UICollectionViewDataSource>

@end

@implementation ViewController

// 思路:照片浏览布局:流水布局,在拖到的时候,在原来基础上重新计算下布局 -> 在原来功能上再添加功能,自定义流水布局
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    // 创建流水布局
    PhotoLayout *layout = ({
        layout = [[PhotoLayout alloc] init];
        // 尺寸
        layout.itemSize = CGSizeMake(180, 180);
        // 设置滚动方向:水平
        layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
        // 设置额外滚动区域
        CGFloat inset = (XMGScreenW - 180) * 0.5;
        layout.sectionInset = UIEdgeInsetsMake(0, inset, 0, inset);
        
        layout;
    });
    
    // 创建UICollectionView:默认为黑色
    UICollectionView *collectionView = ({
        collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
        collectionView.bounds = CGRectMake(0, 0, self.view.bounds.size.width, 200);
        collectionView.center = self.view.center;
        collectionView.backgroundColor = [UIColor cyanColor];
        collectionView.showsHorizontalScrollIndicator = NO;
        [self.view addSubview:collectionView];
        
        // 设置数据源
        collectionView.dataSource = self;
        collectionView;
    });
    
    // 注册cell
    [collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([PhotoCell class]) bundle:nil] forCellWithReuseIdentifier:ID];
}


#pragma mark -UICollectionViewDataSource
// 返回有多少个cell
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 20;
}

// 返回每个cell长什么样
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    
    PhotoCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
    
    NSString *imageName = [NSString stringWithFormat:@"%ld",indexPath.row + 1];
    
    cell.image = [UIImage imageNamed:imageName];
    
    return cell;
}

@end

前言：因为时间缘故，很少进行通俗易懂的算法思路讲解，这里先展示动态图片效果，然后后面的内容我就直接上关键源码了。

效果展示图；

源码百度云盘下载链接: http://pan.baidu.com/s/1eQOOixc 密码: duu8

源码：

//  PhotoCell.h
//  自定义流水布局
//
//  Created by xmg on 16/1/15.
//  Copyright © 2016年 HeYang. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface PhotoCell : UICollectionViewCell

@property (nonatomic, strong) UIImage *image;

@end

================两个文件的分水岭==================
//
//  PhotoCell.m
//  自定义流水布局
//
//  Created by xmg on 16/1/15.
//  Copyright © 2016年 HeYang. All rights reserved.
//

26 
#import "PhotoCell.h"

@interface PhotoCell ()
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
@end

@implementation PhotoCell

- (void)awakeFromNib {
    // Initialization code
}

- (void)setImage:(UIImage *)image
{
    _image = image;
    
    _imageView.image = image;
    
}

@end

//
//  PhotoLayout.h
//  自定义流水布局
//
//  Created by xmg on 16/1/15.
//  Copyright © 2016年 HeYang. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface PhotoLayout : UICollectionViewFlowLayout

@end


==============两个文件的分水岭================

//
//  PhotoLayout.m
//  自定义流水布局
//
//  Created by xmg on 16/1/15.
//  Copyright © 2016年 HeYang. All rights reserved.
//

#import "PhotoLayout.h"
#define XMGScreenW [UIScreen mainScreen].bounds.size.width
@implementation PhotoLayout

// 复杂效果: 分析 ->
// cell离中心点距离越近(delta越小),就越大,越远,就越小
// 距离中心点
// 知道哪些cell需要缩放:显示出来的cell才需要进行布局



// 给定一个区域,就返回这个区域内所有cell布局
- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
    // 1.获取显示区域,bounds 而不是整个滚动区域，这样设置的子控件就控制在显示区域范围内了。
    CGRect visiableRect = self.collectionView.bounds;

    // 2.获取显示区域内的cell的布局
    NSArray *attributes = [super layoutAttributesForElementsInRect:visiableRect];
    
    
    
    // 3.遍历cell布局
    CGFloat offsetX = self.collectionView.contentOffset.x;
    for (UICollectionViewLayoutAttributes *attr in attributes) {
        // 3.1 计算下距离中心点距离
        CGFloat delta = fabs(attr.center.x - offsetX - XMGScreenW * 0.5);
        // 1 ~ 0.75
        CGFloat scale = 1 - delta / (XMGScreenW * 0.5) * 0.25;//1-(0~0.5) = 1~0.5 --> 1-(0~0.5)×0.25 = (1~0.75)
        attr.transform = CGAffineTransformMakeScale(scale, scale);
    }
    
    return attributes;
}

// Invalidate:刷新
// 是否允许在拖动的时候刷新布局
// 谨慎使用,YES:只要一滚动就会布局
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}

最后的关键代码：

//
//  ViewController.m
//  自定义流水布局
//
//  Created by xmg on 16/1/15.
//  Copyright © 2016年 HeYang. All rights reserved.
//

#import "ViewController.h"
#import "PhotoCell.h"
#import "PhotoLayout.h"

/*
 // a , b , c a = b + c
 //    int d = (2,3,5);
 
 // 高聚合,低耦合
 int a = ({
 int b = 2;
 int c = 3;
 a = b + c;
 20;
 });
 */

/*
 UICollectionView注意点:
 1.初始化必须要传入布局,(流水布局:九宫格布局)
 2.UICollectionViewCell必须要注册
 3.必须自定义cell
 */


#define XMGScreenW [UIScreen mainScreen].bounds.size.width
static NSString * const ID = @"cell";
@interface ViewController ()<UICollectionViewDataSource>

@end

@implementation ViewController

// 思路:照片浏览布局:流水布局,在拖到的时候,在原来基础上重新计算下布局 -> 在原来功能上再添加功能,自定义流水布局
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    // 创建流水布局
    PhotoLayout *layout = ({
        layout = [[PhotoLayout alloc] init];
        // 尺寸
        layout.itemSize = CGSizeMake(180, 180);
        // 设置滚动方向:水平
        layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
        // 设置额外滚动区域
        CGFloat inset = (XMGScreenW - 180) * 0.5;
        layout.sectionInset = UIEdgeInsetsMake(0, inset, 0, inset);
        
        layout;
    });
    
    // 创建UICollectionView:默认为黑色
    UICollectionView *collectionView = ({
        collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
        collectionView.bounds = CGRectMake(0, 0, self.view.bounds.size.width, 200);
        collectionView.center = self.view.center;
        collectionView.backgroundColor = [UIColor cyanColor];
        collectionView.showsHorizontalScrollIndicator = NO;
        [self.view addSubview:collectionView];
        
        // 设置数据源
        collectionView.dataSource = self;
        collectionView;
    });
    
    // 注册cell
    [collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([PhotoCell class]) bundle:nil] forCellWithReuseIdentifier:ID];
}


#pragma mark -UICollectionViewDataSource
// 返回有多少个cell
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 20;
}

// 返回每个cell长什么样
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    
    PhotoCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
    
    NSString *imageName = [NSString stringWithFormat:@"%ld",indexPath.row + 1];
    
    cell.image = [UIImage imageNamed:imageName];
    
    return cell;
}

@end