iOS_autoLayout_Masonry

時間 2019-11-19

標籤 ios autolayout masonry 欄目 iOS 简体版

原文原文鏈接

概述

　　Masonry是一個輕量級的佈局框架與更好的包裝AutoLayout語法。

　　Masonry有它本身的佈局方式，描述NSLayoutConstraints使佈局代碼更簡潔易讀。

　　Masonry支持iOS和Mac OS X。

　　Masonry github 地址:https://github.com/SnapKit/Masonry

目

錄

對比 NSLayoutConstraints vs Masonrygit

示例 13個Masonry示例(用代碼來講話)github

對比

使用NSLayoutConstraints建立約束

@interface contrastViewController()
@property (nonatomic,strong) UIView *myView;
@end
@implementation contrastViewController
-(void)loadView
{
    [super loadView];
    _myView = [[UIView alloc]init];
    [self.view addSubview:_myView];
    
}
-(void)viewDidLoad
{
    [super viewDidLoad];
    _myView.backgroundColor = [UIColor orangeColor];
    _myView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addConstraints:@[
    
                                [NSLayoutConstraint constraintWithItem:_myView
                                                                 attribute:NSLayoutAttributeTop
                                                                 relatedBy:NSLayoutRelationEqual
                                                                    toItem:self.view
                                                                 attribute:NSLayoutAttributeTop
                                                                multiplier:1.0
                                                                  constant:10],
    
                                [NSLayoutConstraint constraintWithItem:_myView
                                                                 attribute:NSLayoutAttributeLeft
                                                                 relatedBy:NSLayoutRelationEqual
                                                                    toItem:self.view
                                                                 attribute:NSLayoutAttributeLeft
                                                                multiplier:1.0
                                                                  constant:10],
    
                                [NSLayoutConstraint constraintWithItem:_myView
                                                                 attribute:NSLayoutAttributeBottom
                                                                 relatedBy:NSLayoutRelationEqual
                                                                    toItem:self.view
                                                                 attribute:NSLayoutAttributeBottom
                                                                multiplier:1.0
                                                                  constant:-10],
    
                                [NSLayoutConstraint constraintWithItem:_myView
                                                                 attribute:NSLayoutAttributeRight
                                                                 relatedBy:NSLayoutRelationEqual
                                                                    toItem:self.view
                                                                 attribute:NSLayoutAttributeRight
                                                                multiplier:1
                                                                  constant:-10],
    
                                ]];
}
@end

即便這樣一個簡單的示例，所需的代碼量也要很是冗長；數組

另外一個選擇是使用視圖形式語言(VFL)，這個少一點囉嗦；然而ASCLL類型語法有其自身的缺陷，也有些約束難以實現;app

使用Masonry建立相同的約束框架

@interface contrastViewController()
@property (nonatomic,strong) UIView *myView;
@end
@implementation contrastViewController
-(void)loadView
{
    [super loadView];
    _myView = [[UIView alloc]init];
    [self.view addSubview:_myView];
    
}
-(void)viewDidLoad
{
    [super viewDidLoad];
    _myView.backgroundColor = [UIColor orangeColor];
    [_myView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view).offset(10);     //  相對於self.view 頂部 10
        make.left.equalTo(self.view).offset(10);    //  相對於self.view 左邊 10
        make.bottom.equalTo(self.view).offset(-10); //  相對於self.view 底部 -10
        make.right.equalTo(self.view).offset(-10);  //  相對於self.view 右邊 -10
    }];
}
@end

還能夠更簡潔less

@interface contrastViewController()
@property (nonatomic,strong) UIView *myView;
@end
@implementation contrastViewController
-(void)loadView
{
    [super loadView];
    _myView = [[UIView alloc]init];
    [self.view addSubview:_myView];
    
}
-(void)viewDidLoad
{
    [super viewDidLoad];
    _myView.backgroundColor = [UIColor orangeColor];
    UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
    [_myView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.view).insets(padding);
    }];
}
@end

