美文网首页
CollectionView的详细使用(一)

CollectionView的详细使用(一)

作者: 凉白开0072 | 来源:发表于2017-10-16 12:23 被阅读86次

本人小白,欢迎各位大佬补充指点

基本知识点

tableView与collectionView比较

  1. 相同点
    1> 都是通过datasource和delegate驱动的(datasource和delegate),因此在使用的时候必须实现数据源与代理协议方法;
    2> 性能上都实现了循环利用的优化。
  2. 不同点
    1> UITableView的cell是系统自动布局好的,不需要我们布局。但是UICollectionView的cell是需要我们自己布局的。所以我们在创建UICollectionView的时候必须传递一个布局参数,系统提供并实现了一个布局样式:流水布局(UICollectionViewFlowLayout)
    2> UITableViewController的self.view == self.tableview;,但UICollectionViewController的self.view != self.collectionView;
    UICollectionViewController层次结构:控制器View 上面UICollectionView
    3> UITableView的滚动方式只能是垂直方向, UICollectionView既可以垂直滚动,也可以水平滚动;
    4> UICollectionView的cell只能通过注册来确定重用标识符。不能像tableViewcell一样initWith...
    5> 并不能直接设置cell的高度/section之间距离的数据源方法,只能通过设置layout来实现
    结论 : 换句话说,UITableView的布局是UICollectionView的flow layout布局的一种特殊情况,类比于同矩形与正方形的关系
    代码举例:
  UICollectionView *collection = [[UICollectionView alloc] init];
     collection.frame = frame;
     [self.view addSubview:collection];
     运行报错:
     reason: 'UICollectionView must be initialized with a non-nil layout parameter
     意思:collctionView初始化时必须要传一个非空布局(layout)参数(parameter);
     因此初始化方法如下:
  UICollectionView *collection = [[UICollectionView alloc] initWithFrame:frame collectionViewLayout:[[UICollectionViewFlowLayout alloc] init]];

UICollectionViewFlowLayout

  • 系统自定义布局,流水布局,即:像流水一样一行满了,排下一行
  • UICollectionViewLayout的子类
  • CollectionViewcell排布的样式是由UICollectionViewLayout决定的
  • 该类常用属性如下:
    //设置最小行间距
    minimumLineSpacing
    // 设置垂直间距
    minimumInteritemSpacing
    注意:解析为何min ?
    情况1:
    同一行有不同的size的cell.由于高度不同,那么最小行间距就是本行最高的cell距离下一行最高cell的间距
    同理,同一列有不同size的cell,由于宽度不同,那么最大列间距就是本列最宽cell距离下一列最宽cell的间距
    123.png
    情况2:
    cell的itemsize已经设置固定,行间距再固定,那么界面排版就冲突,因此设置最小间距
    img2.png
    //每个cell统一尺寸
    itemSize
    //预估cell的尺寸,ios8之后可以先去预估cell的尺寸,然后去自适应(与tableView相似)
    estimatedItemSize
   //一行代码足以,不需要向tableView2行代码
     layout.estimatedItemSize = CGSizeMake( 60, 60);

//设置滚动方向(默认垂直滚动)
scrollDirection
//每一组头视图的尺寸。如果是垂直方向滑动,则只有高起作用;如果是水平方向滑动,则只有宽起作用。
headerReferenceSize
//每一组尾部视图的尺寸。如果是垂直方向滑动,则只有高起作用;如果是水平方向滑动,则只有宽起作用。
footerReferenceSize
//每一组的内容缩进
sectionInset

代码举例:制作一个简单启动广告页

AppDelegate中代码
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    UIWindow *window = [[UIWindow alloc] init];
    window.frame = [UIScreen mainScreen].bounds;
    window.rootViewController =[[CollectionViewController alloc] init];
    self.window = window;
    [window makeKeyAndVisible];
    return YES;
}
自定义的CollectionViewController控制器:
CollectionViewController.m文件
//  UICollection的基本使用-启动页制作
#import "ViewController.h"
#import "CollectionViewController.h"
@interface CollectionViewController ()
@end

@implementation CollectionViewController
static NSString * const reuseIdentifier = @"Cell";

- (void)viewDidLoad {
    [super viewDidLoad];
    //可以看到self.view != self.collectionView
    self.view.backgroundColor = [UIColor redColor];
    self.collectionView.backgroundColor = [UIColor greenColor];
    //取消弹簧效果
    self.collectionView.bounces = NO;
    self.collectionView.showsHorizontalScrollIndicator = NO;
    self.collectionView.pagingEnabled = YES;
    //1.必须通过注册cell
    [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:reuseIdentifier];
}
//2.重写init方法,传值layout
// 初始化的时候必须设置布局参数,通常使用系统提供的流水布局UICollectionViewFlowLayout
-(instancetype)init{
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    // 设置滚动的方向
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    // 设置cell的尺寸
    layout.itemSize = [UIScreen mainScreen].bounds.size;
    // 设置cell之间间距
    layout.minimumInteritemSpacing = 0;
    // 设置行距
    layout.minimumLineSpacing = 0;
    // 设置每一组的内间距
    //    layout.sectionInset = UIEdgeInsetsMake(0, 10, 0, 10);
    return [super initWithCollectionViewLayout:layout];
}
//3.实现代理数据源方法
#pragma mark <UICollectionViewDataSource>
//返回多少组
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}
//每组多少个cell
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 4;;
}
//返回展示的cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    //自定义cell,在cell里面放一张图片即可(略)
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];
    [cell.contentView addSubview:[UISwitch new]];
    cell.backgroundColor = [UIColor blueColor];
    return cell;
}
#pragma mark <UICollectionViewDelegate>
//点击最后一张时替换掉keyWindow的rootViewcontroller
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    if (indexPath.item == 3) {
        UIWindow *keyWindow = [UIApplication sharedApplication].keyWindow;
        UIViewController *VC = [[UIStoryboard storyboardWithName:@"Main" bundle:nil] instantiateInitialViewController];
        keyWindow.rootViewController = VC;
    }
}
//在这里检测到,一旦替换掉,当前控制器就会被销毁
-(void)dealloc{
    NSLog(@"对象已经销毁");
}
@end

效果图如下

Untitled1.gif

相关文章

网友评论

      本文标题:CollectionView的详细使用(一)

      本文链接:https://www.haomeiwen.com/subject/bbqkuxtx.html