笔记:通过storyboard来创建UICollectionView

说明

前段时间已经学会UICollectionView的简单使用,过了一段时间,今天再次使用时,突然懵逼了,感觉什么都不会了……
于是我又把这部分知识重新过了一遍,为了防止再次在这个地方懵逼,决定还是给他记下来……

通过storyboard方式使用UICollectionView

  1. 将UICollectionView控件拖入Interface Builder对应位置并布局(为了方便查看,这里设置了UICollectionView的背景颜色为灰色)
    拖入UICollectionView控件并布局
  2. 在UICollectionView中布局一个Cell(为了方便查看,这里设置了Cell的背景颜色为粉红色)
    布局一个Cell
  3. 在Cell中布局各种其他控件(这里演示布局了两个Label)
    在Cell中布局各种控件
  4. 在Controller中通过@IBOutlet引用这个UICollectionView
    在代码中通过@IBOutlet关联UICollectionView
  5. 将第3步中在Cell内布局的各个控件进行绑定(两种绑定方式)(我第3步是在Cell内部布局了两个Label)
    5.1 第一种绑定方式:通过Tag方式进行绑定(这里分别为两个Label设置不同的Tag(tag要保持唯一性))
    通过Tag方式进行绑定
    5.2 第二种绑定方式:通过关联一个继承自UICollectionViewCell的类进行绑定
    5.2.1 编写一个类MyCell继承自UICollectionViewCell
    MyCell类
    5.2.2 在Interface Builder中将这个粉红色的Cell的Class设置为MyCell
    设置Cell的Class
    5.2.3 将两个Label通过@IBOutlet引用到MyCell类中
    引用Cell中的控件
  6. 实现UICollectionViewDataSource的协议
    6.1 建立委托
    建立委托代码
    6.2 重写必须的协议方法(可以直接让Controller继承(遵守)UICollectionViewDataSource协议,也可以通过扩展的方式来遵守UICollectionViewDataSource协议)(这里报了个错误,因为函数没有返回值,具体代码在后面编写)
    两个协议方法
  7. 编写协议方法,这里其中要求返回值类型为Int的函数返回的是运行时Cell的个数,另一个返回UICollectionViewCell对象的函数是运行时对Cell进行设置的函数。其中设置Cell的函数根据第5步不同的绑定方式,内容有所不同。
    7.1 为Cell设置identifier,在Interface Builder中设置,如图:
    可视化方式设置Cell的Identifier
    注:为Cell设置Identifier还可以从代码中设置,这里主要写的是storyboard方式,代码方式在纯代码创建UICollectionView部分使用。

7.2 完善那个因没有返回值而报错的协议方法。这个方法内部通常写法是:通过传入参数collectionView调用dequeueReusableCell方法来获取一个对应indexPath的cell,然后获取这个cell中的各个子控件(这些控件是用户在第3步中添加的(第3步做的事情是在Cell中布局了两个Label)),再对这些子控件进行相应的设置,最后返回cell。
7.2.1 如果在第5步中使用5.1中通过Tag方式绑定的Cell内部控件,那么代码这么写:
Tag方式下的代理方法
7.2.2 如果在第5步中使用5.2中通过自己编写的MyCell类方式来绑定,那么代码这么写:
绑定类方式的代理方法

注意:可以看出,这两种方式下的代码区别在于获取cell中子控件的方式不同。通过Tag方式绑定Cell子控件的话,在通过传入参数collectionView调用dequeueReusableCell方法来获取一个对应indexPath的cell时,可以不用as!语句进行类型强转,获取cell中的子控件通过cell的方法viewWithTag来实现。而通过MyCell类来绑定Cell子控件的方式,在通过传入参数collectionView调用dequeueReusableCell方法来获取一个对应indexPath的cell时,必须通过as!语句进行类型强转,才能获得MyCell对应的cell对象,而通过这种方式获取的cell对象,因为属于MyCell类,而MyCell类又采用@IBOutlet绑定了子控件,所以可以直接使用.方法点出子控件并进行设置。
8. 运行效果:
storyboard方式下的运行效果

发布了23 篇原创文章 · 获赞 1 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/shenjie_xsj/article/details/79679760
今日推荐