還要注意在第一個例子中咱們必須添加約束到self.view，_myView.translatesAutoresizingMaskIntoConstraints = NO；dom

然而Masonry將自動添加約束到適當的視圖_myView.translatesAutoresizingMaskIntoConstraints = NO;ide

示例

　　 示例 00

@interface _00_BasicViewController ()
@property (nonatomic) UIView *greenView;
@end

@implementation _00_BasicViewController
-(void)loadView
{
    [super loadView];
    _greenView = [[UIView alloc]init];
    [self.view addSubview:_greenView];
}
- (void)viewDidLoad {
    [super viewDidLoad];
    _greenView.backgroundColor = [UIColor greenColor];
    [_greenView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(200, 200));    // 設置大小
        make.center.equalTo(self.view);                 // 居中顯示
    }];
}
@end

　　示例01佈局

@interface _01_BasicViewController ()
@property (nonatomic,strong) UIView *greenView;
@property (nonatomic,strong) UIView *redView;
@property (nonatomic,strong) UIView *blueView;
@end

@implementation _01_BasicViewController

-(void)loadView
{
    [super loadView];
    _greenView = [[UIView  alloc]init];
    _redView   = [[UIView alloc]init];
    _blueView  = [[UIView alloc]init];
    [self.view addSubview:_greenView];
    [self.view addSubview:_redView];
    [self.view addSubview:_blueView];
}
- (void)viewDidLoad {
    [super viewDidLoad];
    [_greenView setBackgroundColor:[UIColor greenColor]];
    [_redView   setBackgroundColor:[UIColor redColor]];
    [_blueView  setBackgroundColor:[UIColor blueColor]];
    [self.greenView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view).offset(10);                  // 頂 等於 View 頂 +10
        make.left.equalTo(self.view).offset(10);                 // 左 等於 View 左 +10
        make.bottom.equalTo(_blueView.mas_top).offset(-10);      // 底 等於 藍色  頂 -10
        make.right.equalTo(_redView.mas_left).offset(-10);       // 右 等於 紅色  右 -10
        make.width.equalTo(_redView);                            // 寬 等於 紅色  寬
        make.height.equalTo(_redView);                           // 高 等於 紅色  高
        make.height.equalTo(_blueView);                          // 高 等於 藍色  高
    }];
    [self.redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(_greenView);                            // 頂 等於 綠色   頂
        make.left.equalTo(_greenView.mas_right).offset(10);      // 左 等於 綠色   右 +10
        make.bottom.equalTo(_greenView);                         // 底 等於 綠色   底
        make.right.equalTo(self.view).offset(-10);               // 右 等於 View  右 -10
        make.width.equalTo(_greenView);                          // 寬 等於 綠色   寬
        make.height.equalTo(_greenView);                         // 高 等於 綠色   高
    }];
    [self.blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(_greenView.mas_bottom).offset(10);      // 頂 等於 綠色   底 +10
        make.left.equalTo(self.view).offset(10);                 // 左 等於 View  左 +10
        make.bottom.equalTo(self.view).offset(-10);              // 底 等於 View  底 -10
        make.right.equalTo(self.view).offset(-10);               // 右 等於 View  右 -10
        make.height.equalTo(_greenView);                         // 高 等於 綠色   高
    }];
}
@end

　　示例02動畫

@interface _02_Update_ConstraintsViewController ()
@property (nonatomic,strong) UIButton *button;
@property (nonatomic,assign) CGSize buttonSize;
@end

