IOS UI初级-表视图的使用

1、UITableView的风格

表视图存在两种显示风格，UITableViewStylePlain, UITableViewStyleGroup

创建表视图

    // 创建表视图
    UITableView *tableView = [[ UITableView alloc ] initWithFrame : self . view . bounds ];
    tableView. backgroundColor = [ UIColor redColor ];
    [ self . view addSubview :tableView];
   
    [tableView release ];
    // 以代理的方式设置数据源，显示什么数据由代理对象来定

    tableView.dataSource = self;

以下两个数据源方法必须强制实现

#pragma mark ----UITableViewDataSource
// 当前显示的数据有多少个
- ( NSInteger )tableView:( UITableView *)tableView numberOfRowsInSection:( NSInteger )section
{
    // 返回的是数组中的所有元素的个数
    return array . count ;
}


// 返回的每一个数据对应的单元格对象
- ( UITableViewCell *)tableView:( UITableView *)tableView cellForRowAtIndexPath:( NSIndexPath *)indexPath
{
  
 
    // 初始化一个单元格对象
    UITableViewCell *tableViewCell = [[[ UITableViewCell alloc ] initWithStyle : UITableViewCellStyleDefault reuseIdentifier : nil ] autorelease ];
    // 通过 indexPath 拿到构建单元格的行的下标
    NSLog ( @"section----%ld,row-----%ld" ,indexPath. section , indexPath. row );
    tableViewCell. textLabel . text = array [indexPath. row ] ;
    tableViewCell. textLabel . font = [ UIFont fontWithName :[ array objectAtIndex :indexPath. row ] size : 20 ];
   
    return tableViewCell;
   
   

}

2.索引路径

NSIndexPath

①一个IndexPath可以代表一个cell位置

②section表示组索引值

③row表示单元格在组中的行索引值

3.表视图的结构

表视图由：头视图、单元格、尾视图三部分组成

4.表视图调用顺序-委托方法

// 设置数据源
    tableV. dataSource = self ;
    // 处理数据
    // 获取文件路径
//    NSString *pathStr = [[NSBundle mainBundle] pathForResource:@"font" ofType:@"plist"];
    // 拿到 bundle 的源路径
    NSString *bundlePath = [[ NSBundle mainBundle ] resourcePath ];
    NSString *filePath = [bundlePath stringByAppendingPathComponent : @"font.plist" ];
   
    // 根据一个文件的路径返回数组

    self.data = [NSArray arrayWithContentsOfFile:filePath];

#pragma mark ----- UITableViewDataSource
// 当前有多少组
- ( NSInteger )numberOfSectionsInTableView:( UITableView *)tableView
{
    return self . data . count ;

}

// 当前每一组显示的数据有多少个
- ( NSInteger )tableView:( UITableView *)tableView numberOfRowsInSection:( NSInteger )section
{
    // 先拿到第 section 个小组
    NSArray *arr = self . data [section];
    return arr. count ;
}

// 返回每一个数据对应的单元格对象
- ( UITableViewCell *)tableView:( UITableView *)tableView cellForRowAtIndexPath:( NSIndexPath *)indexPath
{
    // 初始化单元格对象
    UITableViewCell *cell = [[ UITableViewCell alloc ] initWithStyle : UITableViewCellStyleDefault reuseIdentifier : nil ];
    // 先取到组
    NSArray *arrSection = self . data [indexPath. section ];
    // 再取到组中的元素
    NSString *cellStr = arrSection[indexPath. row ];
    cell. textLabel . text = cellStr;
    cell. textLabel . font = [ UIFont fontWithName :cellStr size : 20 ];
    return cell;
}

// 返回每一组的头视图名称
- ( NSString *)tableView:( UITableView *)tableView titleForHeaderInSection:( NSInteger )section
{
   
    return [ NSString stringWithFormat : @" 第 %ld 组 " ,section];
}
// 返回每一组的尾视图名称
- ( NSString *)tableView:( UITableView *)tableView titleForFooterInSection:( NSInteger )section
{
    return [ NSString stringWithFormat : @" 第 %ld 组 " ,section];

}

#pragma mark---UITableViewDelegate
// 设置单元格的高度
- ( CGFloat )tableView:( UITableView *)tableView heightForRowAtIndexPath:( NSIndexPath *)indexPath
{
    if (indexPath. row == 0 ) {
        return 100 ;
    } else if (indexPath. row == 1 ){
        return 200 ;
    }
    return 44 ;
}

// 自定义 section 头部、尾部视图，注意：需要指定高度
- ( UIView *)tableView:( UITableView *)tableView viewForFooterInSection:( NSInteger )section
{
    UIImageView *imageView = [[ UIImageView alloc ] initWithFrame : CGRectMake ( 0 , 0 , 100 , 200 )];
    imageView. backgroundColor = [ UIColor redColor ];
    return imageView;
}
- ( UIView *)tableView:( UITableView *)tableView viewForHeaderInSection:( NSInteger )section
{
    UIImageView *imageView = [[ UIImageView alloc ] initWithFrame : CGRectMake ( 0 , 0 , 100 , 200 )];
    imageView. backgroundColor = [ UIColor redColor ];
    return imageView;

}

5.表视图常用属性和方法

//tableView 的偏移量
    _tableView . contentInset = UIEdgeInsetsMake ( 20 , 0 , 0 , 0 );
    // 设置表视图分割线风格
    // 没有分割线
