Masonry自动计算行高

原文出自:标哥的技术博客

前言



还在手动计算UITableViewCell的行高吗?还在每次都因为需求变化一点就要大量调整cell的高度而烦恼吗?现在教大家如何通过Masonry的自动布局来实现自动计算cell的行高!!!

github没有找到基于Masonry自动计算行高的库,倒是找到了使用xib/storyboard在添加约束来自动计算行高的库,如: UITableView-FDTemplateLayoutCell

本人非常推崇Masonry来实现代码的自动布局,因此项目中都是使用Masonry布局的,为了自动计算行高,决定写一个扩展,以达到自动计算的效果,如此一来,开发者不用再关心那些非固定行高的cell的动态计算问题了。

设置关键依赖



要想自动计算出cell的行高,我们还需要指定以哪个视图作为cell的最后一个视图,比如我们最后要添加一条线,我们可以以这条线作为hyb_lastViewInCell,如果这条线还需要距离底部一定距离,那么可以设置hyb_bottomOffsetToCell

/**
 * 必传设置的属性,也就是在cell中的contentView内最后一个视图,用于计算行高
 * 例如,创建了一个按钮button作为在cell中放到最后一个位置,则设置为:self.hyb_lastVieInCell = button;
 * 即可。
 * 默认为nil,如果在计算时,值为nil,会crash
 */
@property (nonatomic, strong) UIView *hyb_lastViewInCell;

/**
 * 可选设置的属性,默认为0,表示指定的hyb_lastViewInCell到cell的bottom的距离
 * 默认为0.0
 */
@property (nonatomic, assign) CGFloat hyb_bottomOffsetToCell;

计算行高API



要计算行高,只需要在UITableView的计算行高的代理方法中调用此API即可:

/**
 * 通过此方法来计算行高,需要在config中调用配置数据的API
 *
 * @param indexPath 必传,对应的indexPath
 * @param confi     必须要实现,且需要调用配置数据的API
 *
 * @return 计算的行高
 */
+ (CGFloat)hyb_heightForIndexPath:(NSIndexPath *)indexPath config:(HYBCellBlock)config;

在调用时,config传回来了cell对象,需要在调用处调用方法来配置好数据,才能正确地计算出cell的行高。通常是这样调用的:

- (CGFloat)tableView:(nonnull UITableView *)tableView heightForRowAtIndexPath:(nonnull NSIndexPath *)indexPath {
  HYBNewsModel *model = nil;
  if (indexPath.row < self.dataSource.count) {
    model = [self.dataSource objectAtIndex:indexPath.row];
  }

  return [HYBNewsCell hyb_heightForIndexPath:indexPath config:^(UITableViewCell *sourceCell) {
    HYBNewsCell *cell = (HYBNewsCell *)sourceCell;

    // 配置数据
    [cell configCellWithModel:model];
  }];
}

实现例子



效果图如下:

我们看下实现-initWithStyle: reuseIdentifier:方法,因为我们要自动计算cell行高会自动调用此方法,因此一定要实现此方法来布局:

- (nonnull instancetype)initWithStyle:(UITableViewCellStyle)style
                      reuseIdentifier:(nullable NSString *)reuseIdentifier {
  if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
    self.mainLabel = [[UILabel alloc] init];
    [self.contentView addSubview:self.mainLabel];
    self.mainLabel.numberOfLines = 0;
    [self.mainLabel sizeToFit];
    [self.mainLabel mas_makeConstraints:^(MASConstraintMaker *make) {
      make.left.mas_equalTo(15);
      make.top.mas_equalTo(20);
      make.right.mas_equalTo(-15);
      make.height.mas_lessThanOrEqualTo(80);
    }];
    // 如果需要支持6.0,需要加上这句
//    self.mainLabel.preferredMaxLayoutWidth = ...

    self.descLabel = [[UILabel alloc] init];
    [self.contentView addSubview:self.descLabel];
    self.descLabel.numberOfLines = 0;
    [self.descLabel sizeToFit];
    [self.descLabel mas_makeConstraints:^(MASConstraintMaker *make) {
      make.left.mas_equalTo(15);
      make.right.mas_equalTo(-15);
      make.top.mas_equalTo(self.mainLabel.mas_bottom).offset(15);
    }];
    // 如果需要支持6.0,需要加上这句
    //    self.mainLabel.preferredMaxLayoutWidth = ...

    self.button = [UIButton buttonWithType:UIButtonTypeSystem];
    [self.contentView addSubview:self.button];
    [self.button sizeToFit];
    [self.button setTitle:@"我是cell的最后一个" forState:UIControlStateNormal];
    [self.button setBackgroundColor:[UIColor greenColor]];
    [self.button mas_makeConstraints:^(MASConstraintMaker *make) {
      make.left.mas_equalTo(15);
      make.right.mas_equalTo(-15);
      make.height.mas_equalTo(45);
      make.top.mas_equalTo(self.descLabel.mas_bottom).offset(40);
    }];

    // 必须加上这句
    self.hyb_lastViewInCell = self.button;
    self.hyb_bottomOffsetToCell = 20;
  }

  return self;
}

注意到这两行代码了吗:

self.hyb_lastViewInCell = self.button;
self.hyb_bottomOffsetToCell = 20;

先是设置哪个视图作为cell的最后一个视图,然后设置了最后一个参考视图与cell的底部的距离。其中,self.hyb_lastViewInCell属性是必须要设置的,否则会抛出异常。