@implementation _02_Update_ConstraintsViewController
-(void)loadView
{
    [super loadView];
    _button = [UIButton buttonWithType:UIButtonTypeSystem];
    [self.view addSubview:_button];
    
}
- (void)viewDidLoad {
    [super viewDidLoad];
    [_button setTitle:@"點擊" forState:UIControlStateNormal];
    [_button.layer setBorderColor:[[UIColor greenColor] CGColor]];
    [_button.layer setBorderWidth:3];
    [_button addTarget:self action:@selector(clickWithButton:) forControlEvents:UIControlEventTouchUpInside];
    _buttonSize = CGSizeMake(100, 100);
    [self.view setNeedsUpdateConstraints];
    
    
}
- (void)updateViewConstraints {
    [self.button mas_updateConstraints:^(MASConstraintMaker *make) {// 更新約束
        make.center.equalTo(self.view); // 居中
        make.width.equalTo(@(_buttonSize.width)).priorityLow();     // 寬 等於 100 優先級 低 第一次顯示的時候是100
        make.height.equalTo(@(_buttonSize.height)).priorityLow();   // 高 等於 100 優先級 低 第一次顯示的時候是100
        make.width.lessThanOrEqualTo(self.view);                    // 寬 小於 等於 view  當寬度大於等於 view 需知足此條件
        make.height.lessThanOrEqualTo(self.view);                   // 高 小於 等於 view  當高度大於等於 view 需知足此條件
    }];
    [super updateViewConstraints];
}
- (void)clickWithButton:(UIButton *)button
{
    _buttonSize = CGSizeMake(_buttonSize.width * 1.3, _buttonSize.height * 1.3); // 寬高 乘 1.3
    [self.view setNeedsUpdateConstraints];
    [UIView animateWithDuration:0.4 animations:^{
        [self.view layoutIfNeeded];
    }];
}
@end

　　示例03

@interface _03_Remake_ConstraintsViewController ()
@property (nonatomic, strong) UIButton *movingButton;
@property (nonatomic, assign) BOOL topLeft;
@end

@implementation _03_Remake_ConstraintsViewController

-(void)loadView
{
    [super loadView];
    _movingButton = [UIButton buttonWithType:UIButtonTypeSystem];
    [self.view addSubview:_movingButton];
}
- (void)viewDidLoad {
    [super viewDidLoad];
    [_movingButton setTitle:@"點擊" forState:UIControlStateNormal];
    _movingButton.layer.borderColor = UIColor.greenColor.CGColor;
    _movingButton.layer.borderWidth = 3;
    
    [_movingButton addTarget:self action:@selector(clickWithButton:) forControlEvents:UIControlEventTouchUpInside];
    self.topLeft = YES;
    [self.view setNeedsUpdateConstraints];
}
+ (BOOL)requiresConstraintBasedLayout
{
    return YES;
}
- (void)updateViewConstraints {

    //  重置約束 會把已有的約束刪除從新添加
    [self.movingButton mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.width.equalTo(@(100));
        make.height.equalTo(@(100));
        
        if (self.topLeft) {
            make.left.equalTo(self.view).offset(10);
            make.top.equalTo(self.view).offset(10);
        }
        else {
            make.bottom.equalTo(self.view).offset(-10);
            make.right.equalTo(self.view).offset(-10);
        }
    }];
    [super updateViewConstraints];
}
- (void)clickWithButton:(UIButton *)button
{
    self.topLeft = !self.topLeft;
    [self.view setNeedsUpdateConstraints];
    [self.view updateConstraintsIfNeeded];
    [UIView animateWithDuration:0.4 animations:^{
        [self.view layoutIfNeeded];
    }];
}

@end

　　示例04

@interface _04_Using_ConstantsViewController ()
@property (nonatomic,strong) UIView *purpleView;
@property (nonatomic,strong) UIView *orangeView;
@end

@implementation _04_Using_ConstantsViewController

