iOS AutoLayout进阶(一)Aspect Ratio

前言

AutoLayout相信大家都不陌生,iOS开发中涉及到UI布局的地方,都有它的身影,基本用法很多同学都会,本文就不做介绍,下面就AutoLayout一些进阶高级用法,做详细介绍,掌握好这些技巧,iOS开发将事半功倍,由于篇幅较长,将拆分为几个篇幅,一一介绍.

一. 本篇重点介绍:Aspect Ratio

1. Aspect Ratio:

设置视图的宽高比

2. 使用场景:

视图宽度随着屏幕宽度变化拉伸时,让其高度自动进行等比例拉伸.保持该视图宽高比不变.

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

Aspect Ratio 位置.png

二. Demo效果:

Demo.gif

三. 代码示例:

1.新建工程,在视图控制器中添加一个 imageView,并为其设置一张宽高比为16:9的图片.

2.对imageView添加如下约束.

1.竖向居中
2.增加宽度约束为320
3.设置Aspect Ratio宽高比为16:9
4.增加顶部约束

约束.png

3.分别选中imageView、宽度约束右键脱线生成变量imgView、imgViewWidth
起一个定时器,动态修改其宽度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

四.小结:

由于设置了imgView宽高比为16:9,所以宽度动态变化时,其高度也会根据设置的宽高比做相应变化.

---

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

相关阅读:

iOS AutoLayout进阶(二)Content Hugging Priority
iOS AutoLayout进阶(三)Content Compression Resistance Priority
iOS AutoLayout进阶(四)Content Hugging Priority和Content Compression Resistance Priority综合运用
iOS AutoLayout进阶(五)UITableViewCell自动高度