使用



这个组件是开源的,而且是支持cocoapods的,因此大家若是使用了cocoapods来管理项目第三方库,可以这样使用:

pod 'HYBMasonryAutoCellHeight', '~> 0.0.1'

如果项目未使用cocoapods,直接下载源代码,然后将HYBMasonryAutoCellHeight文件夹拖入工程即可使用!

源代码



大家可以到github下载源代码来看看,内部实现很简单,当然要实现自动计算行高也是有系统方法的,不一定需要像笔者这样来实现。

下载源代码:https://github.com/CoderJackyHuang/HYBMasonryAutoCellHeight

喜欢就给个star

关注我



如果在使用过程中遇到问题,或者想要与我交流,可加入有问必答QQ群:324400294

关注微信公众号:iOSDevShares

关注新浪微博账号:标哥Jacky

支持并捐助



如果您觉得文章对您很有帮助,希望得到您的支持。您的捐肋将会给予我最大的鼓励,感谢您的支持!

支付宝捐助 微信捐助
时间: 2024-11-02 07:33:17

Masonry自动计算行高的相关文章

基于SnapKit写的自动计算行高开源库

原文出自:标哥的技术博客 前言 最近还是有不少朋友老问Swift版的自动计算行高怎么做,大家使用SnapKit来自动布局时,都希望能够自动地计算出行高,不用每次都自己去算一篇. 本篇介绍笔者所开源的基于SnapKit这套自动布局库而写的一个扩展,用于自动计算行高.最重要的是,只要约束正确,就可以实现自动计算行高,而且当我们需要动态修改约束时,只要统一放在配置数据的API那里修改约束一样可以计算出正确的高度. demo效果 千言万语,不如一个demo效果图,看完效果图再继续往下看: 库名HYBSn

iOS 6~10 UITableViewCell 之行高算式精要

iOS6~10 UITableViewCell 之行高算式精要 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.HTML5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. 简言之,自动布局耳. iOS 2.0 引入 @property(nonatomic

Excel怎么自动调整单元格行高和列宽

  Excel怎么自动调整单元格行高和列宽         方法一 1.用Excel2010打开一篇工作表,选中我们需要调整列宽的单元格,切换到"开始"选项卡,选择"单元格"组中"格式"下的"自动调整列宽"选项. 2.返回工作表,我们就能看到之前选中单元格的列宽已经自动进行了调整,效果如下: 方法二 用Excel2010打开一篇工作表,选中我们需要调整列宽的单元格,将鼠标移到这一列的右上角,当指针变成如下状态的时候,双击鼠标.

css中英文字母和汉字行高不同怎么办

文章简介:css中英文字母和汉字行高不一样的解决办法. 最近在写一个css的时候遇到一个问题:英文字母和汉字的行高不一样,导致在全汉字.全英文字母以及汉字字母混合时设置好的margin或padding 属性出现偏差-当然这种情况之存在于IE浏览器,Safari.Google Chrome.Firefox.Opera均不存在类似的问题 产生的原因: 全汉字的时候: 一般情况在选中文本可以看出汉字是上对齐的(具体表现是选中字体,从背景上看上去下面多了一部分,用css术语讲就是产生了padding-b

CSS网页制作教程:表单button的行高

文章简介:表单button的行高问题. HTML Code <input type="submit" id="button" value="engage"/> CSS Code #button {      border: 2px solid #06f;      color: #06f;      background-color: #6cf;      font: bold 12px Arial, Helvetica, sans-

Excel2007基础教程:改变列宽和行高

Excel2007基础教程:改变列宽和行高 经常需要改变列宽和行高.例如,可以将列变窄以在打印页中容纳更多信息.或者您可能想增加行的高度来创建一个"双倍空间"的效果. Excel 提供了几种改变列宽和行高的方法.1 .改变列宽 列宽是根据在单元格中填充的"固定间距字体" 字符的数量来测量的.默认状态下,列宽为8 .43 个单位,相当于64 像素. 提示:如果一个含有数值的单元格中全是井号(刑, 这就表示列宽不足以容纳单元格中的信息. 加大列宽可以解决这个问题. 在改

CSS line-height行高上下居中垂直居中样式属性

常常使用line-height设置内容(图片.文字)行高上下居中样式效果. 一.line-height行高语法   复制代码 代码如下: line-height:22px .jb51div{line-height:22px} line-height:200% .jb51div{line-height:200%} line-height:+数字+单位(在CSS布局中我们一般采用像素px为单位) 行高line-height的值可以为百分比数字 | 由浮点数字和单位标识符组成的长度值,允许为负值.其百

如何在wps表格中统一调整行高

  在wps表格中统一调整行高的方法: ①选中要调整行高的所有单元格,如图;然后依次点击快速工具栏的"行和高"-"行高"; ②然后在弹出的行高输入框,我们自由输入行高大小即可,如下图;点击确定,然后刚才选中的所有单元格的行高就统一调整了

PPT表格行高怎么调整?

  PPT表格行高怎么调整?快速进行PPT表格行高调整很重要,能使你快速进行PPT制作. 1. 选中表格,表格工具(布局)--分布行,使各行均匀分布 2.选中表格,表格工具(布局)--分布列,使各列均匀分布 3.如果要使指定列均匀分布,选中表格,表格工具(布局)--分布列 4.通过锁定纵横比调整PPT行高,这样可以不使PPT变形. 5.还可以通过单元格的数值调整,如图.