iOS UI学习之路05 - 滚动视图

UIScrollView

UIScrollView基本概念以及特性

UIScrollView是一个视图，可以滚动，可以显示很多内容，比如常见的照片浏览，可以上下滚动的新闻列表

通过UIScrollView可以实现放大或者缩小

UIScrollView的父类是UIView，子类有：UITextView、UITableView、UICollectionView

UIScrollView创建同UIView一样

fram.size是UIScrollView显示的尺寸，contentSize是内容的尺寸（可以无限大）

常用属性

contentSize    滚动视图的内容尺寸

delegate    代理对象

showsHorizontalScrollIndicator    是否显示水平方向的滚动条

showsVerticalScrollIndicator    是否显示垂直方向的滚动条

pagingEnabled    开启分页效果

bounces    是否有缓冲效果

scrollEnabled    是否可以滚动

contentOffset    偏移量：x或者y方向的内容起点距离ScrollView左边或者顶部的偏移像数

minimumZoomScale    最小缩放倍数

maximumZoomScale    最大缩放倍数

常用方法

视图将要进入拖动    -(void) scrollViewWillBeginDragging:

视图已经滚动    scrollViewDidScroll:

视图将要结束滚动    scrollViewWillEndDragging: withVelocity: targetContentOffset:

视图已经结束拖动    scrollViewDidEndDragging: willDecelerate:

视图将要进入减速    scrollViewWillBeginDecelerating:

视图已经结束减速    scrollViewDidEndDecelerating:

返回放大后UIScrollView里面的子视图    viewForZoomingInScrollview:

UITableView 表视图

表视图基本概念

特性

UITableView有两种风格：UITableViewStylePlain(平铺)和UITableViewStyleGrouped(分组)

UITableView中只有行的概念，没有列的概念

UITableView中每一行就是一个UITableViewCell（单元格）

表视图由：头视图、单元格（组头、行、组尾）、分割线 组成

NSIndexPath 路径索引

UITableView使用NSIndexPath表示每个单元格的位置

section:    单元格所在组索引

row:    单元格所在组中的行索引

表视图的创建

UITableView *tableView = [[UITableView alloc] initWithFrame: CGRectMake(0,20,320,548) style: UITableViewStylePliain];

[self.view addSubViews: tableView];

常用属性

dataSource    数据源委托属性

delegate    代理属性

tableHeaderView    表视图的头视图    类型为UIView

tableFooterView    表视图的尾视图    类型为UIView

allowsMultipleSelectionDuringEditing    设置编辑状态时是多选/移动 还是添加/删除/移动

separatorColor    分割线的颜色

separotarStyle    分割线的样式

rowHeight    单元格的高度，默认为44，也可以通过协议方法设置

indexPathForSelectedRows    类型NSArray<NSIndexPath *> *， 被选中的单元格的IndexPath

常用方法

reloadData    刷新表视图

visibleCells    获取当前已经显示的视图

CellForRowAtIndexPath    获取单元格通过indexPath

ScrollToRowAtIndexPath:    atScrollPosition: animated:    滚动指定的单元格

UITableViewDataSource 委托方法

必要实现

tableView: namberOfRowsInSection:    指定需要创建的单元格个数

tableView: cellForRowAtIndexPath:    创建需要显示的单元格，当需要创建一个单元格时，则调用一次

可选实现

numberOfSectionsInTableView:    设置表视图的组数

tableView: titleForHeaderInSection:    每一组的头视图的标题

tableView: titleForFooterInSection:    每一组的尾视图的标题

UITableViewDelegate 委托方法

tableView: heightForRowAtIndexPath:    设置单元格高度

tableView: heightForHeaderInSection:    设置组的头高度

tableView: heightForFooterInSection:    设置组的尾高度

tableView: viewForHeaderInSection:    设置组的头视图

tableView: viewForFooterInSection:    设置组的尾视图

tableView: didSelectRowAtIndexPath:    单元格被选中后执行

以下为编辑TableView时常用到的委托方法

