iOS初学者超级头疼的CollectionView学习

最新推荐文章于 2024-02-02 19:26:07 发布

干掉ios

最新推荐文章于 2024-02-02 19:26:07 发布

阅读量1.4k

点赞数

分类专栏： iOS学习文章标签： collectionView headerView collectionViewCell

本文链接：https://blog.csdn.net/u011189158/article/details/43196717

版权

iOS学习专栏收录该内容

44 篇文章 0 订阅

订阅专栏

一、UICollectionView的介绍

UICollectionView和UITableView很像，但是，UITableView有系统自带的常用UITableViewCell，但是，UICollectionView只能自定义UICollectionViewCell，这点比较坑，给不会自定义Cell的人学起来制造了很头疼的问题，以至于越学越乱，搞不懂怎么一回事。

UICollectionView可以用来做瀑布流等效果，下面，就以我的项目为例，为大家介绍UICollectionView的学习。

效果图：

二、创建UICollectionView

创建UICollectionView，要注意先创建UICollectionViewFlowLayout，它是UICollectionView的子类，决定了你的UICollectionView会是什么样子的。

代码如下：

//布局
    mFlowLayout = [[UICollectionViewFlowLayout alloc]init];
    mFlowLayout.minimumInteritemSpacing = kSpace;//用于控制单元格之间最小 列间距
    mFlowLayout.minimumLineSpacing = kSpace;//用于控制单元格之间最小 行间距
    mFlowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
    mFlowLayout.itemSize = CGSizeMake(kImgWidth, kImgHeight);//设置单元格的宽和高
    mFlowLayout.sectionInset = UIEdgeInsetsMake(kSpace, kSpace, kSpace, kSpace);//各分区上下左右空白区域大小
    mFlowLayout.headerReferenceSize = CGSizeMake(kTopImgWidth, kTopImgHeight);//设置头部View的宽、高
//    mFlowLayout.footerReferenceSize = CGSizeMake(kScreenWidth, kScreenHeight);//设置尾部View的宽、高
    
    mCollectionView = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:mFlowLayout];
    //注册：告诉系统哪个类创建重用标识，标识是什么，创建什么类型的cell
    [mCollectionView registerClass:[MyCollectionCell class] forCellWithReuseIdentifier:@"mCell"];
    [mCollectionView registerClass:[MyCollectionCell class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headView"];
    mCollectionView.dataSource = self;
    mCollectionView.delegate = self;
    mCollectionView.backgroundColor = [UIColor whiteColor];／／默认是黑色
    [self.view addSubview:mCollectionView];

注意：由于头部视图和尾部视图用法一样的，所以只介绍头部视图的使用。

注意：记得加上<UICollectionViewDataSource,UICollectionViewDelegate>

三、实现UICollectionViewDataSource协议中的方法

1.必须实现的方法

#pragma mark 返回值决定UICollectionView包含多少个单元格
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    
    return 10;
   
}

#pragma mark 返回值决定各单元格的控件
- (UICollectionViewCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    static NSInteger mflag = 1;
    
    <span style="color:#ff0000;">MyCollectionCell</span> *mCell = [mCollectionView <span style="color:#3366ff;">dequeueReusableCellWithReuseIdentifier:@"mCell" forIndexPath:indexPath</span>];
    mCell.mIllustration = [lists objectAtIndex:indexPath.row];
    [mCell.mImgView setImageWithURL:[NSURL URLWithString:mCell.mIllustration.mlittleImg]];
    mflag ++;
    return mCell;
}

注意：红色部分是自定义的UICollectionCell，这点将在后面介绍。

2.可选则实现的方法

／／分区数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 2;
}

这个方法的返回值决定了共有几个分区，如果不实现的话，默认是一个分区。这一点和UITableView一样的。

四、如何自定义UICollectionViewCell

如何新建一个文件就不说了，项目右键－》new File...－》iOS－》Source－》Cocoa Class

然后记得：

之后，就可以自定义UICollectionViewCell了。代码如下：

MyCollectionCell.h文件

#import <UIKit/UIKit.h>
#import "Illustration.h"

@interface MyCollectionCell : UICollectionViewCell

@property(nonatomic)UIImageView *mImgView;／／一张图片
@property(nonatomic)Illustration *mIllustration;／／附加一个实体类，这个实体类根据个人需要添加

@end

<span style="font-family: Menlo; font-size: 14px;">MyCollectionCell.m文件</span>

#import "MyCollectionCell.h"

#define kViewWith self.frame.size.width //contentView的宽
#define kViewHeight self.frame.size.height //contentView的高

@implementation MyCollectionCell

@synthesize mImgView,mIllustration;
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        <span style="color:#ff0000;">self.mImgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, kViewWith , kViewHeight) ];
        [self.contentView addSubview:self.mImgView];</span>
    }
    return self;
}
<pre name="code" class="objc">

@end

这样就定义了一个只有一张图片的Cell。

三、实现UICollectionViewDelegate协议中的方法

先说点击事件（手势）吧。代码如下：

#pragma mark collectionView的点击事件（代理方法）
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    Illustration *c = [lists objectAtIndex:indexPath.row];
    //页面跳转
    [self mpushToDetail:c];
}
#pragma mark 内部自定义方法，传递参数并实现页面跳转，用在点击事件和手势里
- (void)mpushToDetail:(Illustration*)illustration{
    
    UIStoryboard *sb = [UIStoryboard storyboardWithName:@"Main" bundle:nil];
    FirstDetailViewController *detail = [sb instantiateViewControllerWithIdentifier:@"FirstDetailViewController"];
    
    detail.currentIll = illustration;//页面间属性传值
    detail.title = illustration.mtitle;//为子页面添加标题title
    
    self.tabBarController.tabBar.hidden = YES;
    [self.navigationController pushViewController:detail animated:YES];//跳转
}

