還是先來看個需求：
由圖可知，這個界面由兩個label和一個imageview組成，imageview是大圖需要按比例顯示，底下的介紹文字可能會很多所以高度也是動態(tài)的，這種組合情況比較簡單所以就不用tableview或者webview之類的視圖控件了，直接用scrollview即可。
下面簡單的鋪設(shè)下這個頁面：
@interface ViewController : UIViewController
@property (nonatomic , weak) IBOutlet UILabel *nameLabel;
@property (nonatomic , weak) IBOutlet UIImageView *photoImageView;
@property (nonatomic , weak) IBOutlet UILabel *contentLabel;
@property (nonatomic , weak) IBOutlet NSLayoutConstraint *imageHeight;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.title = @"教師風(fēng)采";
[self configureUI];
UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithTitle:@"編輯" style:UIBarButtonItemStylePlain target:self action:@selector(editTeacher)];
self.navigationItem.rightBarButtonItem = item;
}
- (void)editTeacher
{
}
- (void)configureUI
{
[_nameLabel setText:@"托雷斯"];
[_contentLabel setText:@"有錢任性，有錢任性，有錢任性，有錢任性，有錢任性，有錢任性，有錢任性，有錢任性，有錢任性，有錢任性，有錢任性，有錢任性，有錢任性，有錢任性，有錢任性，有錢任性，有錢任性，有錢任性，有錢任性，有錢任性，有錢任性，有錢任性，"];
[_photoImageView sd_setImageWithURL:[NSURL URLWithString:@"http://timg.aier360.com/headimg/big/7976f8e79bwfklbtpv.jpg"] completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
CGFloat height = 0;
if (image) {
height = ([UIScreen mainScreen].bounds.size.width - 16) * image.size.height / image.size.width;
}
[UIView animateWithDuration:0.25 animations:^{
_imageHeight.constant = height;
[self updateViewConstraints];
}];
}];
}
@end
這里有個小技巧，在storyboard里，雙擊下圖這個地方，
可以進(jìn)入constrait的詳情，然后可以將這條constraint IBOutlet出來，在controller里就可以根據(jù)圖片的尺寸動態(tài)修改這個constrait的constant來改變布局了。
至于contentLabel的按文字內(nèi)容自動改變高度，只需簡單的幾個步驟：
1、設(shè)置好leading，trailing，width，height的約束
2、設(shè)置lineNumber和lineBreakModel
3、設(shè)置height的priory
小技巧介紹完畢，來看下sb里的約束情況：
都是簡單的固定高度，和根據(jù)parentView約束寬度。
那么先來看看效果吧：
納尼？imageview的寬度明明是根據(jù)scrollview的寬度來約束的，為何scrollview的contentsize還是跟sb里預(yù)設(shè)的一樣？
為了找出原因，我們使用sizeClass查看一下窄屏?xí)r候的情況。
what a fuck！這玩意壓根沒有變嘛！有人可能會說你不是固定了imageview的寬度嗎？是的，但是一般情況下，寬度的約束優(yōu)先級是小于leading和trailing的約束的，即只要父view的寬度一定，子view的leading和trailing設(shè)置了約束，無論你width是多少，子view的寬度都已經(jīng)確定了。（這是我個人的理解，說的不對的地方請大神指導(dǎo)）同時可以看看我并沒有設(shè)置寬度的label。
還是跟原來一樣對不對。后來我查閱資料得知，scrollview里的子view，上下左右的約束對應(yīng)的并不是scrollview的邊，而是scrollview的contentSize的邊。那么如何指定contentSize的寬度，讓它只能上下滾動呢？
腦洞開一下。contentSize的寬度取決于子view的寬度，子view的寬度同時又跟scrollview的寬度有關(guān)，那么我再用一個contentView將所有子view都包裹起來，同時設(shè)置上下左右到scrollview的距離都為0，并且設(shè)置contentView和scrollview的寬度相等，如下圖所示。
還有其他步驟嗎？沒有了，是不是很簡單？sb改動了這么多而代碼卻一句都沒有改，這就是autolayout的魅力。
最后讓我們來看下效果：
搞定收工！scrollview的autolayout這個坑我已經(jīng)爬了半年了，沒有辦法的時候一直使用tableview的hearderview來代替，直到@葉孤城__大神教會了我@property (nonatomic , weak) IBOutlet NSLayoutConstraint *imageHeight;這一招。
希望這篇文章對還在爬坑的小伙伴有所幫助，彎路雖然能夠幫助我們增長經(jīng)驗(yàn)和見識，但是青春畢竟是不等人的。
