SDAutolayout自适应教程

SDAutoLayout的使用

原创   2016年03月29日 13:48:37

• 标签：
• iOS /
• 代码 /
• uitableview

• 2722

SDAutoLayout 下载链接

SDAutoLayout 基础版视频教程：http://www.letv.com/ptv/vplay/24038772.html 

SDAutoLayout 进阶版视频教程：http://www.letv.com/ptv/vplay/24381390.html 

SDAutoLayout 原理简介视频教程：http://www.iqiyi.com/w_19rt0tec4p.html 

个人觉得自适应TableView的高度这块比较好用，增加约束这一块的话，如果不是必须要纯代码编写项目，还是在Xib、storyboard里增加约束效率较高，对原Demo有兴趣的可以点击链接下载，以下只截取主要部分代码：

YXTableViewController.m

[objc]  view plain  copy

1. /* 
2.  自适应TableView，有三种方式： 
3.  1.最早版，需要三步： 
4.  1.1 设置cell高度自适应： 
5.  cell布局设置好之后调用此方法就可以实现高度自适应（注意：如果用高度自适应则不要再以cell的底边为参照去布局其子view） 
6.  [cell setupAutoHeightWithBottomView:_view4 bottomMargin:10]; 
7.   
8.  1.2 在返回行数的代理方法里，增加一个方法[tableView startAutoCellHeightWithCellClass:[YXTableViewCell class] contentViewWidth:[UIScreen mainScreen].bounds.size.width]，如下： 
9.  - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { 
10.     [tableView startAutoCellHeightWithCellClass:[YXTableViewCell class] contentViewWidth:[UIScreen mainScreen].bounds.size.width]; 
11.     return _contenArray.count; 
12.  } 
13.   
14.  1.3 在返回行高度的代理方法里返回高度，如下： 
15.  - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { 
16.     CGFloat height = [tableView cellHeightForIndexPath:indexPath model:_contenArray[indexPath.row] keyPath:@"model"]; 
17.     return height; 
18.  } 
19.   
20.   
21.  2.上面方法的简约版，其实就是把1.2和1.3两个方法合为一个方法，需要两步： 
22.  2.1 设置cell高度自适应： 
23.  // cell布局设置好之后调用此方法就可以实现高度自适应（注意：如果用高度自适应则不要再以cell的底边为参照去布局其子view） 
24.  [cell setupAutoHeightWithBottomView:_view4 bottomMargin:10]; 
25.   
26.  2.2 获取自动计算出的cell高度 
27.  - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath 
28.  { 
29.  id model = self.modelsArray[indexPath.row]; 
30.  // 获取cell高度 
31.  return [self.tableView cellHeightForIndexPath:indexPath model:model keyPath:@"model" cellClass:[DemoVC9Cell class]  contentViewWidth:cellContentViewWith]; 
32.  } 
33.   
34.  3.升级版（适应于cell条数少于100的tableview）：tableview 高度自适应设置只需要2步： 
35.  3.1 设置cell高度自适应： 
36.  // cell布局设置好之后调用此方法就可以实现高度自适应（注意：如果用高度自适应则不要再以cell的底边为参照去布局其子view） 
37.  [cell setupAutoHeightWithBottomView:_view4 bottomMargin:10]; 
38.   
39.  3.2 >> 获取自动计算出的cell高度 
40.  - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath 
41.  { 
42.  // 获取cell高度 
43.  return [self cellHeightForIndexPath:indexPath cellContentViewWidth:[UIScreen mainScreen].bounds.size.width]; 
44.  } 
45. */  
46.   
47. #import "YXTableViewController.h"  
48. #import "YXTableViewModel.h"  
49.   
50. @interface YXTableViewController ()  
51. {  
52.     NSMutableArray *_contenArray;  
53. }  
54.   
55. @end  
56.   
57. @implementation YXTableViewController  
58.   
59. - (void)viewDidLoad {  
60.     [super viewDidLoad];  
61.     if (!_cellClassName) {  
62.         _cellClassName = @"YXTableViewCell";  
63.     }  
64.       
65.     _contenArray = [YXTableViewModel getSourceData];  
66. }  
67.   
68. #pragma mark - Table view data source  
69. - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {  
70.     return 1;  
71. }  
72.   
73. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {  
74.     return _contenArray.count;  
75. }  
76.   
77. - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {  
78.     Class cellClass = NSClassFromString(_cellClassName);  
79.     CGFloat height = [tableView cellHeightForIndexPath:indexPath model:_contenArray[indexPath.row] keyPath:@"model" cellClass:[cellClass class] contentViewWidth:[UIScreen mainScreen].bounds.size.width];  
80.     return height;  
81. }  
82.   
83. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {  
84.     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:_cellClassName];  
85.     if (!cell) {  
86.         cell = [[NSBundle mainBundle] loadNibNamed:_cellClassName owner:nil options:nil][0];  
87.     }  
88.     [cell setValue:_contenArray[indexPath.row] forKey:@"model"];  
89.     return cell;  
90. }  
91.   
92. @end  

