转载自:http://www.henishuo.com/masonry-tableviewcell-layout/

前言

说到iOS自动布局,有很多的解决办法。有的人使用xib/storyboard自动布局,也有人使用frame来适配。对于前者,笔者并不喜欢,也不支持。对于后者,更是麻烦,到处计算高度、宽度等,千万大量代码的冗余,对维护和开发的效率都很低。

笔者在这里介绍纯代码自动布局的第三方库:Masonry。这个库使用率相当高,在全世界都有大量的开发者在使用,其star数量也是相当高的。

效果图

本节详解Masonry的以动画的形式更新约束的基本用法,先看看效果图:

我们这里初始按钮是一个很小的按钮,点击就不断放大,最大就放大到全屏幕。

核心代码

看下代码:

#import "TableViewController.h"
#import "TestCell.h" @interface TableViewController () <UITableViewDataSource, UITableViewDelegate> @property (nonatomic, strong) UITableView *tableView;
@property (nonatomic, strong) NSMutableArray *dataSource; @end @implementation TableViewController - (void)viewDidLoad {
[super viewDidLoad]; self.tableView = [[UITableView alloc] init];
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
self.tableView.delegate = self;
self.tableView.dataSource = self;
[self.view addSubview:self.tableView];
[self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.mas_equalTo(self.view);
}]; for (NSUInteger i = ; i < ; ++i) {
TestModel *model = [[TestModel alloc] init];
model.title = @"测试标题,可能很长很长,反正随便写着先吧!";
model.desc = @"描述内容通常都是很长很长的,描述内容通常都是很长很长的,描述内容通常都是很长很长的,描述内容通常都是很长很长的,描述内容通常都是很长很长的,描述内容通常都是很长很长的,描述内容通常都是很长很长的,描述内容通常都是很长很长的,描述内容通常都是很长很长的,描述内容通常都是很长很长的,描述内容通常都是很长很长的,"; [self.dataSource addObject:model];
} [self.tableView reloadData];
} - (NSMutableArray *)dataSource {
if (_dataSource == nil) {
_dataSource = [[NSMutableArray alloc] init];
} return _dataSource;
} #pragma mark - UITableViewDataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return self.dataSource.count;
} - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *cellIdentifier = @"CellIdentifier"; TestCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier]; if (!cell) {
cell = [[TestCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
} cell.indexPath = indexPath;
cell.block = ^(NSIndexPath *path) {
[tableView reloadRowsAtIndexPaths:@[path] withRowAnimation:UITableViewRowAnimationFade];
};
TestModel *model = [self.dataSource objectAtIndex:indexPath.row];
[cell configCellWithModel:model]; return cell;
} - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
TestModel *model = [self.dataSource objectAtIndex:indexPath.row]; return [TestCell heightWithModel:model];
} @end

讲解


我们来看看这个计算行高的代码,看起来是不是很像配置数据的代理方法呢?

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
TestModel *model = [self.dataSource objectAtIndex:indexPath.row]; return [TestCell heightWithModel:model];
}

我们看看TestCell的声明,提供了一个计算行高的类方法:

typedef void (^TestBlock)(NSIndexPath *indexPath);

@interface TestCell : UITableViewCell

@property (nonatomic, strong) UILabel *titleLabel;
@property (nonatomic, strong) UILabel *descLabel;
@property (nonatomic, strong) NSIndexPath *indexPath; @property (nonatomic, copy) TestBlock block; - (void)configCellWithModel:(TestModel *)model; + (CGFloat)heightWithModel:(TestModel *)model; @end

我们看一下计算行高的实现:

