Autolayout 基本使用Ⅲ

前言

前兩篇文章已經(jīng)介紹了通過 storyboard 添加 Autolayout 約束。今天我們就結(jié)合上面所介紹到的知識(shí)點(diǎn)做一個(gè)比較常見實(shí)用的案例。學(xué)以致用，并且最好是實(shí)用。個(gè)人認(rèn)為如果所學(xué)的東西沒能發(fā)揮真正的作用，也就完全沒有學(xué)習(xí)的意義。好了，廢話不多說，我們開始今天的案例。

案例 -- 商品展示單元

效果如下

效果圖1

一般來說，標(biāo)題將會(huì)隨數(shù)據(jù)庫數(shù)據(jù)的更改而更改。當(dāng)標(biāo)題行數(shù)增多時(shí)，最外圍的view的高度也必須做到隨之改變。如下圖:

效果圖2

在動(dòng)手實(shí)現(xiàn)之前我們先來了解一下 Autolayout 下 UILabel 的特性。那就是當(dāng)我們指定 UILabel 的寬度之后，當(dāng)內(nèi)容變多時(shí)，UILabel 的高度將會(huì)自動(dòng)伸縮?？赡茏x者在這邊有點(diǎn)疑問，AutoLayout 不是要求約束要完整嗎？我們這里只是指定了寬度而已。其實(shí)不用想很多，系統(tǒng)幫你做了。這里需要注意的是，系統(tǒng)默認(rèn)為 UILabel 設(shè)置行數(shù)為1，超過的內(nèi)容將省略，我們要做到讓其高度隨內(nèi)容增長，所以我們不限制其行數(shù)。方法如下：

UILabel不指定行數(shù)

搞清楚這個(gè)問題之后我們正式開工

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

拖入控件

設(shè)置商品展示 view 的約束

商品展示view的約束

拖線至控制器的view

商品展示view的約束

設(shè)置寬度為控制器view的一半 減去間距（30 左邊20 右邊10）

商品展示view的約束

設(shè)置商品圖片的約束

商品圖片的約束

拖線給商品展示view并設(shè)置為高度等于商品展示view的寬度（實(shí)現(xiàn)圖片正方形）

設(shè)置標(biāo)題label約束

商品圖片的約束

設(shè)置價(jià)格label約束

設(shè)置價(jià)格label約束

設(shè)置銷量label約束

銷量label約束

拖線給價(jià)格label

拖線給價(jià)格label并設(shè)置約束

至此我們的約束就設(shè)置完成了，接下來我們進(jìn)行簡單的美化

美化：設(shè)置圓角

@property (weak, nonatomic) IBOutlet UIImageView *product_img;//商品圖片
@property (weak, nonatomic) IBOutlet UILabel *product_title;//標(biāo)題
@property (weak, nonatomic) IBOutlet UIView *containView;//容器view


//設(shè)置圓角
self.containView.layer.cornerRadius = 8;
self.containView.layer.masksToBounds = YES;

美化：設(shè)置邊框

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

標(biāo)題變化時(shí)高度自適應(yīng)測(cè)試

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    self.product_title.text = @"時(shí)尚運(yùn)動(dòng)背心時(shí)尚運(yùn)動(dòng)背心時(shí)尚運(yùn)動(dòng)背心時(shí)尚運(yùn)動(dòng)背心時(shí)尚運(yùn)動(dòng)背心 ";
} 

效果如一開始展示那般就不再貼圖了，附上兩張橫屏的效果圖。

橫屏效果圖1

橫屏效果圖2