关于AutoLayout框架Masonry的使用

因为之前做过Android开发，Android的有种布局方式叫做RelativeLayout，使用起来非常灵活。2011年开始接触iOS的时候，发现这种基于坐标的绝对布局方式非常不灵活，所以还是按照Android的RelativeLayout的思想进行，控件的坐标均采用相对布局的关系，比如要实现这个布局：

 

 

使用相对布局思想如下（比较麻烦的地方是需要各种坐标相对位置的计算）

- (void)viewDidLoad {
    [super viewDidLoad];
   
    [_titleLable setText:@"输入您的手机号码"];
   
    //复写父类样式
    [_titleLable setTextColor:[UIColor whiteColor]];
    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent animated:NO];
    UIColor *greenColor = [UIColor colorWithHexString:BACKGROUND_COLOR_GREEN];
    [_topBar setImage:[UIImage imageWithColor:greenColor]];
    [_background setBackgroundColor:greenColor];
    [_line setBackgroundColor:greenColor];
   
    //手机号输入框
    _phoneNoField = [[UITextField alloc] initWithFrame:CGRectMake(30, _topBarHeight+45, _viewWidth-60, 35)];
    [_phoneNoField setTextColor:[UIColor whiteColor]];
    [_phoneNoField setFont:[UIFont fontWithName:@"Helvetica" size:FONT_SIZE_30]];
    [_phoneNoField setClearButtonMode:UITextFieldViewModeWhileEditing];
    [_phoneNoField setKeyboardType:UIKeyboardTypeDecimalPad];
    [_phoneNoField addTarget:self action:@selector(updateBtnState) forControlEvents:UIControlEventEditingChanged];
    UIView *line = [[UIView alloc] initWithFrame:CGRectMake(0, CGRectGetHeight(_phoneNoField.frame)-0.5, CGRectGetWidth(_phoneNoField.frame), 0.5)];
    [line setBackgroundColor:[UIColor whiteColor]];
    [_phoneNoField addSubview:line];
    [self.view addSubview:_phoneNoField];
   
    //验证码按钮
    _verifyButton = [[WMButton alloc] initWithFrame:CGRectMake(_viewWidth-30-110, CGRectGetMaxY(_phoneNoField.frame)+30, 110, CGRectGetHeight(_phoneNoField.frame))];
    [_verifyButton setBackgroundImage:[UIImage imageNamed:@"verify_btn"] forState:UIControlStateNormal];
    [_verifyButton setTitleColor:[UIColor colorWithHexString:FONT_COLOR_LIGHT_GREEN] forState:UIControlStateDisabled];
    [_verifyButton setTitle:@"获取验证码" forState:UIControlStateNormal];
    [self.view addSubview:_verifyButton];
    [_verifyButton setEnabled:NO];
   
    //验证码输入框
    _verifyNoField = [[UITextField alloc] initWithFrame:CGRectMake(30, CGRectGetMinY(_verifyButton.frame), _viewWidth-60-110-20, CGRectGetHeight(_phoneNoField.frame))];
    [_verifyNoField setTextColor:[UIColor whiteColor]];
    [_verifyNoField setClearButtonMode:UITextFieldViewModeWhileEditing];
    [_verifyNoField setKeyboardType:UIKeyboardTypeDecimalPad];
    [_verifyNoField setPlaceholder:@"输入验证码"];
    [_verifyNoField setFont:[UIFont fontWithName:@"Helvetica" size:FONT_SIZE_21]];
    [_verifyNoField addTarget:self action:@selector(updateBtnState) forControlEvents:UIControlEventEditingChanged];
    UIView *line1 = [[UIView alloc] initWithFrame:CGRectMake(0, CGRectGetHeight(_verifyNoField.frame)-0.5, CGRectGetWidth(_verifyNoField.frame), 0.5)];
    [line1 setBackgroundColor:[UIColor whiteColor]];
    [_verifyNoField addSubview:line1];
    [self.view addSubview:_verifyNoField];
   
    //提交按钮
    _loginBtn = [[WMButton alloc] initWithFrame:CGRectMake((_viewWidth-65)/2, CGRectGetMaxY(_verifyNoField.frame)+38, 65, 65)];
    [_loginBtn setBackgroundImage:[UIImage imageNamed:@"login_btn"] forState:UIControlStateNormal];
    [self.view addSubview:_loginBtn];
    [_loginBtn setEnabled:NO];
}

 
 从上面的代码可以看出，每个控件的布局都是根据父控件或兄弟控件的坐标位置和尺寸进行的，这样以后维护会很方便。

 

今天看了一下iOS使用Masonary进行Autolayout布局方式，发现和Android的Relativelayout非常类似，于是试了一下，效果很好:

