Autolayout 基本使用Ⅲ

Autolayout 基本使用Ⅲ

前言

前两篇文章已经介绍了通过 storyboard 添加 Autolayout 约束。今天我们就结合上面所介绍到的知识点做一个比较常见实用的案例。学以致用，并且最好是实用。个人认为如果所学的东西没能发挥真正的作用，也就完全没有学习的意义。好了，废话不多说，我们开始今天的案例。

案例 -- 商品展示单元

效果如下

效果图1

一般来说，标题将会随数据库数据的更改而更改。当标题行数增多时，最外围的view的高度也必须做到随之改变。如下图:

效果图2

在动手实现之前我们先来了解一下 Autolayout 下 UILabel 的特性。那就是当我们指定 UILabel 的宽度之后，当内容变多时，UILabel 的高度将会自动伸缩。可能读者在这边有点疑问，AutoLayout 不是要求约束要完整吗？我们这里只是指定了宽度而已。其实不用想很多，系统帮你做了。这里需要注意的是，系统默认为 UILabel 设置行数为1，超过的内容将省略，我们要做到让其高度随内容增长，所以我们不限制其行数。方法如下：

UILabel不指定行数

搞清楚这个问题之后我们正式开工

拖入我们界面的控件，并取好名字

拖入控件

设置商品展示 view 的约束

商品展示view的约束

拖线至控制器的view

商品展示view的约束

设置宽度为控制器view的一半 减去间距（30 左边20 右边10）

商品展示view的约束

设置商品图片的约束

商品图片的约束

拖线给商品展示view并设置为高度等于商品展示view的宽度（实现图片正方形）

设置标题label约束

商品图片的约束

设置价格label约束

设置价格label约束

设置销量label约束

销量label约束

拖线给价格label

拖线给价格label并设置约束

至此我们的约束就设置完成了，接下来我们进行简单的美化

美化：设置圆角

@property (weak, nonatomic) IBOutlet UIImageView *product_img;//商品图片
@property (weak, nonatomic) IBOutlet UILabel *product_title;//标题
@property (weak, nonatomic) IBOutlet UIView *containView;//容器view


//设置圆角
self.containView.layer.cornerRadius = 8;
self.containView.layer.masksToBounds = YES;

美化：设置边框

self.containView.layer.borderWidth = 2;
self.containView.layer.borderColor = [[UIColor colorWithRed:0.52 green:0.09 blue:0.07 alpha:1] CGColor];

标题变化时高度自适应测试

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    self.product_title.text = @"时尚运动背心时尚运动背心时尚运动背心时尚运动背心时尚运动背心 ";
} 

效果如一开始展示那般就不再贴图了，附上两张横屏的效果图。

横屏效果图1 横屏效果图2