+ (CGFloat)heightWithModel:(TestModel *)model {
TestCell *cell = [[TestCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@""];
[cell configCellWithModel:model]; [cell layoutIfNeeded]; CGRect frame = cell.descLabel.frame;
return frame.origin.y + frame.size.height + ;
}

我们只是创建了一个cell然后配置数据,然后调用layoutIfNeeded更新约束,以便获取到frame。当我们获取到以后,我们就可以计算出最后的cell真正的高度了。

关于计算cell的行高,笔者开源了一个扩展类,当然在公司内部也是大家都在使用的,可以减少大量的代码。如果需要使用,可以到这里下载:https://github.com/CoderJackyHuang/HYBMasonryAutoCellHeight或者直接使用cocoapods安装。

源代码

大家可以到笔者的github下载源代码:MasonryDemo

温馨提示:本节所讲内容对应于TableViewController中的内容

Masonry tableviewCell布局(转)的更多相关文章

  1. Masonry tableviewCell布局

    前言 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万 ...

  2. Masonry 轻量级布局框架的使用

    iOS 提供了自动布局的方法,但是原生的方法使用太过麻烦 ,Masonry 框架提供了类似的方法,同样可以实现自动布局 ,代码更加直观,而且容易理解. Masonry 是一个轻量级的布局框架.拥有自己 ...

  3. iOS学习——布局利器Masonry框架源码深度剖析

    iOS开发过程中很大一部分内容就是界面布局和跳转,iOS的布局方式也经历了 显式坐标定位方式 --> autoresizingMask --> iOS 6.0推出的自动布局(Auto La ...

  4. iOS开发之--Masonry多个平均布局

    使用Masonry平均布局,代码如下: 1.创建 // 图片组数 NSArray *imgAry = @[@"home_icon01",@"home_icon02&quo ...

  5. Coding源码学习第四部分(Masonry介绍与使用(三))

    接上篇继续进行Masonry 的学习. (12)tableViewCell 布局 #import "TableViewController.h" #import "Tes ...

  6. IOS Masonry自动布局

    之前项目用Frame布局,这个项目登录用了VFL,后来觉得用Masonry,前天布局TableViewCell时用了下 ,觉得还不错. #import "Masonry.h" #i ...

  7. iOS开发针对对Masonry下的FPS优化讨论

    今天博客的内容就系统的讨论一下Masonry对FSP的影响,以及如何更好的使用Masonry.如果你对iOS开发足够熟悉的话,那么对Masonry框架应该不陌生.简单的说,Masonry的诞生让Aut ...

  8. 6款强大的 jQuery 网页布局创建及优化插件

    本文将为您介绍6款功能强大的jQuery插件,它们能够帮助您方便快捷地创建复杂的网络布局并进行优化. 1.UI.Layout 该插件可以创建任何你想要的UI形式:包括从简单的标题或侧边栏,到一个包含工 ...

  9. iOS UI-自动布局(AutoLayout)

    // // ViewController.m // IOS_0115_AutoLayout // // Created by ma c on 16/1/15. // Copyright (c) 201 ...

随机推荐

  1. Redis(li)

    一.Redis基础介绍 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset ...

  2. webuploader上传文件,图片

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.官方地址:http://fex.baidu.com/webupload ...

  3. Spring in Action 学习笔记二-DI

    装配bean 2015年10月9日 9:49             Sprng中,对象无需自己负责查找或创建其关联的其他对象.相关,容器负责吧需要相互协作的对象引用赋予各个对象. 创建应用对象之间协 ...

  4. Android 手机卫士--获取联系人信息并显示与回显

    前面的文章已经实现相关的布局,本文接着进行相关的功能实现 本文地址:http://www.cnblogs.com/wuyudong/p/5951794.html,转载请注明出处. 读取系统联系人 当点 ...

  5. iOS 自定义方法 - UIView扩展

    示例代码 //#import <UIKit/UIKit.h>@interface UIView (LPCView)/** 上 */@property CGFloat top;/** 下 * ...

  6. putty提供的两个文件传输工具PSCP、PSFTP详细介绍

    用 SSH 来传输文件 PuTTY 提供了两个文件传输工具 PSCP (PuTTY Secure Copy client) PSFTP (PuTTY SFTP client) PSCP 通过 SSH ...

  7. Mysql联合,连接查询

    一. 联合查询    UNION, INTERSECT, EXCEPT UNION运算符可以将两个或两个以上Select语句的查询结果集合合并成一个结果集合显示,即执行联合查询.UNION的语法格式为 ...

  8. Login控件尝试

    新建web项目,添加default.aspx.Register.aspx.Login.aspx. default.aspx中添加LoginName.LoginStatus,LoginName的Form ...

  9. ascii、unicode、utf、gb等编码详解

    很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同的状态,以表示世界上的万物.他们看到8个开关状态是好的,于是他们把这称为"字节".再后来,他们又做了一些可以处理这 ...

  10. nginx在linux下安装

    安装前先确认是否已经安装编译包和一些依赖包如果没有安装: yum install pcre* yum install openssl* yum install zlib yum install zli ...