iOS AutoLayout進階(一)Aspect Ratio

前言

AutoLayout相信你們都不陌生,iOS開發中涉及到UI佈局的地方,都有它的身影,基本用法不少同窗都會,本文就不作介紹,下面就AutoLayout一些進階高級用法,作詳細介紹,掌握好這些技巧,iOS開發將事半功倍,因爲篇幅較長,將拆分爲幾個篇幅,一一介紹.git

一. 本篇重點介紹:Aspect Ratio

1. Aspect Ratio:

設置視圖的寬高比github

2. 使用場景:

視圖寬度隨着屏幕寬度變化拉伸時,讓其高度自動進行等比例拉伸.保持該視圖寬高比不變.佈局

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

Aspect Ratio 位置.png

二. Demo效果:

Demo.gif

三. 代碼示例:

1.新建工程,在視圖控制器中添加一個 imageView,併爲其設置一張寬高比爲16:9的圖片.ui

2.對imageView添加以下約束.atom

1.豎向居中
2.增長寬度約束爲320
3.設置Aspect Ratio寬高比爲16:9
4.增長頂部約束
複製代碼

約束.png

3.分別選中imageView、寬度約束右鍵脫線生成變量imgView、imgViewWidth 起一個定時器,動態修改其寬度imgViewWidth屬性,代碼以下:spa

#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

複製代碼

四.小結:

因爲設置了imgView寬高比爲16:9,因此寬度動態變化時,其高度也會根據設置的寬高比作相應變化.code


代碼地址:github.com/CoderZhuXH/…cdn

相關文章
相關標籤/搜索