tableView: editingStyleForRowAtIndexPath:    根据indexPath设置单元格编辑状态时的样式（添加/删除）

tableView: commitEditingStyle: forRowAtIndexPath:    当点击单元格左侧（添加/删除）按钮时调用。commitEditingStyle: 后面的参数表示，当前点击时是添加/删除。

tableView: canMoveRowAtIndexPath:    根据indexPath设置单元格编辑状态时是否可以移动，同"10."的方法成对出现，否则移动按钮不显示

tableView: moveRowAtIndexPath: toIndexPath: 当拖动一个单元格在另一个单元格上松开时调用。提供的参数：tableView 当前视图    sourceIndexPath    源单元格    destinationIndexPath    目标单元格

添加/删除单元格

编辑UITableView时，当UITableView的数据有添加或减少，相应的数据源也要做相应的改变

删除

[tableView: beginUpdates];

[tableView: deleteRowsAtIndexPaths:@[indexPath] withRowsAmimation:……];

[tableView: endUpdates];

添加

insertRowsAtIndexPaths: withRowAnimation:

经验

分割线让其居左顶格

先在tableView加载时设置

separtorInset = UIEdgeInsetsZero;

tablView.layoutMargins = UIEdgeInsetsZero;

然后在cell加载时设置

cell.separatorInset = UIEdgeInsetsZero;

开发项目时要注意方法的版本问题，不符合时需要做判断

重用机制

-(UITableViewCell *) tableView: (UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

    NSString *identifier = @"cell";    //定义标识符

    //在复用池中查询是否有可用的单元格

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier: identifier];

    if(cell = nil){//创建单元格

        cell = [[UITableViewCell alloc] initWithStyle: UITableViewCellStyleDefault reuseIdentifier: identifier];

}

//设置cell

return cell;

}

自定义UITableViewCell

第一种方式

创建一个继承了UITableViewCell的类TableViewCell1

设置TableViewCell1的一些属性

在ViewController类中直接用TableViewCell1来创建对象

第二种方式

在TableViewCell2.xib文件中设计布局，设计好后关联到TableViewCell2类中

在ViewController类中实现创建行这个委托方法时：

-(UITableViewCell *)tableView: (UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

    static string *identifier = @"cell2";

    TableViewCell2 *cell2 = [tableView dequeReusableCellWithIdentifier: identifier];

    if(!cell2){

        //xib文件中可以添加多个UITableViewCell

NSArray *array = [[NSBundle mainBundle] loadNibNamed:@"TableViewCell2" owner:nil option:nil];

        cell2 = (UITableViewCell2 *)[array lastObject];

        UINib *nib = [UINib nibWithNibName:@"TableViewCell2" bundle:nil];

        [tableView registerNib:nib forHeaderFooterViewReuseIdentifier:identifier];

}

//设置cell2

return cell2;

}

注意

xib文件和控制器要关联好

在xib中设置的高度，只会在xib中显示，但要设置tableView的行高，要么通过tableView.rowHeight设置，要么通过委托方法。

第三种方式

在storyboard中添加一个UITableViewCell，可为自定义也可为系统，然后设计布局，添加控制元素

在ViewController类中实现创建行这个委托方法时：

-(UITableViewCell *)tableView: (UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

    static string *identifier = @"cell3";

    TableViewCell3 *cell3 = [tableView dequeReusable……forIndexPath:indexPath];

//设置cell3

return cell3;

}

注意

系统的TableViewCell在加载storyboard时，已经自动注册了，自定义的TableViewCell则需要手动注册nib/class复用。前者和后者都要设置标识符。

UICollectionView 块滚动视图

概念和特性

布局同UITableView不同，呈现的是一个个方块区域，平铺而成

属性、方法、创建方式都与UITableView相似

常用属性

scrollPirection    collectionView的滑动方向

itemSize    设置item的大小来显示item

minimumInterItemSpacing    设置列间距

minimumLineSpacing    设置水平间距

自定义UICollectionViewCell

同UITableViewCell类似