-(void)loadView
{
    [super loadView];
    self.purpleView = [[UIView alloc]init];
    self.orangeView = [[UIView alloc]init];
    [self.view addSubview:_purpleView];
    [self.view addSubview:_orangeView];
}
- (void)viewDidLoad {
    [super viewDidLoad];
    self.purpleView.backgroundColor = UIColor.purpleColor;
    self.orangeView.backgroundColor = UIColor.orangeColor;
    [self.purpleView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(@20);      // 頂 20 相對於self.View
        make.left.equalTo(@20);     // 左 20
        make.bottom.equalTo(@-20);  // 底 -20
        make.right.equalTo(@-20);   // 右 -20
    }];
    [self.orangeView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.mas_equalTo(CGPointMake(0, 50)); // 中心點Y 相對於self.View Y 50
        make.size.mas_equalTo(CGSizeMake(200, 100)); // 大小 200 100
    }];
}

@end

　　示例05

@interface _05_Composite_EdgesViewController ()
@end
@implementation _05_Composite_EdgesViewController
-(void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    UIView *lastView = self.view;
    for (int i = 0; i < 10; i++) {
        UIView *view = [[UIView alloc]init];
        view.backgroundColor = [self randomColor];
        [self.view addSubview:view];
        [view mas_makeConstraints:^(MASConstraintMaker *make) {
            make.edges.equalTo(lastView).insets(UIEdgeInsetsMake(5, 10, 15, 20));//相對於上一個View 5 10 -15 -20
        }];
        lastView = view;
    }
}
- (UIColor *)randomColor {
    CGFloat hue = ( arc4random() % 256 / 256.0 );  //  0.0 to 1.0
    CGFloat saturation = ( arc4random() % 128 / 256.0 ) + 0.5;  //  0.5 to 1.0, away from white
    CGFloat brightness = ( arc4random() % 128 / 256.0 ) + 0.5;  //  0.5 to 1.0, away from black
    return [UIColor colorWithHue:hue saturation:saturation brightness:brightness alpha:1];
}
@end

　　示例06

@interface _06_Aspect_FitViewController ()
@property (nonatomic,strong) UIView *topView;
@property (nonatomic,strong) UIView *topInnerView;
@property (nonatomic,strong) UIView *bottomView;
@property (nonatomic,strong) UIView *bottomInnerView;
@end

@implementation _06_Aspect_FitViewController
-(void)loadView
{
    [super loadView];
    self.topView            = [[UIView alloc] init];
    self.topInnerView       = [[UIView alloc] init];
    self.bottomView         = [[UIView alloc] init];
    self.bottomInnerView    = [[UIView alloc] init];
    [self.view addSubview:_topView];
    [self.view addSubview:_topInnerView];
    [self.view addSubview:_bottomView];
    [self.view addSubview:_bottomInnerView];
}
- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.topView.backgroundColor            = [UIColor redColor];
    self.bottomView.backgroundColor         = [UIColor blueColor];
    self.topInnerView.backgroundColor       = [UIColor greenColor];
    self.bottomInnerView.backgroundColor    = [UIColor grayColor];
    
    [self.topView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.and.top.equalTo(self.view);     // 左邊、右邊、頂部 等於 self.View
    }];
    [self.bottomView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.and.bottom.equalTo(self.view);  // 左邊、右邊、底部 等於 self.View
        make.top.equalTo(self.topView.mas_bottom);      // 頂部 等於 topView 的 底部
        make.height.equalTo(self.topView);              // 高 等於 topView
                                                        // 結果：上下55分紅
    }];
    [self.topInnerView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.width.equalTo(self.topInnerView.mas_height).multipliedBy(3);   // 寬度是高度的3倍
        make.width.and.height.lessThanOrEqualTo(self.topView);              // 寬度、高度 小於 topView的寬度高度
        make.width.and.height.equalTo(self.topView).with.priorityLow();     // 寬度、高度 等於 topView的寬度高度 優先級 低
        make.center.equalTo(self.topView);                                  // 中心點位置 等於 topView
    }];
    [self.bottomInnerView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.equalTo(self.bottomInnerView.mas_width).multipliedBy(3);// 高度是寬度的3倍
        make.width.and.height.lessThanOrEqualTo(self.bottomView);           // 寬度、高度 小於 bottomView的寬度高度
        make.width.and.height.equalTo(self.bottomView).with.priorityLow();  // 寬度、高度 等於 bottonView的寬度高度 優先級 低
        make.center.equalTo(self.bottomView);                               // 中心點位置 等於 bottonView
    }];
}
@end

