iOS 开发学习之 User Interface（10）UICollectionView 与 UIStoryBoard 与 Xib

1. UICollectionView

   网格视图，除了提供与UITableView同样的功能显示一组顺序显示的数据，还支持多列的布局。

2. UICollectionView 使用

   
> 设置Controller要遵循的协议：

    UICollectionViewDataSource               // 数据源协议

    UICollectionViewDelegate                   // 数据行为协议

    UICollectionViewDelegateFlowLayout   // 数据流式布局协议

   
> 创建流式布局

    flowLayout = [[UICollectionViewFlowLayout alloc] init]

   
> 设置该布局下滑动方向

    flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical / Horizontal  //
默认是Vertical 在Horizontal时，元素是依次竖向摆放，Vertical时，依次横向摆放

    
> 以布局方式和frame 初始化UICollectionView

     [[UICollectionView alloc] initWithFrame: collectionViewLayout: ]

    
> 设置背景色，纯代码实现时，UICollectionView默认背景色是黑色

     .barckgroundColor

    
> 设置代理

     .dataSource     // 代理 UICollectionViewDataSource

     .delegate         // 代理 UICollectionViewDelegate ，UICollectionViewDelegateFlowLayout

    
> 注册标识单元格UICollectionViewCell，
UICollectionView Cell只能使用定制化的，并且必须注册。

     [collectionView registerNib: forCellWithReuseIdentifier:]

     [collectionView registerClass: forCellWithReuseIdentifier:]

     > 注册标识分区表头／表尾
UICollectionReusableView,创建时要手动设置其class

     [collectionView registerNib: forSupplementaryViewOfKind: withReuseIdentifier: ]

     /* forSupplementaryViewOfKind: 表示是为表头还是表尾注册，参数只有两个可选值：UICollectionElementKindSectionHeader：表头，UICollectionElementKindSectionFooter: 表尾 
*/

     > 协议方法

     - UICollectionViewDataSource

     必须实现：

// 每个分区条数（不是行数）

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

       // 数据绑定cell

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath
*)indexPath;

      其他方法：

// 返回分区数量

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

 
// 数据绑定表头／表尾：必须为其设置尺寸才可显示，注意查看不同scrollDirection下表头的展现

      - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString
*)kind atIndexPath:(NSIndexPath *)indexPath;

    
－ UICollectionViewDelegateFlowLayout

 
// 返回分区表头尺寸

  - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout
referenceSizeForHeaderInSection:(NSInteger)section;

     // 返回分区表尾尺寸

- (CGSize)collectionView:(UICollectionView *)collectionView layout:

(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;

     // 返回每条的尺寸

     - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout
sizeForItemAtIndexPath:(NSIndexPath *)indexPath;

     // 返回每个分区四周的外间距

     - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout
insetForSectionAtIndex:(NSInteger)section

    // 返回每个分区内最小行间距

    - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout
minimumLineSpacingForSectionAtIndex:(NSInteger)section

    // 返回每个分区内条目之间最小内部距离

    - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout
minimumInteritemSpacingForSectionAtIndex:(NSInteger)section

   
－UICollectionViewDelegate

   // 条被选中：注意被选中的背景色，只能自定义selectedBackgroundView，且设置后，不能设置cell的背景色，否则无法看到点击选中效果

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath;

 
// 条被反选

- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath;

——————————————————————————————

1. UIStoryBoard

   动画板。是xib的集合体。

2. UIStoryboardSegue 

    Segue: 继续，过渡。

    负责执行两个视图控制器之间的可视化过渡／切换。并且segue为视图控制器的过渡作准备。它包含了在一个过渡中所需要传递的信息。

    当一个segue 被触发并且过渡还未开始时，当前视图控制器的 

    [currentController prepareForSegue:sender:] 会被调用，所以通过此方法可传递任何数据给即将要显示的视图控制器。数据的传递通过KVC（键值编码）的方式进行。

3. Segue 类型：

    iPhone : push , modal ,custom

    iPad : push , modal , popover ,replace ,custom

    modal 模态转换，视图控制器之间标准切换方式。

    push   在NavigationController中切换视图控制器

4. Segue identifier 

    当在一个页面中有多个segue时，需要为其设置identifier, 在prepareForSegue:sender:中以此判断此segue要过渡到哪个页面。

5. 常用可视化切换：

    > 将当前视图控制器的button类型的控件，与另一视图控制器关联，选择segue类型即可。

    > 将tableview,collection view中 prototype cell 与另一视图控制器关联，选择segue类型，即可完成点击此类型的cell/item即可跳转下一视图。注意仍需实现tableview的行点击事件。

6. 代码方式执行segue的过渡

    [viewcontroller performSegueWithIdentifier: sender:];    

7.  iOS两种自适应布局方式：（修正说明：）

    －AutoLayout(自动布局) + SizeClasses(尺寸类别) 

    －Autoresizing (自动调整尺寸)

     前者 AutoLayout 是从iOS6出现，通过创建视图约束实现自适应，SizeClasses是iOS8 开始出现，用于配合AutoLayout使用，为解决所有（包括iPhone,iPad）iOS设备屏幕尺寸和屏幕旋转时UI的适配。

     后者是早期开发使用的适配界面的方式，现在仍然保留。通过弹簧式调整控件尺寸，使其适应屏幕的尺寸变化。

     苹果官方建议使用AutoLayout。
——————————————————————————————

1. Interface Builder (IB)

   界面创建工具，苹果平台下用于设计用户界面的应用程序。在XCode中间编辑区域及右侧属性，库区域都属于IB.

   在此工具上，iOS的可视化编程界面分两种：Xib 和 Storyboard(动画板). 

   都用于实现可视化编程,在其上可拖曳控件。是一个基于xml的描述文件。

   二者区别：前者是对应一个视图控制器，后者是包含多个视图控制器。

   在一个工程里，若使用Xib可视化，那么就需要多个Xib文件；若使用Storyboard则只需要一个主Storyboard 文件即可（也可有多个Storyboard），采用Storyboard管理界面比较方便，可描述界面之间的导航关系。

   两种运行结果是一样的。

   在视图控制器生命周期中，Xib在loadView之前生成。

   也有叫做“nib”[二进制形式]，iOS3.0之前的叫法。

   Storyboard是从iOS5.0开始出现的。目前两种方式是并存使用。对于同一个项目一般不建议完全混合使用。推荐使用Storyboard。

   

2. Xib／Storyboard 进行可视化编程   

   拖曳控件，并创建控件与代码文件的关联。

   三种关联方式。

3. Xib/ Storyboard 界面自适应布局

    iOS中自适应布局分两种方式：SizeClass和AutoLayout。后者是iOS6开始出现。

    前者是基于尺寸的，后者是基于控件之间的约束关系（相对位置）。

    目前较为广泛使用的是后者。推荐使用。

4. Storyboard下界面跳转（后续课程讲解）

    

5. 使用Xib/Storyboard，学习其它UI控件

    UISegmentControl （分段控件）

   UISlider （滑动条）

   UISwitch （开关）

   ActivityIndicatorView （活动指示器）

   UIProgressView （进度条）

   UIStepper （步进器）

   UIAlertView （警告视图）8.0弃用

   UIActionSheet （操作表单）8.0弃用

   UITextView (多行文本视图)

   UIAlertController （警告控制器） 8.0后代替 UIAlertView ,UIActionSheet

   //UIWebView （网页视图）