简单描述UITableView

作者: 我与太阳肩并肩 | 来源:发表于2016-08-20 15:04 被阅读132次
  • 在iOS开发中UITableView可以说是使用最广泛的控件,我们平时使用的软件中到处都可以看到它的影子,类似于微信、QQ、新浪微博等软件都有用到UITableView。

UITableView的创建

  #import "ViewController.h"
  // 定义一个宏作为cell的重用池
  #define kTableViewCellReuse @"reuse"
  @interface ViewController ()<UITableViewDelegate, UITableViewDataSource> // tableView的两个协议
  @end
  @implementation ViewController
  - (void)viewDidLoad {
        [super viewDidLoad];
        //  创建tableView, 并让其与屏幕大小一样
        UITableView *tableView = [[UITableView alloc] initWithFrame:[UIScreen mainScreen].bounds style:UITableViewStyleGrouped];
        [self.view addSubview:tableView];
        tableView.delegate = self;
        tableView.dataSource = self;
        // 注册tableViewCell
        [tableView registerClass:[UITableViewCell class]   forCellReuseIdentifier:kTableViewCellReuse];
  }
  #pragma mark - tableView的dataSource协议
  // 使其具有五个分区
  - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
        return 5;
  }
  // 每个分区里面含有五个cell
  - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
      return 5;
  }
  // 在这个协议方法里面给cell赋值
  - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
      UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kTableViewCellReuse];
      cell.textLabel.text = @"这是一个cell";
      return cell;
  }

tableView的创建需要设置两个参数, 一个是frame, 我们就不多说了, 还有一个是style, 这个style是个枚举, 它总共有两种style, 如下所示。

typedef NS_ENUM(NSInteger, UITableViewStyle) {
    UITableViewStylePlain,          // regular table view
    UITableViewStyleGrouped         // preferences style table view
};

下面两张图分别表示了UITableViewStylePlain和UITableViewStyleGrouped的显示样式

UITableViewStylePlain.png UITableViewStyleGrouped.png

UITableView的头视图和尾视图

     // 创建头视图View
    UIView *headView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 100)];
    headView.backgroundColor = [UIColor redColor];
    // 创建尾视图View
    UIView *footView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 100)];
    // 将两个View分别放在头视图和尾视图上
    tableView.tableHeaderView = headView;
    tableView.tableFooterView = footView;

效果图如图所示, 一般我们都是在头视图上添加轮播图等...

红色部分即为tableView的头视图 如图的蓝绿色即为tableView的尾视图

UITableViewCellStyle

  • UITableView中每行数据都是一个UITableViewCell,在这个控件中为了显示更多的信息,iOS已经在其内部设置好了多个子控件以供开发者使用。
  • 如果我们查看UITableViewCell的头文件就可以发现在其内部有一个UIView控件(contentView,作为其他元素的父视图)、两个UILable控件(textLabel、detailTextLabel)、一个UIImage控件(imageView),分别用于容器、显示内容、详情和图片。
  • 这些控件不一定要使用, 因为我们可以自定义tableViewCell来实现一些系统做不了的事情, 这些控件的布局属性有UItableViewCellStyle进行设置.比如以下代码.
 UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:@"reuse"];
  • 上面的代码是UITableViewCell的初始化方法, 可以通过其设置UITableViewCellStyle, 它是一个枚举值:
typedef NS_ENUM(NSInteger, UITableViewCellStyle) { 
UITableViewCellStyleDefault, // 左侧显示textLabel(不显示detailTextLabel),imageView可选(显示在最左边) 
UITableViewCellStyleValue1, // 左侧显示textLabel、右侧显示detailTextLabel(默认蓝色),imageView可选(显示在最左边) 
UITableViewCellStyleValue2, // 左侧依次显示textLabel(默认蓝色)和detailTextLabel,imageView可选(显示在最左边)
 UITableViewCellStyleSubtitle // 左上方显示textLabel,左下方显示detailTextLabel(默认灰色),imageView可选(显示在最左边) 
};

下面介绍几个常用的tableView的协议方法

#pragma mark - 设置每行高度(每行高度可以不一样, 通过判断实现)
 -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { 
    return 45;
 } 
#pragma mark - 设置尾部标题内容高度
 -(CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section { 
    return 40; 
}
#pragma mark - 返回每组头标题名称
-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
    NSString *headTitle = [NSString stringWithFormat:@"第%ld个分区的头视图", section];
    return headTitle;
}
#pragma mark - 返回每组尾部说明
-(NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section{
    NSString *footTitle = [NSString stringWithFormat:@"第%ld个分区的尾视图", section];
    return footTitle;
}
#pragma mark - 返回每组标题索引
-(NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView{
    NSMutableArray *indexsArray = [[NSMutableArray alloc]init];
    indexsArray = @[@"A", @"B", @"C", @"D", @"E"].mutableCopy;
    return indexsArray;
}
#pragma mark - 设置分组头视图标题内容高度
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
    // 通过section的不同可以设置每个头视图标题的高度
    if(section==0) {
        return 50;
    }
    return 40;
}
#pragma mark - 设置每行(Row)的高度(每行高度可以不一样)
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return 45;
}
#pragma mark - 设置尾部说明内容高度(每个尾视图高度可以不同)
-(CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
    return 40;
}
#pragma mark - tableView的点击方法
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    NSLog(@"点击了第%ld分区的第%ld个cell", indexPath.section, indexPath.row);
}

设置每个分区头视图和尾视图的View

#pragma mark - 返回每组尾视图的View
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {
    UIView *footView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 50)];
    footView.backgroundColor = [UIColor greenColor];
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 50)];
    label.text = @"这个是每个分区的尾视图的label";
// 判断当第一个分区的时候, 显示的是footView, 其它的是label
    if (section == 0) {
        return footView;
    } else {
    return label;
    }
}
#pragma mark - 返回每组头视图的View
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    UIView *headView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 50)];
    headView.backgroundColor = [UIColor blueColor];
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 50)];
    label.text = @"这个是每个分区的头视图的label";
// 判断当第一个分区的时候, 显示的是headView, 其它的是label
    if (section == 0) {
        return headView;
    } else {
        return label;
    }
}

下面我们看一下效果

tableView的头视图和尾视图自定义view.gif

就写到这里了, 希望有错误的大家指出, 互相学习互相进步, 以后我还会对应的写一些关于UITableView的内容, 欢迎大家一起讨论学习。

相关文章

网友评论

    本文标题:简单描述UITableView

    本文链接:https://www.haomeiwen.com/subject/ytlmsttx.html