AutoLayout——由切图引发的UITableViewCell自定义高度布局的失败!

AutoLayout早在iOS6.0+就已经出现,但一直没有得到广泛应用(私有观点>_<...),究其原因:1、以前果机iPhone的尺寸单一,3.5或4.0英寸,不用过多的适配,即使需要的时候几行代码就可以搞定;2、AutoLayout不如纯代码来的直接,界面化的布局工具让初次使用者摸不着头脑。

AutoLayout——由切图引发的UITableViewCell自定义高度布局的失败!_第1张图片AutoLayout——由切图引发的UITableViewCell自定义高度布局的失败!_第2张图片

但随着果机的硬件尺寸越来越多使得代码里的if...else...也越来越多。最后结果就成了这样:AutoLayout——由切图引发的UITableViewCell自定义高度布局的失败!_第3张图片

当硬着头皮使用xib或storyBoard一段时间后,就会慢慢爱上它。尽管它的简称是SB。

#pragma mark --  进入正题  --

设置合适的布局约束可以让UITableViewCell自己确定高度,这对于内容不同高度就不同的Cell很方便,省去了手动(写代码)计算cell高度的麻烦。先看一下最终的效果图:AutoLayout——由切图引发的UITableViewCell自定义高度布局的失败!_第4张图片

(1)粉红色的Lbl的高度随内容的增多而变高。(2)下面红色和蓝色的Lbl的宽高一定、距离粉红色的Lbl 的距离一定。(3)左右的Btn(萌萌的呆贼)始终位于cell的中间。(4)底部的黑线,两边的黑线位于cell的三个边上。

step_1、创建带有Xib 的UITableViewCell——Text8Cell(勾选Also create XIB file.)将所需控件添加到contentView上:

AutoLayout——由切图引发的UITableViewCell自定义高度布局的失败!_第5张图片
step_2、添加约束:(1)左边的呆贼或者是一个删除按钮什么的。它的约束有4个:距左一定、高一定、宽一定、垂直方向上居中。具体见图:
AutoLayout——由切图引发的UITableViewCell自定义高度布局的失败!_第6张图片     AutoLayout——由切图引发的UITableViewCell自定义高度布局的失败!_第7张图片

这里的距左是指距离cell的contentView(注意选取contentView),如果要距离左边的竖线一定距离最好先确定竖线的约束。若此时有黄色警告,更新一下它的Frame即可。
(2)右边的呆贼或则是编辑按钮什么的。它的约束也有4个:距右一定、高一定、宽一定、垂直方向上居中。这里不再赘述。
(3)粉红色的Lbl是cell主要显示内容的视图。它的约束有三个:距上(contentView)一定、距左(左呆贼)一定、距右一定。PS:别忘了指定改Lbl的Lines是0 。
AutoLayout——由切图引发的UITableViewCell自定义高度布局的失败!_第8张图片
这时候有黄色的警告,先不有管它。接着添加其他视图的约束。
(4)红色的Lbl是关于粉红色Lbl内容的一些描述型文字,它有5个约束:距上、距左、距下一定,宽、高一定。
AutoLayout——由切图引发的UITableViewCell自定义高度布局的失败!_第9张图片
(5)蓝色的Lbl添加和(4)同种类型的约束,距左可换成距右。
(6)底部的黑色imageView有4个约束:距左、距右、距下、和高度一定:
AutoLayout——由切图引发的UITableViewCell自定义高度布局的失败!_第10张图片
(7)左边的竖线imageView有4个约束:距左边、距上边、距下边、和宽度一定:
AutoLayout——由切图引发的UITableViewCell自定义高度布局的失败!_第11张图片
(8)右边竖线添加和(7)同类型的约束。至此cell 的约束添加完毕,接着可在.h文件中关联相应的视图m_numberStringLbl、m_typeStringLbl、m_countStringLbl。
step_3:创建带有XIB的UIViewController并将一个UITableView添加到控制器中: AutoLayout——由切图引发的UITableViewCell自定义高度布局的失败!_第12张图片
TableView的约束可简单的添加为距上下左右一定。指定它的代理为所在VC,并关联一个IBOutlet的属性m_tableView:
AutoLayout——由切图引发的UITableViewCell自定义高度布局的失败!_第13张图片
step_4:在控制器的.m文件中实现代理方法即可:
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return self.m_dataSourceArray.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    Text8Cell *cell = [tableView dequeueReusableCellWithIdentifier:@"Text8Cell"];
    if (!cell) {
        cell = [[[NSBundle mainBundle] loadNibNamed:@"Text8Cell" owner:nil options:nil] lastObject];
    }
    cell.m_numberStringLbl.text = self.m_dataSourceArray[indexPath.row];
    cell.m_typeStringLbl.text = @"test type";
    cell.m_countStringLbl.text = @"test count";
    return cell;
}
这里的m_dataSourceArray是一个简单字符串数组。
step_5:将该VC添加到window ,运行APP查看效果:
AutoLayout——由切图引发的UITableViewCell自定义高度布局的失败!_第14张图片
恩,cell除了没有没有黑色的边框之外其他一切正常。接着可直接使用command+shift+4截取三个图作为cell中三个imageView 的image:
AutoLayout——由切图引发的UITableViewCell自定义高度布局的失败!_第15张图片
在运行APP查看效果:
AutoLayout——由切图引发的UITableViewCell自定义高度布局的失败!_第16张图片 AutoLayout——由切图引发的UITableViewCell自定义高度布局的失败!_第17张图片
这是什么情况???cell的高度肿么变得一样了!!!本来好好的,就给imageView指定了image就成这样了。
问题出在左右两边的Image的切图的高度不同,左边切图的高度大于cell默认的高度。cell在计算自己的高度是参考了该切图的高度,使得在粉色Lbl文本较少的情况下没有得到我们想要的高度。解决办法是让竖线视图的image 的切图的高度小于或等于cell默认的高度(一个2X2的色块儿也许是一个选择)。

你可能感兴趣的:(AutoLayout——由切图引发的UITableViewCell自定义高度布局的失败!)