UICollectionView集合视图

作者: 我不白先生 | 来源:发表于2020-11-07 15:53 被阅读0次

集合视图，视图可以以多列多行的形式来展示数据
表视图（UITableView),视图可以一列多行的形式来展示数据使用上集合视图和表视图非常类似，从iOS6以后开始支持
与表视图的异同点：
相同：
1.都需要遵守协议：
表视图:
UITableViewDataSource
UITableViewDelegate
集合视图：
UICollectionViewDataSource
UICollectionViewDelegate
2.使用上都需要关注三问一答
表视图
1.有多少个分区
2.每个分区有多少行
3.每行长什么样
集合视图
1.有多少分区
2.每个分区有多少xiang
3.每项长什么样子
不同点：
1.cell中的内容不同
表视图
cell默认自带了三个视图
textLabel
detailTextLabel
imageView
集合视图
cell不带任何系统定义好的用于显示的视图，只能访问以下几个属性完成界面的定制
backgroundColor
backgroundView
contentView
2.布局不同
表视图布局是从上到下，系统定好的，永远按从上到下显示
集合视图
集合视图布局需要一个布局对象，UICollectionViewLayout是布局类，系统为我们提供一种定义好的布局类UICollectionViewFlowLayer(流式布局)是UICollectionViewLayout的子类

AppDelegate.m

#import "AppDelegate.h"
#import "CollectionViewController.h"
#import "MyLayout.h"
@interface AppDelegate ()
@end
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    self.window = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];
    self.window.rootViewController = [[CollectionViewController alloc]initWithCollectionViewLayout:[[MyLayout alloc]init]];
    [self.window makeKeyAndVisible];
    return YES;
}

CollectionViewController.m

#import "CollectionViewController.h"
#import "MyCell.h"
@interface CollectionViewController ()

@end

@implementation CollectionViewController

static NSString * const reuseIdentifier = @"Cell";

- (void)viewDidLoad {
    [super viewDidLoad];
    // Uncomment the following line to preserve selection between presentations
    // self.clearsSelectionOnViewWillAppear = NO;
    // Register cell classes系统自动帮我们注册了
    [self.collectionView registerClass:[MyCell class] forCellWithReuseIdentifier:reuseIdentifier];
     self.collectionView.pagingEnabled = YES;
    // Do any additional setup after loading the view.
}
/*
#pragma mark - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    // Get the new view controller using [segue destinationViewController].
    // Pass the selected object to the new view controller.
}
*/

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {

    return 3;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {

    return 9;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];
    // Configure the cell
    cell.backgroundColor = [UIColor redColor];
    UILabel *label = [cell.contentView viewWithTag:100];
    if(!label){
    label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 80, 80)];
    label.tag = 100;
    label.text = [NSString stringWithFormat:@"%ld",indexPath.item];
    label.font = [UIFont systemFontOfSize:30];
    [cell.contentView addSubview:label];}
    cell.imageView.image = [UIImage imageNamed:@"心动"];
    cell.label.text = [NSString stringWithFormat:@"%ld/%ld",indexPath.item,indexPath.section];
    cell.backgroundImageView.image = [UIImage imageNamed:@"1"];
    return cell;
}

MyLayout.m

@implementation MyLayout
-(instancetype)init{
    if (self = [super init] ) {
        //设置每项大小
        self.itemSize = CGSizeMake(80, 80);
        //设置最小行距
        self.minimumLineSpacing = 10;
        //设置最小项间距
        self.minimumInteritemSpacing = 10;
        //设置 分区中的内边距
        self.sectionInset = UIEdgeInsetsMake(238, 77, 238, 77);
        //设置滚动方向
        self.scrollDirection = UICollectionViewScrollDirectionVertical;
        //设置分区头和分区尾的高度
        //    self.headerReferenceSize = CGSizeMake(0, 50);
        //    self.footerReferenceSize = CGSizeMake(0, 50);
    }
    return self;
}
@end

MyCell.h

@interface MyCell : UICollectionViewCell
@property(nonatomic,strong)UIImageView *backgroundImageView;
@property(nonatomic,strong)UIImageView *imageView;
@property(nonatomic,strong)UILabel *label;
@end

MyCell.m