　　示例07

@interface _07_Basic_AnimatedViewController ()
@property (nonatomic,strong) UIView *greenView;
@property (nonatomic,strong) UIView *redView;
@property (nonatomic,strong) UIView *blueView;

@property (nonatomic,assign) NSInteger padding;
@property (nonatomic, assign) BOOL animating;
@property (nonatomic, strong) NSMutableArray *animatableConstraints;
@end

@implementation _07_Basic_AnimatedViewController

-(void)loadView
{
    [super loadView];
    self.greenView = [[UIView alloc]init];
    self.redView   = [[UIView alloc]init];
    self.blueView  = [[UIView alloc]init];
    [self.view addSubview:self.greenView];
    [self.view addSubview:self.redView];
    [self.view addSubview:self.blueView];
}
- (void)viewDidLoad {
    [super viewDidLoad];
    _greenView.backgroundColor = UIColor.greenColor;
    _redView.backgroundColor   = UIColor.redColor;
    _blueView.backgroundColor  = UIColor.blueColor;
    
    NSInteger padding = self.padding = 10;
    _animatableConstraints = [NSMutableArray array];
    UIEdgeInsets paddingInsets = UIEdgeInsetsMake(_padding,_padding,_padding,_padding); // 一開始 green,red,blue的尺寸 再經過約束來改變
    [_greenView mas_makeConstraints:^(MASConstraintMaker *make) {
        // 添加約束的同時添加到數組
        [_animatableConstraints addObjectsFromArray:@[
                make.edges.equalTo(self.view).insets(paddingInsets).priorityLow(), // 優先級低
                make.bottom.equalTo(_blueView.mas_top).offset(-padding),    // green bottom 相對 blue top -10
        ]];
        make.size.equalTo(_redView); // 大小 = redView
        make.height.equalTo(_blueView); // 高 = blue
    }];
    [_redView mas_makeConstraints:^(MASConstraintMaker *make) {
        // 添加約束的同時添加到數組
        [_animatableConstraints addObjectsFromArray:@[
            make.edges.equalTo(self.view).insets(paddingInsets).priorityLow(), // 優先級低
            make.left.equalTo(_greenView.mas_right).offset(padding), // left 紅色 green right  10
            make.bottom.equalTo(_blueView.mas_top).offset(-padding), // bottom  藍色 top -10
        ]];
        
        make.size.equalTo(_greenView); // 大小 = green
        make.height.equalTo(_blueView.mas_height); // 高 = blue
    }];
    [_blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        // 添加約束的同時添加到數組
        [self.animatableConstraints addObjectsFromArray:@[
            make.edges.equalTo(self.view).insets(paddingInsets).priorityLow(), // 優先級低
        ]];
        make.height.equalTo(_greenView);
    }];
    [self.view layoutIfNeeded];
    
    // 能夠註釋此部分，查看沒有動畫時的效果
    if (self.view) {
        _animating = YES;
       [self animateWithInvertedInsets:NO];
    }
}

- (void)animateWithInvertedInsets:(BOOL)invertedInsets {
    if (!_animating) return; // 是否須要動畫
    NSInteger padding = invertedInsets ? 100 : _padding; // Yes 就縮小100 否 10
    UIEdgeInsets paddingInsets = UIEdgeInsetsMake(padding, padding, padding, padding);
    for (MASConstraint *constraint in _animatableConstraints) {
        constraint.insets = paddingInsets;
    }
    [UIView animateWithDuration:1 animations:^{
        [self.view layoutIfNeeded];
    } completion:^(BOOL finished) {
        [self animateWithInvertedInsets:!invertedInsets]; // 取相反值無限循環執行動畫
    }];
}
@end

　　示例08

