iOS UITableViewCell自动布局autoLayout 学习(1)

效果图:


iOS UITableViewCell自动布局autoLayout 学习(1)_第1张图片
预览图

只需两步
1.告诉tableview自动布局
2.做好布局约束

下面是例子:
第一步,告诉tableview要自动布局

- (void)viewDidLoad {
    [super viewDidLoad];

    self.tableView.estimatedRowHeight = 150.0;
    self.tableView.rowHeight = UITableViewAutomaticDimension;
}

第二步,约束
讲真,约束这种东西一开始我也是云里雾里的...
但是多弄几次就如鱼得水了,所以看别人的永远不如自己多搞几次。


iOS UITableViewCell自动布局autoLayout 学习(1)_第2张图片
约束

解释我做的约束:
1.标题:上/左/右


iOS UITableViewCell自动布局autoLayout 学习(1)_第3张图片
标题

2.图片:上/下/宽/高/左
上:与标题的距离
下:与底部cell的距离
宽高:固定值

左:与标题左对齐


iOS UITableViewCell自动布局autoLayout 学习(1)_第4张图片
上下宽高

iOS UITableViewCell自动布局autoLayout 学习(1)_第5张图片
与标题左对齐

值得注意:
在【下】的约束要设置priority 优先值为500(后面会解释)。
iOS UITableViewCell自动布局autoLayout 学习(1)_第6张图片
priority设置

PS.如果你觉得屏幕约束多找不到【下】这个约束,请看左边的约束列表
iOS UITableViewCell自动布局autoLayout 学习(1)_第7张图片
约束列表

3.Textview内容:上对齐/左/右/下
上对齐:与图片顶部对齐
左:距离图片左边距离
右:距离cell右边距离
下:距离cell下边距离
iOS UITableViewCell自动布局autoLayout 学习(1)_第8张图片
左/右/下

iOS UITableViewCell自动布局autoLayout 学习(1)_第9张图片
上对齐

PS.对齐是需要选中两个控件才能选择对齐的。
到这里约束就完成了。
不要觉得很多很麻烦约束,
讲真,我5分钟就完成了约束(多搞几次你也会快的上天)
而写这篇文字2个小时...

说一下为什么要设置图片的priority值低于文字的priority
因为会出现文字的高度低于图片的高度情况啊(看效果预览图的第一条数据)
还有一种情况就是文字的高度大于图片的高度啊(效果预览图第二条数据)
你自己可以手动试一下不设置会出现什么效果,我就不截图了。

做完约束剩下就是把数据加上就是了。
数据就是cell上面的控件赋值而已啦
完。
源码:
https://github.com/icharlie2014/SimpleCellAutoLayout

你可能感兴趣的:(iOS UITableViewCell自动布局autoLayout 学习(1))