- (void)viewDidLoad {
   
    [super viewDidLoad];
   
    [self setTitle:@"输入您的手机号码"];
   
    //复写父类样式
    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent animated:NO];
    UIColor *greenColor = [UIColor colorWithHexString:BACKGROUND_COLOR_GREEN];
   
    [_naviBar setBackgroundImage:[UIImage imageWithColor:greenColor] forBarMetrics:UIBarMetricsDefault];
    [_naviBar setShadowImage:[UIImage imageWithColor:greenColor]];
    [_naviBar setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
                                                                     [UIColor whiteColor], NSForegroundColorAttributeName,nil]];
    //增加返回按钮
    WMButton *button = [[WMButton alloc] init];
    [button setImage:[UIImage imageNamed:@"back"] forState:UIControlStateNormal];
    [button addTarget:self action:@selector(dismissView) forControlEvents:UIControlEventTouchUpInside];
    [button sizeToFit];
    UIBarButtonItem *dissmissItem = [[UIBarButtonItem alloc] initWithCustomView:button];
    [self.navigationItem setLeftBarButtonItem:dissmissItem];
   
    [_background setBackgroundColor:greenColor];
   
    //手机号输入框
    _phoneNoField = [[UITextField alloc] init];
    [_phoneNoField setTextColor:[UIColor whiteColor]];
    [_phoneNoField setFont:[UIFont fontWithName:@"Helvetica" size:FONT_SIZE_30]];
    [_phoneNoField setClearButtonMode:UITextFieldViewModeWhileEditing];
    [_phoneNoField setKeyboardType:UIKeyboardTypeDecimalPad];
    [_phoneNoField addTarget:self action:@selector(updateBtnState) forControlEvents:UIControlEventEditingChanged];
    [self.view addSubview:_phoneNoField];
    [_phoneNoField mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view.mas_left).with.offset(30);
        make.top.equalTo(self.view.mas_top).with.offset(45);
        make.size.mas_equalTo(CGSizeMake(_viewWidth-60, 35));
    }];
    UIView *line = [[UIView alloc] init];
    [line setBackgroundColor:[UIColor whiteColor]];
    [_phoneNoField addSubview:line];
    [line mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(_phoneNoField.mas_left);
        make.bottom.equalTo(_phoneNoField.mas_bottom).with.offset(-0.5);
        make.width.equalTo(_phoneNoField.mas_width);
        make.height.equalTo(@0.5);
    }];
   
    //验证码按钮
    _verifyButton = [[WMButton alloc] init];
    [_verifyButton setBackgroundImage:[UIImage imageNamed:@"verify_btn"] forState:UIControlStateNormal];
    [_verifyButton setTitleColor:[UIColor colorWithHexString:FONT_COLOR_LIGHT_GREEN] forState:UIControlStateDisabled];
    [_verifyButton setTitle:@"获取验证码" forState:UIControlStateNormal];
    [self.view addSubview:_verifyButton];
    [_verifyButton setEnabled:NO];
    [_verifyButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.equalTo(_phoneNoField.mas_right);
        make.top.equalTo(_phoneNoField.mas_bottom).with.offset(30);
        make.width.equalTo(@110);
        make.height.equalTo(_phoneNoField.mas_height);
    }];
   
    //验证码输入框
    _verifyNoField = [[UITextField alloc] init];
    [_verifyNoField setTextColor:[UIColor whiteColor]];
    [_verifyNoField setClearButtonMode:UITextFieldViewModeWhileEditing];
    [_verifyNoField setKeyboardType:UIKeyboardTypeDecimalPad];
    [_verifyNoField setPlaceholder:@"输入验证码"];
    [_verifyNoField setFont:[UIFont fontWithName:@"Helvetica" size:FONT_SIZE_24]];
    [_verifyNoField addTarget:self action:@selector(updateBtnState) forControlEvents:UIControlEventEditingChanged];
    [self.view addSubview:_verifyNoField];
    [_verifyNoField mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(_phoneNoField.mas_left);
        make.right.equalTo(_verifyButton.mas_left).and.offset(-20);
        make.bottom.equalTo(_verifyButton.mas_bottom);
        make.height.equalTo(_phoneNoField.mas_height);
    }];
    UIView *line1 = [[UIView alloc] init];
    [line1 setBackgroundColor:[UIColor whiteColor]];
    [_verifyNoField addSubview:line1];
    [line1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(_phoneNoField.mas_left);
        make.bottom.equalTo(_verifyNoField.mas_bottom);
        make.right.equalTo(_verifyNoField.mas_right);
        make.height.equalTo(@0.5);
    }];
   
    //提交按钮
    _loginBtn = [[WMButton alloc] init];
    [_loginBtn setBackgroundImage:[UIImage imageNamed:@"login_btn"] forState:UIControlStateNormal];
    [self.view addSubview:_loginBtn];
    [_loginBtn addTarget:self action:@selector(doLogin) forControlEvents:UIControlEventTouchUpInside];
    [_loginBtn setEnabled:NO];
    [_loginBtn mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.mas_equalTo(self.view.mas_centerX);
        make.top.mas_equalTo(_verifyNoField.mas_bottom).with.offset(38);
        make.size.mas_equalTo(CGSizeMake(65, 65));
    }];
}