@interface _08_Bacony_LabelsViewController ()
@property (nonatomic,strong) UILabel *longLabel;
@property (nonatomic,strong) UILabel *shortLabel;
@property (nonatomic,strong) UILabel *contentLable;
@end

@implementation _08_Bacony_LabelsViewController
- (void)loadView
{
    [super loadView];
    _longLabel  = [[UILabel alloc]init];
    _shortLabel = [[UILabel alloc]init];
    _contentLable = [[UILabel alloc]init];
    [self.view addSubview:_longLabel];
    [self.view addSubview:_shortLabel];
    [self.view addSubview:_contentLable];
    
}
- (void)viewDidLoad {
    [super viewDidLoad];
    self.title = @"08_Bacony Labels";
    _longLabel.numberOfLines = 0;
    _longLabel.font =[UIFont systemFontOfSize:13];
    _longLabel.backgroundColor = [UIColor redColor];
    _longLabel.textColor = [UIColor darkGrayColor];
    _longLabel.lineBreakMode = NSLineBreakByTruncatingTail;
    _longLabel.text = @"Bacon ipsum dolor sit amet spare ribs fatback kielbasa salami, tri-tip jowl pastrami flank short loin rump sirloin. Tenderloin frankfurter chicken biltong rump chuck filet mignon pork t-bone flank ham hock.";
    _shortLabel.numberOfLines = 1;
    _shortLabel.textColor = [UIColor purpleColor];
    _shortLabel.backgroundColor = [UIColor yellowColor];
    _shortLabel.lineBreakMode = NSLineBreakByTruncatingTail;
    _shortLabel.text = @"Bacon";
    
    _contentLable.numberOfLines = 0;
    _contentLable.font =[UIFont systemFontOfSize:13];
    _contentLable.backgroundColor = [UIColor greenColor];
    _contentLable.textColor = [UIColor darkGrayColor];
    _contentLable.lineBreakMode = NSLineBreakByTruncatingTail;
    _contentLable.text = @"楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客楓子的博客";
    // 只設置left top
    [_longLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view).offset(10);
        make.top.equalTo(self.view).offset(10);
    }];
    // 只設置 centerY right
    [_shortLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(_longLabel); //
        make.right.equalTo(self.view).offset(-10);
    }];
    // top left right 根據文字多少自動計算高度
    [_contentLable mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(_longLabel.mas_bottom).offset(10);
        make.left.equalTo(@10);
        make.right.equalTo(self.view).offset(-10);
    }];
}
-(void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];
    CGFloat width = CGRectGetMinX(self.shortLabel.frame)-10;
    width -= CGRectGetMinX(self.longLabel.frame);
    self.longLabel.preferredMaxLayoutWidth = width;
}
@end

　　示例09

@interface _09_UIScrollViewViewController ()
@property (nonatomic,strong) UIScrollView *scrollView;
@property (nonatomic,strong) UIView       *contentView;
@end

@implementation _09_UIScrollViewViewController
-(void)loadView
{
    [super loadView];
    _scrollView = [[UIScrollView alloc]init];
    _contentView = [[UIView alloc]init];
    [self.view addSubview:_scrollView];
    [self.scrollView addSubview:_contentView];
}
- (void)viewDidLoad {
    [super viewDidLoad];
    self.title = @"09_UIScrollView";
    _scrollView.backgroundColor = [UIColor grayColor];
    [_scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.view); // self.view同樣大小
    }];
    _contentView.backgroundColor = [UIColor greenColor];
    [_contentView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(_scrollView); // 大小   = _scrollView
        make.width.equalTo(_scrollView); // width  = _scrollView
    }];
    
    UIView *lastView;
    CGFloat height = 25;
    
    for (int i = 0; i < 10; i++) {
        UIView *view = [[UIView alloc]init];
        view.backgroundColor = [self randomColor];
        [_contentView addSubview:view];
        // 點擊 改變透明度
        UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(singleTap:)];
        [view addGestureRecognizer:singleTap];
        
        [view mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(lastView ? lastView.mas_bottom : @0); // 第一個View top = 0;
            make.left.equalTo(@0); // left 0
            make.width.equalTo(_contentView); // width = _contentView;
            make.height.equalTo(@(height)); // heinght = height
        }];
        
        height += 25; // += 25;
        lastView = view;
    }
    
    [_contentView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(lastView); // bottom =  lastView
    }];
    
}

