美文网首页
day09-UITableView-12自定义不等高的cell-

day09-UITableView-12自定义不等高的cell-

作者: js_huh | 来源:发表于2019-11-27 18:44 被阅读0次

UITableView-01基本使用
UITableView-02模型优化
UITableView-03复杂的Plist解析
UITableView-04常见属性和样式
UITableView-05可重复使用Cell-有限的创建新的cell
UITableView-06可重复使用cell-注册方式
UITableView-07索引条(综合小案例)
UITableView-08自定义等高的cell-纯代码frame方式
UITableView-09自定义等高的cell-Masonry方式
UITableView-10自定义等高的cell-xib方式
UITableView-11自定义等高的cell-storyboard方式


UITableViewController-01简单使用
dequeueReusableCellWithIdentifier方法讲解
文字包裹的实现
UILabel高度跟随文本内容的增/减而变化


效果图
思路
  1. 基础设置
    1.1继承UITableViewController
    1.2懒加载
    • 1.2.1获取plist文件的数据
    • 1.2.2字典转模型
    • 1.2.3将模型加载到集合里面.
  2. 自定义cell
    2.1继承系统的UITableViewCell,写一个自己的cell.
    2.2自定义的cell实现
    • 初始化cell .
    • 设置子控件的位置和大小.
    • 给子控件加载数据 .
  3. Controller里面
    3.1 tableView: cellForRowAtIndexPath方法,创建自定义的cell.
    3.2 tableView: heightForRowAtIndexPath方法,为每一个cell设置高度.

分析

  1. cell的高度是不固定得.
    1.1cell的高度,是由最后一个子控件的Y值+间距决定得.
  2. vip的图片标示是不固定得.
    2.1 self.vipImageView.hidden = NO; 显示vip图标.
  3. 图片可能有,也可能没有.
    3.1 if (self.picture),图片有值时的操作.
  4. 昵称采取的是文字包裹方式.
    文字包裹的实现
  5. 正文的高度,随着内容的多少,进行更改!
    UILabel高度跟随文本内容的增/减而变化

重点:

  1. layoutSubviewstableView: heightForRowAtIndexPath 方法.

    • ...heightForRowAtIndexPath 方法是设置cell的高度.
    • layoutSubviews 方法是对cell 里面 子控件的一些设置.(如: 位置, 尺寸等)
    • 调用顺序: 先调用 ...heightForRowAtIndexPath ,然后再调用 layoutSubviews.
  2. 每一个cell的高度都是不同得,且又是根据最后一个子控件的最大Y,所决定得.

    • 需要一个中间属性,来存储子控件的Y值.
      @property (nonatomic ,assign) CGFloat cellH; //cell的高度
    • 此属性需要能在tableView: heightForRowAtIndexPath //设置每个cell的高度方法获取得到.

    2.1 为什么,不能在自定义cell类里面设置,cellH的属性?

    • 自定义cell类里面,通过设置cellH属性的方式,能够获取到,最后一个子控件的Y值.
    • 但是,在tableView: heightForRowAtIndexPath方法中,无法根据indexPath获取对应cell,也就无法获取对应cellH.
      cellForRowAtIndexPath创建cell,在heigh...方法里会引起循环调用.
      1. 方法内部,先调用tableView:heightForRowAtIndexPath:方法,确认cell的高度
      2. 然后,才会去调用'layoutSubviews'方法,确认cell里面子控件的位置和尺寸.
      
      // 错误示范, 循环调用
      -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
      UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
      return cell.cellH;
      }
      

    2.2 为什么将cellH属性设置在模型里?

    • Controller里面的数据集合(懒加载, 字典-->模型)里面存放的就是模型,所以在tableView: heightForRowAtIndexPath方法中,可以获取到对应cellH.
      -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
        HUHStatus *status = self.statusData[indexPath.row];
        return status.cellH;
      }
      
    • 模型(HUHStatus)中设置各个子控件的位置和大小.
      @interface HUHStatus : NSObject
      /*各个子控件的from*/
      @property (nonatomic ,assign) CGRect iconF;
      @property (nonatomic ,assign) CGRect nameF;
      @property (nonatomic ,assign) CGRect pictureF;
      ....
      /* cell的高度*/
      @property (nonatomic ,assign) CGFloat cellH;
      ....
      @end
      
      // cellH的 get方法, 获取最后一个子控件的Y值 + 间距
      -(CGFloat)cellH{ 
          if(_cellH == 0){
             ...
             //插图
            if (self.picture) {
               ....
                self.pictureF = CGRectMake(X, Y, W, H);
                _cellH = CGRectGetMaxY(self.pictureF)+space;
              }else{
              _cellH = CGRectGetMaxY(self.textF) + space;
              }
          return _cellH;
         }
      
    • 因在自定义cell里面存在模型属性,所以通过模型属性可以给对应的子控件设置位置和大小.
      @property (nonatomic, strong) HUHStatus* status ; //模型属性
      -(void)layoutSubviews{
        [super layoutSubviews];
        self.iconImageView.frame = self.status.iconF;
        self.nameLabel.frame = self.status.nameF;
        ....
        }
      

相关文章

网友评论

      本文标题:day09-UITableView-12自定义不等高的cell-

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