YXTableViewCell.m

[objc]  view plain  copy

1. @implementation YXTableViewCell  
2.   
3. - (void)awakeFromNib {  
4.     [super awakeFromNib];  
5.     _iconImgVi = [UIImageView new];  
6.     _iconImgVi.backgroundColor = [UIColor redColor];  
7.     [self.contentView addSubview:_iconImgVi];  
8.     _iconImgVi.sd_layout.leftSpaceToView(self.contentView,8)//距离左边参照物8像素  
9.     .topSpaceToView(self.contentView,8)//距离上边参照物8像素  
10.     .widthIs(50)//宽等于50像素  
11.     .heightIs(50);//高等于50像素  
12.       
13.     _titleLab = [UILabel new];  
14.     _titleLab.backgroundColor = [UIColor lightGrayColor];  
15.     [self.contentView addSubview:_titleLab];  
16.     _titleLab.sd_layout.leftSpaceToView(_iconImgVi,8)  
17.     .topSpaceToView(self.contentView,8)  
18.     .rightSpaceToView(self.contentView,8)  
19.     .heightRatioToView(_iconImgVi,0.4);//高度等于_iconImgVi高的0.4倍数  
20.       
21.     _contentLab = [UILabel new];  
22.     _contentLab.backgroundColor = [UIColor greenColor];  
23.     [self.contentView addSubview:_contentLab];  
24.     _contentLab.sd_layout.leftEqualToView(_titleLab)//_contentLab的x==_titleLab的x  
25.     .topSpaceToView(_titleLab,8)  
26.     .rightEqualToView(_titleLab)//_contentLab距离右边参照物的空间==_titleLab距离右边参照物的空间  
27.     .autoHeightRatio(0)//根据文字内容，自适应高度  
28.     .minHeightIs(10);//最小高度为10像素  
29.       
30.     _describeLab = [UILabel new];  
31.     _describeLab.backgroundColor = [UIColor cyanColor];  
32.     [self.contentView addSubview:_describeLab];  
33.     _describeLab.sd_layout.leftEqualToView(_titleLab)  
34.     .topSpaceToView(_contentLab,8)  
35.     .rightEqualToView(_titleLab)  
36.     .autoHeightRatio(0);  
37.       
38. //    cell高度自适应  
39.     [self setupAutoHeightWithBottomView:_describeLab bottomMargin:8];  
40. }  
41.   
42. - (void)setModel:(YXTableViewModel *)model {  
43.     self.titleLab.text = model.titleStr;  
44.     self.contentLab.text = model.contentStr;  
45.     self.describeLab.text = model.describeStr;  
46. }  
47.   
48. - (void)setSelected:(BOOL)selected animated:(BOOL)animated {  
49.     [super setSelected:selected animated:animated];  
50.   
51.     // Configure the view for the selected state  
52. }  
53.   
54. @end  

这里采用的是单Cell第二种方法，

[objc]  view plain  copy

1. 2.1 设置cell高度自适应：  
2.  // cell布局设置好之后调用此方法就可以实现高度自适应（注意：如果用高度自适应则不要再以cell的底边为参照去布局其子view）  
3.  [cell setupAutoHeightWithBottomView:_view4 bottomMargin:10];  
4.    
5.  2.2 获取自动计算出的cell高度  
6.  - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath  
7.  {  
8.  id model = self.modelsArray[indexPath.row];  
9.  // 获取cell高度  
10.  return [self.tableView cellHeightForIndexPath:indexPath model:model keyPath:@"model" cellClass:[DemoVC9Cell class]  contentViewWidth:cellContentViewWith];  
11.  }  

Demo里有多Cell的自适应方法，原理是一样的，还有定义自适应控件和配合用Xib增加约束Cell的自适应，非常简单，感兴趣的可以看一下。