- (UIColor *)randomColor {
    CGFloat hue = ( arc4random() % 256 / 256.0 );  //  0.0 to 1.0
    CGFloat saturation = ( arc4random() % 128 / 256.0 ) + 0.5;  //  0.5 to 1.0, away from white
    CGFloat brightness = ( arc4random() % 128 / 256.0 ) + 0.5;  //  0.5 to 1.0, away from black
    return [UIColor colorWithHue:hue saturation:saturation brightness:brightness alpha:1];
}

- (void)singleTap:(UITapGestureRecognizer*)sender {
    [sender.view setAlpha:sender.view.alpha / 1.20]; // To see something happen on screen when you tap :O
    [self.scrollView scrollRectToVisible:sender.view.frame animated:YES];
};

　　示例10

static CGFloat const kArrayExampleIncrement = 10.0;
@interface _10_ArrayViewController ()
@property (nonatomic,strong) UIView   *line;
@property (nonatomic,strong) UIButton *raiseButton;
@property (nonatomic,strong) UIButton *centerButton;
@property (nonatomic,strong) UIButton *lowerButton;

@property (nonatomic, assign) CGFloat offset;
@property (nonatomic, strong) NSArray *buttonViews;
@end

@implementation _10_ArrayViewController
-(void)loadView
{
    [super loadView];
    _line         = [[UIView alloc]init];
    _raiseButton  = [UIButton buttonWithType:UIButtonTypeSystem];
    _centerButton = [UIButton buttonWithType:UIButtonTypeSystem];
    _lowerButton  = [UIButton buttonWithType:UIButtonTypeSystem];
    
    [self.view addSubview:_line];
    [self.view addSubview:_raiseButton];
    [self.view addSubview:_centerButton];
    [self.view addSubview:_lowerButton];
}
- (void)viewDidLoad {
    [super viewDidLoad];
    _line.backgroundColor = [UIColor redColor];
    [_raiseButton setTitle:@"Raise" forState:UIControlStateNormal];
    [_centerButton setTitle:@"Center" forState:UIControlStateNormal];
    [_lowerButton setTitle:@"Lower" forState:UIControlStateNormal];
    [_raiseButton addTarget:self action:@selector(raiseAction) forControlEvents:UIControlEventTouchUpInside];
    [_centerButton addTarget:self action:@selector(centerAction) forControlEvents:UIControlEventTouchUpInside];
    [_lowerButton addTarget:self action:@selector(lowerAction) forControlEvents:UIControlEventTouchUpInside];
    // 添加跟中線，方便查看按鈕的移動
    [_line mas_makeConstraints:^(MASConstraintMaker *make) {
        make.width.equalTo(self.view);
        make.height.equalTo(@1);
        make.center.equalTo(self.view);
    }];
    [_raiseButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view).with.offset(10.0);
    }];
    
    [_centerButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.view);
    }];
    
    [_lowerButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.equalTo(self.view).with.offset(-10);
    }];
    self.buttonViews = @[_raiseButton, _lowerButton, _centerButton];
}
- (void)centerAction {
    self.offset = 0.0;
}

- (void)raiseAction {
    self.offset -= kArrayExampleIncrement;
}

- (void)lowerAction {
    self.offset += kArrayExampleIncrement;
}