//    _tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    // 设置分割线的颜色，默认为标准灰色
    _tableView . separatorColor = [ UIColor redColor ];
    // 设置分割线的偏移量，左边的失效，只有右边的可以使用
    _tableView . separatorInset = UIEdgeInsetsMake ( 0 , - 100 , 0 , 10 );
    // 设置表视图的头部视图
    UIView *headView = [[ UIView alloc ] initWithFrame : CGRectMake ( 0 , 0 , 0 , 160 )];
    headView. backgroundColor = [ UIColor greenColor ];
    _tableView . tableHeaderView = headView;

   

    // 设置尾部视图
    UIView *footView = [[ UIView alloc ] initWithFrame : CGRectMake ( 0 , 0 , 0 , 100 )];
    footView. backgroundColor = [ UIColor blackColor ];
    _tableView . tableFooterView = footView;
   
//    // 设置单元格的行高 默认是 44 如果需要动态的设置 需要在代理方法中实现

//    _tableView.rowHeight = 100;

// 删除第一个元素
    [ self . data removeObjectAtIndex : 0 ];
    // 刷新表视图，重新执行数据源方法和代理方法
    [ _tableView reloadData ];
   
    // 更改第二个单元格的内容
    // 构建 IndexPath
    NSIndexPath *indexPath = [ NSIndexPath indexPathForRow : 2 inSection : 0 ];
    // 取到第二个单元格
    UITableViewCell *cell = [ self . tableView cellForRowAtIndexPath :indexPath];
    cell. textLabel . text = @"haha" ;
   
    // 输出屏幕上显示的单元格内容
    NSArray *arr = [ self . tableView visibleCells ];
    // 遍历数组
    for ( UITableViewCell *cell in arr) {
        NSLog ( @"%@" , cell. textLabel . text );

    }

// 输出在屏幕上显示的单元格的下标
    NSArray *arr = [ self . tableView indexPathsForVisibleRows ];
    for ( NSIndexPath *indexPath in arr) {
        NSLog ( @"%ld" , indexPath. row );
    }
   
    // 滑动到指定位置，可以配置动画
    NSIndexPath *indexPath = [ NSIndexPath indexPathForRow : 30 inSection : 0 ];

    [self.tableView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionTop animated:YES];

6.单元格的复用（以后都要用这种状态）

- ( UITableViewCell *)tableView:( UITableView *)tableView cellForRowAtIndexPath:( NSIndexPath *)indexPath
{
    // 创建 identifier
    NSString *identifier = @"Cell" ;

    NSLog ( @"%ld" , indexPath. row );
    // 从复用池中取复用单元格
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier :identifier];
    NSLog ( @"%@" ,cell);
    if (cell == nil ) {
       
        // 如果复用池没有可用的复用单元格，那就创建单元格
        cell = [[[ UITableViewCell alloc ] initWithStyle : UITableViewCellStyleDefault reuseIdentifier :identifier] autorelease ];
    }
    // 无论是新创建的还是从复用池中取的 所显示的内容都是数据源中的内容
    // 如果将下边这句话写到 if 语句的大括号中，那么显示的内容就是放到复用池中的单元格的显示的内容
    cell. textLabel . text = self . data [indexPath. row ];
    return cell;
}

第二种方式

//    注册一个单元格

    [tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"Cell"];

- ( UITableViewCell *)tableView:( UITableView *)tableView cellForRowAtIndexPath:( NSIndexPath *)indexPath
{
    NSString *identifier = @"Cell" ;
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier :identifier forIndexPath :indexPath];
    cell. textLabel . text = self . data [indexPath. row ];
    return cell;

}

第三种方式

//用storyBoard创建一个复用单元格

7、单元格常用属性

// 设置背景颜色
        cell. backgroundColor = [ UIColor clearColor ];
        // 设置背景图片
        cell. backgroundView = [[ UIImageView alloc ] initWithImage :[ UIImage imageNamed : @"tableCell_common.png" ]];
        // 设置选中后的背景图片
        cell. selectedBackgroundView = [[ UIImageView alloc ] initWithImage :[ UIImage imageNamed : @"tableCell_common_tapped.png" ]];
        // 设置高亮状态下，文字显示的颜色
        cell. textLabel . highlightedTextColor = [ UIColor redColor ];
        // 设置辅助视图
//        cell.accessoryType = UITableViewCellAccessoryCheckmark;
        // 设置选中的样式

//        cell.selectionStyle = UITableViewCellSelectionStyleNone;

compare是系统排序的方法

  // 排序 ----compare 是系统排序的方法

    _keys = [_keys sortedArrayUsingSelector:@selector(compare:)];

// 右边组索引

- ( NSArray *)sectionIndexTitlesForTableView:( UITableView *)tableView
{
    return _keys ;
}

// 点击组索引后发出的协议方法
- ( NSInteger )tableView:( UITableView *)tableView sectionForSectionIndexTitle:( NSString *)title atIndex:( NSInteger )index
{
    return index;

}

   // 设置组索引
    tableView. sectionIndexColor = [ UIColor redColor ];
    // 设置组索引的背景颜色
    tableView. sectionIndexBackgroundColor = [ UIColor grayColor ];
    // 设置组索引点击后的颜色

    tableView.sectionIndexTrackingBackgroundColor = [UIColor greenColor];