Masonry tableviewCell布局(转)

转载自: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 = 0; i < 10; ++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 + 20;
}

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

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

源代码

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

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

时间: 2024-11-05 16:10:24

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

Masonry tableviewCell布局

前言 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万大量代码的冗余,对维护和开发的效率都很低. 笔者在这里介绍纯代码自动布局的第三方库:Masonry.这个库使用率相当高,在全世界都有大量的开发者在使用,其star数量也是相当高的. 效果图 本节详解Masonry的以动画的形式更新约束的基本用法,先看看效果图: 我们这里初始按钮是一个很小的按钮,点击

Masonry 轻量级布局框架的使用

iOS 提供了自动布局的方法,但是原生的方法使用太过麻烦 ,Masonry 框架提供了类似的方法,同样可以实现自动布局 ,代码更加直观,而且容易理解. Masonry 是一个轻量级的布局框架.拥有自己的描述语法,采用更优雅的链式语法封装自动布局,简洁明了并具有较高的可读性 ,同时支持iOS和Mac OSX.某种意义上可以取代AutoLayout 1.Masonry配置 使用时只需要导入头文件 (Masonry.h) 2.Masonry 常用的方法 2.1Masonry 给视图添加布局条件的常用方

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

接上篇继续进行Masonry 的学习. (12)tableViewCell 布局 1 #import "TableViewController.h" 2 #import "TestTableViewCell.h" 3 4 @interface TableViewController ()<UITableViewDelegate, UITableViewDataSource> 5 6 @property(nonatomic, strong) UITable

AutoLayout -Masonry

History and Something Insteresting 手写代码的UI的自动布局在iOS6中引入的新特性iOS 6 brings an awesome new feature to the iPhone and iPad: Auto Layout, 以取代之前的 autoresizingMask( "springs and struts" Model). 实际上关于纯手写代码UI Layout经历了三个时期,固定宽高(这个用frame设计非常容易),Autoresizin

IOS Masonry自动布局

之前项目用Frame布局,这个项目登录用了VFL,后来觉得用Masonry,前天布局TableViewCell时用了下 ,觉得还不错. #import "Masonry.h" #import "MASViewAttribute.h" 先看效果图: #import "ReportsCell.h" //#import "Masonry.h" #import "YZPUIFormatMacros.h" #impo

iOS6 及其以上版本自动旋转、手动强制旋转方案及布局适配

1.布局适配方式 本文不讨论哪种布局适配方式最好,此处使用的是 Masonry 纯代码布局适配.(Masonry 底层就是 AutoLayout 的 NSLayoutConstraint) 2.iOS 方向枚举类 // 三维设备方向 typedef NS_ENUM(NSInteger, UIDeviceOrientation) { UIDeviceOrientationUnknown, UIDeviceOrientationPortrait, // Device oriented vertica

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

本文将为您介绍6款功能强大的jQuery插件,它们能够帮助您方便快捷地创建复杂的网络布局并进行优化. 1.UI.Layout 该插件可以创建任何你想要的UI形式:包括从简单的标题或侧边栏,到一个包含工具栏,菜单,帮助面板,状态栏,子表格等复杂的应用.     2.jQUery Masonry 动态布局jQuery插件,折叠式CSS浮动面板. 3.jLayout 可提供四种网页元素布局算法.     4.jQuery pageSlide 该插件灵感来自于Aza Raskin的UI工作中.他最近发表

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

今天博客的内容就系统的讨论一下Masonry对FSP的影响,以及如何更好的使用Masonry.如果你对iOS开发足够熟悉的话,那么对Masonry框架应该不陌生.简单的说,Masonry的诞生让AutoLayout的使用更为优雅,让控件的布局更为方便.使用辩证的观点来看一个事物的话,凡事都有两面性,Masonry的使用也不例外.Masonry框架的使用不当会直接影响当UI的FPS.今天我们就来讨论一下在使用Masonry时的一些误区,看一下那些影响性能的使用方式.本篇博客我们依然会依托于Demo

iOS仿京东分类菜单实例实现

在APP开发过程中此功能还是比较常见的模块,左边为菜单展示,右边为菜单下数据的展示,选择不同的菜单右边的数据源进行更新,此实例主要运用到UITableView,UICollectionView,OC谓词一些知识,结合Masonry进行布局:实现的效果如下: 涉及的知识点: 1:UITableView的运用,包含选中与非选中行不同展示,默认行分隔线的色彩跟与左边距离的调整,自动滚动到最顶端的实现等 2:UICollectionView的运用,包含单元格的加载,及重用时遇到的错乱问题,记录滚动位置的