- (void)setOffset:(CGFloat)offset {
    _offset = offset;
    [self.view setNeedsUpdateConstraints];
    [UIView animateWithDuration:0.2 animations:^{
        [self.view layoutIfNeeded];
    }];
}
- (void)updateViewConstraints {
    // 同時更新多個按鈕的約束
    [self.buttonViews mas_updateConstraints:^(MASConstraintMaker *make) {
        make.baseline.equalTo(self.view.mas_centerY).with.offset(self.offset); // buttonViews的底線
    }];
    [super updateViewConstraints];
    
}

@end

　　示例11

@interface _11_Attribute_ChainingViewController ()
@property (nonatomic,strong) UIView *greenView;
@property (nonatomic,strong) UIView *redView;
@property (nonatomic,strong) UIView *blueView;
@end

@implementation _11_Attribute_ChainingViewController

-(void)loadView
{
    [super loadView];
    _greenView = [[UIView alloc]init];
    _redView   = [[UIView alloc]init];
    _blueView  = [[UIView alloc]init];
    [self.view addSubview:_greenView];
    [self.view addSubview:_redView];
    [self.view addSubview:_blueView];
    
}
- (void)viewDidLoad {
    [super viewDidLoad];
    UIEdgeInsets padding = UIEdgeInsetsMake(15, 10, 15, 10);
    _greenView.backgroundColor = UIColor.greenColor;
    [_greenView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.and.left.equalTo(self.view).insets(padding);   // 頂部15 左邊 10
        make.bottom.equalTo(_blueView.mas_top).insets(padding); // 底部與藍色 15
        make.width.equalTo(_redView.mas_width);                 // 寬度與紅色相等
        make.height.equalTo(@[_redView, _blueView]);            // 高度與紅藍相等
    }];
    _redView.backgroundColor = UIColor.redColor;
    [_redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.and.right.equalTo(self.view).insets(padding);  // 頂部15 右邊 10
        make.left.equalTo(_greenView.mas_right).insets(padding);// 左邊與綠色  10
        make.bottom.equalTo(_blueView.mas_top).insets(padding); // 底部與藍色  15
        make.width.equalTo(_greenView.mas_width);               // 寬度與紅色相等
        make.height.equalTo(@[_greenView, _blueView]);          // 高度與綠藍相等
    }];
    _blueView.backgroundColor = UIColor.blueColor;
    [_blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(_greenView.mas_bottom).insets(padding);  // 頂部綠色 15
        make.left.right.and.bottom.equalTo(self.view).insets(padding); // 左邊 10 右邊 10 底部 15
        make.height.equalTo(@[_greenView, _redView]);  // 高度與紅綠相等
    }];
}
@end

　　示例12

@interface _12_Layout_GuidesViewController ()
@property (nonatomic,strong) UIView *topView;
@property (nonatomic,strong) UIView *bottomView;
@end

@implementation _12_Layout_GuidesViewController
-(void)loadView
{
    [super loadView];
    _topView    = [[UIView alloc]init];
    _bottomView = [[UIView alloc]init];
    [self.view addSubview:_topView];
    [self.view addSubview:_bottomView];
}
- (void)viewDidLoad {
    [super viewDidLoad];
    _topView.backgroundColor = UIColor.greenColor;
    [_topView mas_makeConstraints:^(MASConstraintMaker *make) {
        UIView *topLayoutGuide = (id)self.topLayoutGuide; //顯示屏幕內容的垂直程度最高,使用自動佈局的約束。(只讀)
        make.top.equalTo(topLayoutGuide.mas_bottom);
        make.left.equalTo(self.view);
        make.right.equalTo(self.view);
        make.height.equalTo(@40);
    }];
    _bottomView.backgroundColor = UIColor.redColor;
    [_bottomView mas_makeConstraints:^(MASConstraintMaker *make) {
        UIView *bottomLayoutGuide = (id)self.bottomLayoutGuide;
        make.bottom.equalTo(bottomLayoutGuide.mas_top);
        make.left.equalTo(self.view);
        make.right.equalTo(self.view);
        make.height.equalTo(@40);
    }];
}
@end

相關標籤/搜索

iOS

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。