@implementation MyCell
-(instancetype)initWithFrame:(CGRect)frame{
    if(self = [super initWithFrame:frame]){
        self.imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height - 20)];
        [self.contentView addSubview:self.imageView];
        self.label = [[UILabel alloc]initWithFrame:CGRectMake(0, frame.size.height -20, frame.size.width, 20)];
        self.label.backgroundColor = [UIColor blueColor];
        self.label.textAlignment = NSTextAlignmentCenter;
        self.label.font = [UIFont systemFontOfSize:22];
        self.label.backgroundColor = [UIColor whiteColor];
        [self.contentView addSubview:self.label];
        self.backgroundImageView =[[UIImageView alloc]init];
        self.backgroundView = self.backgroundImageView;
    }
    return self;
}

UICollectionView 布局
AppDelegate.m（创建带导航的控制器）

{
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    self.window = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];
    self.window.rootViewController = [[UINavigationController alloc]initWithRootViewController:[[ViewController alloc]init]];
    [self.window makeKeyAndVisible];
    return YES;
}

ViewController.m

#import "ViewController.h"
#import "MyLayout.h"
#define MAS_SHORTHAND_GLOBALS
#import "Masonry.h"
#import "MyCell.h"
static NSString *const cellId = @"cell";
@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>
@property(nonatomic,strong)UICollectionView*cv;
@end

@implementation ViewController
-(UICollectionView *)cv{
    if(!_cv){
        _cv = [[UICollectionView alloc]initWithFrame:CGRectNull collectionViewLayout:[[MyLayout alloc]init]];
        _cv.dataSource = self;
        _cv.delegate = self;
        //注册cell
        [_cv registerClass:[MyCell class] forCellWithReuseIdentifier:cellId];
        [self.view addSubview:_cv];
        [_cv mas_makeConstraints:^(MASConstraintMaker *make) {
            make.edges.equalTo(0);
            
        }];
    }
    return _cv;
}
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    [self cv];
}
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 1;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 30;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellId forIndexPath:indexPath];
    cell.imageView.image = [UIImage imageNamed:@"timg"];
    cell.label.text = @"这是单元格";
    return cell;
}

MyCell.h

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface MyCell : UICollectionViewCell
@property(nonatomic,strong)UIImageView *imageView;
@property(nonatomic,strong)UILabel *label;
@end

NS_ASSUME_NONNULL_END

MyCell.m

#import "MyCell.h"
#define MAS_SHORTHAND_GLOBALS
#import "Masonry.h"
@implementation MyCell
-(instancetype)initWithFrame:(CGRect)frame{
    if(self = [super initWithFrame:frame]){
        [self imageView];
        [self label];
    }
    return self;
}
- (UIImageView *)imageView{
    if(!_imageView){
        _imageView = [[UIImageView alloc]init];
        [self.contentView addSubview:_imageView];
        [_imageView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.right.top.equalTo(0);
            make.height.equalTo(self.imageView.mas_width);
        }];
    }
    return _imageView;
}
-(UILabel *)label{
    if(!_label){
        _label = [[UILabel alloc]init];
        _label.backgroundColor = [UIColor yellowColor];
        _label.textAlignment = NSTextAlignmentCenter;
        _label.font = [UIFont systemFontOfSize:14];
        [self.contentView addSubview:_label];
        [_label mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.right.bottom.equalTo(0);
            make.top.equalTo(self.imageView.mas_bottom);
        }];
    }
    return _label;
}

MyLayout.m

#import "MyLayout.h"
@implementation MyLayout
-(instancetype)init{
    if (self = [super init] ) {
        CGSize screenSize = [UIScreen mainScreen].bounds.size;
        CGFloat itemWidth = (screenSize.width - 20 *2 -20*2) / 3;
        //设置每项大小
        self.itemSize = CGSizeMake(itemWidth, itemWidth+20);
        //设置最小行距
        self.minimumLineSpacing = 5;
        //设置最小项间距
        self.minimumInteritemSpacing = 20;
        //设置 分区中的内边距
        self.sectionInset = UIEdgeInsetsMake(5, 20, 5, 20);
        //设置滚动方向
        self.scrollDirection = UICollectionViewScrollDirectionVertical;
        //设置分区头和分区尾的高度
        //    self.headerReferenceSize = CGSizeMake(0, 50);
        //    self.footerReferenceSize = CGSizeMake(0, 50);
    }
    return self;
}

UICollectionView集合视图

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读