preface

AutoLayout believes that everyone is familiar,iOS development involves UI layout, there are its figure, the basic usage of many students will, this article will not be introduced, the following is AutoLayout some advanced advanced usage, do a detailed introduction, master these skills,iOS development will get twice the result with half the effort, due to a long length, will be split into Several pages, one by one introduction.

I. This paper focuses on Aspect Ratio

1. Aspect Ratio:

Sets the aspect ratio of the view

2. Usage Scenarios:

When the width of the view is stretched with the width of the screen, the height is automatically stretched proportionally. Leave the aspect ratio of the view unchanged.

3. Aspect Ratio in the constraint interface is as follows:

Ii. Demo Effect:

Iii. Code Examples:

1. Create a new project, add an imageView to the view controller and set an image with 16:9 aspect ratio.

2. Add the following constraints to the imageView.

1.The vertical center of2.Increase the width constraint to be320
3.Set Aspect Ratio to16:9
4.Add top constraintCopy the code

ImgViewWidth: imgViewWidth: imgViewWidth: imgViewWidth: imgViewWidth: imgViewWidth: imgViewWidth: imgViewWidth: imgViewWidth: imgViewWidth: imgViewWidth: imgViewWidth: imgViewWidth: imgViewWidth: imgViewWidth: imgViewWidth: imgViewWidth: imgViewWidth: imgViewWidth: imgViewWidth: imgViewWidth

#import "ViewController.h"

 static CGFloat changeValue = 18;// Record the change value

@interface ViewController(a)
@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) {// Minimum width
        changeValue = 18;
    }else if(_imgViewWidth.constant>320) {// Maximum width
        changeValue = 18;; }}@end

Copy the code

Iv. Summary:

ImgView has a 16:9 aspect ratio, so when the width changes dynamically, its height changes accordingly.

Code address :github.com/CoderZhuXH/…