在这个方法里，实现点击每个Cell想要做的事情。indexPath有两个值，section和row，这点也和UITableView一样的。

还有些方法，选择性实现，看个人需求。headerView和footerView的方法也在这里面。

如何实现headerView？？

</pre><p style="margin-top: 0px; margin-bottom: 0px; font-size: 14px; font-family: Menlo; color: rgb(119, 121, 151);">#pragma mark <span style="font-family: 'Heiti SC Light';">设置</span>HeadView</p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 14px; font-family: Menlo;">- (<span style="color: #c35900">UICollectionReusableView</span> *)collectionView:(<span style="color: #c35900">UICollectionView</span> *)collectionView viewForSupplementaryElementOfKind:(<span style="color: #c35900">NSString</span> *)kind atIndexPath:(<span style="color: #c35900">NSIndexPath</span> *)indexPath</p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 14px; font-family: Menlo;">{</p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 14px; font-family: Menlo;">    <span style="color: #c35900">MyHeaderView</span> *header;</p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 14px; font-family: Menlo; color: rgb(88, 126, 168);"><span style="color: #000000">    </span><span style="color: #35568a">if</span><span style="color: #000000"> (kind == </span>UICollectionElementKindSectionHeader<span style="color: #000000">) {</span></p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 14px; font-family: Menlo; min-height: 16px;">        </p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 14px; font-family: Menlo; color: rgb(88, 126, 168);"><span style="color: #000000">        header = [</span>mCollectionView<span style="color: #000000"> </span>dequeueReusableSupplementaryViewOfKind<span style="color: #000000">:kind </span>withReuseIdentifier<span style="color: #000000">:</span><span style="color: #e82300">@"headView"</span><span style="color: #000000"> </span>forIndexPath<span style="color: #000000">:indexPath];</span><span style="color: #cf8724">//</span><span style="font-family: 'Heiti SC Light'; color: rgb(207, 135, 36);">需要</span><span style="color: #cf8724">zhuce</span></p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 14px; font-family: Menlo; color: rgb(88, 126, 168);"><span style="color: #000000">        header.</span>mIllustration<span style="color: #000000"> = [</span>tops<span style="color: #000000"> </span>objectAtIndex<span style="color: #000000">:</span><span style="color: #35568a">0</span><span style="color: #000000">];</span></p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 14px; font-family: Menlo; color: rgb(88, 126, 168);"><span style="color: #000000">        [header.</span>mImgView<span style="color: #000000"> </span>setImageWithURL<span style="color: #000000">:[</span><span style="color: #c35900">NSURL</span><span style="color: #000000"> </span>URLWithString<span style="color: #000000">:header.</span>mIllustration<span style="color: #000000">.</span>mlittleImg<span style="color: #000000">]];</span></p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 14px; font-family: Menlo; color: rgb(207, 135, 36);"><span style="color: #000000">        </span>//<span style="font-family: 'Heiti SC Light';">为</span>headerView<span style="font-family: 'Heiti SC Light';">加手势</span></p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 14px; font-family: Menlo; color: rgb(195, 89, 0);"><span style="color: #000000">        </span>UITapGestureRecognizer<span style="color: #000000"> *Unmanage = [[</span>UITapGestureRecognizer<span style="color: #000000"> </span><span style="color: #587ea8">alloc</span><span style="color: #000000">]</span></p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 14px; font-family: Menlo;">                                            <span style="color: #587ea8">initWithTarget</span>:<span style="color: #35568a">self</span></p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 14px; font-family: Menlo;">                                            <span style="color: #587ea8">action</span>:<span style="color: #35568a">@selector</span>(headViewClick:)];</p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 14px; font-family: Menlo;">        [header <span style="color: #587ea8">addGestureRecognizer</span>:Unmanage];</p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 14px; font-family: Menlo;">    }</p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 14px; font-family: Menlo;">    <span style="color: #35568a">return</span> header;</p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 14px; font-family: Menlo;">}</p><pre name="code" class="objc"><pre name="code" class="objc">#pragma mark HeaderView的手势
-(void)headViewClick:(UITapGestureRecognizer *)sender{
    MyCollectionCell *c = (MyCollectionCell*)sender.view;
    //页面跳转
    [self mpushToDetail:c.mIllustration];
}

红色部分是刚开始创建UICollectionView时注册的，搞不懂的回去找找。

如何自定义MyHeaderView呢？

代码如下：

#import <UIKit/UIKit.h>
#import "Illustration.h"

@interface MyHeaderView : UICollectionReusableView

@property(nonatomic)UIImageView *mImgView;
@property(nonatomic)Illustration *mIllustration;


@end

#import "MyHeaderView.h"

#define kViewWith self.frame.size.width //contentView的宽
#define kViewHeight self.frame.size.height //contentView的高

@implementation MyHeaderView

@synthesize mImgView,mIllustration;
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.mImgView = [[UIImageView alloc] initWithFrame:CGRectMake(3, 3, kViewWith-6, kViewHeight-3) ];
        [self addSubview:self.mImgView];
    }
    return self;
}

@end

至此，就结束了。想想，也就这么多东西。多研究研究就慢慢懂了。

关注我：http://blog.csdn.net/u011189158/