前言

AutoLayout相信大家都不陌生,iOS開發(fā)中涉及到UI布局的地方,都有它的身影,基本用法很多同學(xué)都會,本文就不做介紹,下面就AutoLayout一些進(jìn)階高級用法,做詳細(xì)介紹,掌握好這些技巧,iOS開發(fā)將事半功倍,由于篇幅較長,將拆分為幾個(gè)篇幅,一一介紹.

一. 本篇重點(diǎn)介紹:Aspect Ratio

1. Aspect Ratio:

設(shè)置視圖的寬高比

2. 使用場景:

視圖寬度隨著屏幕寬度變化拉伸時(shí),讓其高度自動進(jìn)行等比例拉伸.保持該視圖寬高比不變.

3. Aspect Ratio在約束界面如下位置:

Aspect Ratio 位置.png

二. Demo效果:

Demo.gif

三. 代碼示例:

1.新建工程,在視圖控制器中添加一個(gè) imageView,并為其設(shè)置一張寬高比為16:9的圖片.

2.對imageView添加如下約束.

1.豎向居中
2.增加寬度約束為320
3.設(shè)置Aspect Ratio寬高比為16:9
4.增加頂部約束

約束.png

3.分別選中imageView、寬度約束右鍵脫線生成變量imgView、imgViewWidth
起一個(gè)定時(shí)器,動態(tài)修改其寬度imgViewWidth屬性,代碼如下:

#import "ViewController.h"

 static CGFloat changeValue = -18;//記錄變化值

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *imgView;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *imgViewWidth;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(action) userInfo:nil repeats:YES];
}

-(void)action{
    _imgViewWidth.constant += changeValue;
    if(_imgViewWidth.constant<=150){//最小寬度
        changeValue = 18;
    }else if(_imgViewWidth.constant>320){//最大寬度
        changeValue = -18;;
    }
}

@end

四.小結(jié):

由于設(shè)置了imgView寬高比為16:9,所以寬度動態(tài)變化時(shí),其高度也會根據(jù)設(shè)置的寬高比做相應(yīng)變化.

代碼地址:https://github.com/CoderZhuXH/AutoLayout

相關(guān)閱讀:

iOS AutoLayout進(jìn)階(二)Content Hugging Priority
iOS AutoLayout進(jìn)階(三)Content Compression Resistance Priority
iOS AutoLayout進(jìn)階(四)Content Hugging Priority和Content Compression Resistance Priority綜合運(yùn)用
iOS AutoLayout進(jìn)階(五)UITableViewCell自動高度