iOS学习之 UITableVIew cell 创建方式(XIB, storyboard)

UITableView

  • 数据源的常用方法

  • 此方法设置 cell 的组数
    - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;

  • 每一组有多少行数据
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;

  • 每一行显示什么内容,返回 cell
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;

  • 设置每一组的头部信息
    - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section;

  • 设置每一组的尾部信息
    - (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section

  • tabelView常见属性

    // 设置每一行cell的高度
    self.tableView.rowHeight = 100;
    
    // 设置每一组头部的高度
    self.tableView.sectionHeaderHeight = 50;
    // 设置每一组尾部的高度
    self.tableView.sectionFooterHeight = 50;
    // 设置分割线颜色
    self.tableView.separatorColor = [UIColor redColor];
    // 设置分割线样式
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    // 设置表头控件
    self.tableView.tableHeaderView = [[UISwitch alloc] init];
    // 设置表尾控件
    self.tableView.tableFooterView = [UIButton buttonWithType:UIButtonTypeContactAdd];
    // 设置右边索引文字的颜色
    self.tableView.sectionIndexColor = [UIColor redColor];
    // 设置右边索引文字的背景色
    self.tableView.sectionIndexBackgroundColor = [UIColor blackColor];
    
    
  • cell

  • UITableView的每一行都是一个UITableViewCell,通过dataSource的tableView:cellForRowAtIndexPath:方法来初始化每一行

  • UITableViewCell内部有个默认的子视图:contentView,contentView是UITableViewCell所显示内容的父视图,可显示一些辅助指示视图

  • 辅助指示视图的作用是显示一个表示动作的图标,可以通过设置UITableViewCell的accessoryType来显示,默认是UITableViewCellAccessoryNone(不显示辅助指示视图)

  • 可以通过cell的accessoryView属性来自定义辅助指示视图(比如往右边放一个开关)

  • 传统的写法

    /**
    *  每当有一个cell要进入视野范围内,就会调用一次
    */
    - (UITableViewCell *)tableView:(UITableView *)tableView cell ForRowAtIndexPath:(NSIndexPath *)indexPath
    {
    static NSString *ID = @"wine";
    
    // 1.先去缓存池中查找可循环利用的cell
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    
    // 2.如果缓存池中没有可循环利用的cell
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
    }
    
    // 3.设置数据
    cell.textLabel.text = [NSString stringWithFormat:@"%zd行的数据", indexPath.row];
    
    return cell;
    

}
```

  • 新的写法(注册cell)

    NSString *ID = @"wine";
    
    - (void)viewDidLoad {
    [super viewDidLoad];
    
    // 注册某个重用标识 对应的 Cell类型
    [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:ID];
    }
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    

{
// 1.先去缓存池中查找可循环利用的cell
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];

// 2.设置数据
cell.textLabel.text = [NSString stringWithFormat:@"%zd行的数据", indexPath.row];

return cell;

}
```

  • 自定义 cell

  • 等高 cell 代码

    1. 新建一个继承自UITableViewCell的子类
    2. 重写新建子类的-initWithStyle:reuseIdentifier:方法在这个方法中添加所有需要显示的子控件。给子控件做一些初始化设置(设置字体、文字颜色等)
    3. 重写-layoutSubviews方法一定要调用[superlayoutSubviews]在这个方法中计算和设置所有子控件的frame
    4. 提供模型属性,设置模型的数据,在 set 方法中
    5. 注册 cell。。。下面方法是从 xib 中 zuce
      [self.tableView registerNib:[UINib             
                   nibWithNibName:NSStringFromClass([MTTgCell class]) 
                           bundle:nil] 
                           forCellReuseIdentifier:ID];
      
  • 不等高 cell

    1. 在模型内部提供可设置 cell高度 的的 frame属性,
        @interface XMGStatus : NSObject
        @property (nonatomic, assign) CGRect iconFrame;
        /** cell的高度 */
        @property (nonatomic, assign) CGFloat cellHeight;
        @end
    
    1. model.m中重写模型cellHeight属性的get方法

      - (CGFloat)cellHeight
      {
          if (_cellHeight == 0) {
              // ... 计算所有子控件的frame、cell的高度
          }
          return _cellHeight;
      }
      
    2. 在控制器中实现返回 cell 高度的代理方法,heightforrow

          // 返回每一行cell的具体高度
          - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
          {
          SBStatus *status = self.statuses[indexPath.row];
          return status.cellHeight;
          }
      
    3. 给 cell 模型传值

    4. 新建一个继承自UITableViewCell的子类,比如SBStatusCell,并且提供一个模型属性

    5. 在SBStatusCell.m中重写模型属性的set方法

  • 文字尺寸的计算

    • 计算文字所占据的尺寸
        NSDictionary *nameAttrs = @{NSFontAttributeName : [UIFont systemFontOfSize:17]};
        CGSize nameSize = [self.name sizeWithAttributes:nameAttrs];
    
    • 计算一段文字的尺寸
        CGSize textMaxSize = CGSizeMake(textW, MAXFLOAT);
        NSDictionary *textAttrs = @{NSFontAttributeName : [UIFont systemFontOfSize:14]};
        CGFloat textH = [self.text boundingRectWithSize:textMaxSize
                                                options:NSStringDrawingUsesLineFragmentOrigin 
                                             attributes:textAttrs 
                                                context:nil].size.height;
    
    
    • 计算屏幕的宽
      • [UIScreen mainScreen].bounds.size.width
  • 连线修改约束
    • 定义一个高度约束且连线到 storyboard
      • @property (nonatomic, weak) IBOutlet NSLayoutConstraint *picHeight;
    • 然后在模型设置控件的 set 方法中修改
      • self.picHeight.constant = 100;
  • cellheight 不等高的估算和自动计算
    • 程序一开始就会吧 tabelViewl 的所有cell高度算出来,确定 contengSize 的大小,从而计算出滚动条的长度。所以这样的性能不好,所以苹果推出了估算高度
    • 告诉tabelview的 cell的估算高度,就可以使heightforrow方法的调用次数减少
    • 设置估算的方法
      1. self.tabelView.estimateRowHeight = 10
      2. - (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath 通过代理方法
    • 处理不等高 cell 自动计算(iOS8开始才支持)
      1. 告诉tableView所有cell的真实高度是自动计算(根据设置的约束来计算)
        self.tableView.rowHeight = UITableViewAutomaticDimension;
      2. 告诉tableView所有cell的估算高度. self.tableView.estimatedRowHeight = 44;
      3. 这种需要设置约束连线,然后在 cell 的 setModel 方法中进行判断
          // 设置配图数据
          if (status.picture) { // 有配图
              self.pictureHeight.constant = 100;
              self.pictureBottom.constant = 10;
              self.pictureImageView.image = [UIImage imageNamed:status.picture];
          } else { // 没有配图
              // 设置图片高度为0
              self.pictureHeight.constant = 0;
              // 设置图片底部间距为0
              self.pictureBottom.constant = 0;
      
    }
    ```
    • iOS 8之前

      1. 如果cell内部有自动换行的label,需要设置preferredMaxLayoutWidth属性
          - (void)awakeFromNib
      {
          // 手动设置文字的最大宽度(目的是:让label知道自己文字的最大宽度,进而能够计算出自己的frame)
          self.text_label.preferredMaxLayoutWidth = [UIScreen mainScreen].bounds.size.width - 20;
      }
      
      
      1. 设置tableView的cell估算高度
      // 告诉tableView所有cell的估算高度(设置了估算高度,就可以减少tableView:heightForRowAtIndexPath:方法的调用次数)
      self.tableView.estimatedRowHeight = 200;
      
      1. 在代理方法中计算cell的高度
          XMGStatusCell *cell;
          - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
          {
              // 创建一个cell(cell的作用:根据模型数据布局所有的子控件,进而计算出cell的高度)
              if (!cell) {
                  cell = [tableView dequeueReusableCellWithIdentifier:ID];
              }
          
              // 设置模型数据
              cell.status = self.statuses[indexPath.row];
          
              return cell.height;
          }
          
          ```
      4. 在 cell.m中设置 height 高度
      
        - (CGFloat)height
        {
            // 强制布局cell内部的所有子控件(label根据文字多少计算出自己最真实的尺寸)
            [self layoutIfNeeded];
        
            // 计算cell的高度
            if (self.status.picture) {
                return CGRectGetMaxY(self.pictureImageView.frame) + 10;
            } else {
                return CGRectGetMaxY(self.text_label.frame) + 10;
            }
        }
      
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,723评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,485评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,998评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,323评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,355评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,079评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,389评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,019评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,519评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,971评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,100评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,738评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,293评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,289评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,517评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,547评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,834评论 2 345

推荐阅读更多精彩内容