关于AutoLayout的框架Masonry的使用

于 2015-05-09 00:18:53 发布
阅读量1k 收藏 1
点赞数
分类专栏： 布局 文章标签： 布局

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

 


 

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

C代码   收藏代码
  1. - (void)viewDidLoad {  
  2.     [super viewDidLoad];  
  3.      
  4.     [_titleLable setText:@"输入您的手机号码"];  
  5.      
  6.     //复写父类样式  
  7.     [_titleLable setTextColor:[UIColor whiteColor]];  
  8.     [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent animated:NO];  
  9.     UIColor *greenColor = [UIColor colorWithHexString:BACKGROUND_COLOR_GREEN];  
  10.     [_topBar setImage:[UIImage imageWithColor:greenColor]];  
  11.     [_background setBackgroundColor:greenColor];  
  12.     [_line setBackgroundColor:greenColor];  
  13.      
  14.     //手机号输入框  
  15.     _phoneNoField = [[UITextField alloc] initWithFrame:CGRectMake(30, _topBarHeight+45, _viewWidth-60, 35)];  
  16.     [_phoneNoField setTextColor:[UIColor whiteColor]];  
  17.     [_phoneNoField setFont:[UIFont fontWithName:@"Helvetica" size:FONT_SIZE_30]];  
  18.     [_phoneNoField setClearButtonMode:UITextFieldViewModeWhileEditing];  
  19.     [_phoneNoField setKeyboardType:UIKeyboardTypeDecimalPad];  
  20.     [_phoneNoField addTarget:self action:@selector(updateBtnState) forControlEvents:UIControlEventEditingChanged];  
  21.     UIView *line = [[UIView alloc] initWithFrame:CGRectMake(0, CGRectGetHeight(_phoneNoField.frame)-0.5, CGRectGetWidth(_phoneNoField.frame), 0.5)];  
  22.     [line setBackgroundColor:[UIColor whiteColor]];  
  23.     [_phoneNoField addSubview:line];  
  24.     [self.view addSubview:_phoneNoField];  
  25.      
  26.     //验证码按钮  
  27.     _verifyButton = [[WMButton alloc] initWithFrame:CGRectMake(_viewWidth-30-110, CGRectGetMaxY(_phoneNoField.frame)+30, 110, CGRectGetHeight(_phoneNoField.frame))];  
  28.     [_verifyButton setBackgroundImage:[UIImage imageNamed:@"verify_btn"] forState:UIControlStateNormal];  
  29.     [_verifyButton setTitleColor:[UIColor colorWithHexString:FONT_COLOR_LIGHT_GREEN] forState:UIControlStateDisabled];  
  30.     [_verifyButton setTitle:@"获取验证码" forState:UIControlStateNormal];  
  31.     [self.view addSubview:_verifyButton];  
  32.     [_verifyButton setEnabled:NO];  
  33.      
  34.     //验证码输入框  
  35.     _verifyNoField = [[UITextField alloc] initWithFrame:CGRectMake(30, CGRectGetMinY(_verifyButton.frame), _viewWidth-60-110-20, CGRectGetHeight(_phoneNoField.frame))];  
  36.     [_verifyNoField setTextColor:[UIColor whiteColor]];  
  37.     [_verifyNoField setClearButtonMode:UITextFieldViewModeWhileEditing];  
  38.     [_verifyNoField setKeyboardType:UIKeyboardTypeDecimalPad];  
  39.     [_verifyNoField setPlaceholder:@"输入验证码"];  
  40.     [_verifyNoField setFont:[UIFont fontWithName:@"Helvetica" size:FONT_SIZE_21]];  
  41.     [_verifyNoField addTarget:self action:@selector(updateBtnState) forControlEvents:UIControlEventEditingChanged];  
  42.     UIView *line1 = [[UIView alloc] initWithFrame:CGRectMake(0, CGRectGetHeight(_verifyNoField.frame)-0.5, CGRectGetWidth(_verifyNoField.frame), 0.5)];  
  43.     [line1 setBackgroundColor:[UIColor whiteColor]];  
  44.     [_verifyNoField addSubview:line1];  
  45.     [self.view addSubview:_verifyNoField];  
  46.      
  47.     //提交按钮  
  48.     _loginBtn = [[WMButton alloc] initWithFrame:CGRectMake((_viewWidth-65)/2, CGRectGetMaxY(_verifyNoField.frame)+38, 65, 65)];  
  49.     [_loginBtn setBackgroundImage:[UIImage imageNamed:@"login_btn"] forState:UIControlStateNormal];  
  50.     [self.view addSubview:_loginBtn];  
  51.     [_loginBtn setEnabled:NO];  
  52. }  

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

 
今天看了一下iOS使用Masonary进行Autolayout布局方式，发现和Android的Relativelayout非常类似，于是试了一下，效果很好:
C代码   收藏代码
  1. - (void)viewDidLoad {  
  2.      
  3.     [super viewDidLoad];  
  4.      
  5.     [self setTitle:@"输入您的手机号码"];  
  6.      
  7.     //复写父类样式  
  8.     [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent animated:NO];  
  9.     UIColor *greenColor = [UIColor colorWithHexString:BACKGROUND_COLOR_GREEN];  
  10.      
  11.     [_naviBar setBackgroundImage:[UIImage imageWithColor:greenColor] forBarMetrics:UIBarMetricsDefault];  
  12.     [_naviBar setShadowImage:[UIImage imageWithColor:greenColor]];  
  13.     [_naviBar setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:  
  14.                                                                      [UIColor whiteColor], NSForegroundColorAttributeName,nil]];  
  15.     //增加返回按钮  
  16.     WMButton *button = [[WMButton alloc] init];  
  17.     [button setImage:[UIImage imageNamed:@"back"] forState:UIControlStateNormal];  
  18.     [button addTarget:self action:@selector(dismissView) forControlEvents:UIControlEventTouchUpInside];  
  19.     [button sizeToFit];  
  20.     UIBarButtonItem *dissmissItem = [[UIBarButtonItem alloc] initWithCustomView:button];  
  21.     [self.navigationItem setLeftBarButtonItem:dissmissItem];  
  22.      
  23.     [_background setBackgroundColor:greenColor];  
  24.      
  25.     //手机号输入框  
  26.     _phoneNoField = [[UITextField alloc] init];  
  27.     [_phoneNoField setTextColor:[UIColor whiteColor]];  
  28.     [_phoneNoField setFont:[UIFont fontWithName:@"Helvetica" size:FONT_SIZE_30]];  
  29.     [_phoneNoField setClearButtonMode:UITextFieldViewModeWhileEditing];  
  30.     [_phoneNoField setKeyboardType:UIKeyboardTypeDecimalPad];  
  31.     [_phoneNoField addTarget:self action:@selector(updateBtnState) forControlEvents:UIControlEventEditingChanged];  
  32.     [self.view addSubview:_phoneNoField];  
  33.     [_phoneNoField mas_makeConstraints:^(MASConstraintMaker *make) {  
  34.         make.left.equalTo(self.view.mas_left).with.offset(30);  
  35.         make.top.equalTo(self.view.mas_top).with.offset(45);  
  36.         make.size.mas_equalTo(CGSizeMake(_viewWidth-60, 35));  
  37.     }];  
  38.     UIView *line = [[UIView alloc] init];  
  39.     [line setBackgroundColor:[UIColor whiteColor]];  
  40.     [_phoneNoField addSubview:line];  
  41.     [line mas_makeConstraints:^(MASConstraintMaker *make) {  
  42.         make.left.equalTo(_phoneNoField.mas_left);  
  43.         make.bottom.equalTo(_phoneNoField.mas_bottom).with.offset(-0.5);  
  44.         make.width.equalTo(_phoneNoField.mas_width);  
  45.         make.height.equalTo(@0.5);  
  46.     }];  
  47.      
  48.     //验证码按钮  
  49.     _verifyButton = [[WMButton alloc] init];  
  50.     [_verifyButton setBackgroundImage:[UIImage imageNamed:@"verify_btn"] forState:UIControlStateNormal];  
  51.     [_verifyButton setTitleColor:[UIColor colorWithHexString:FONT_COLOR_LIGHT_GREEN] forState:UIControlStateDisabled];  
  52.     [_verifyButton setTitle:@"获取验证码" forState:UIControlStateNormal];  
  53.     [self.view addSubview:_verifyButton];  
  54.     [_verifyButton setEnabled:NO];  
  55.     [_verifyButton mas_makeConstraints:^(MASConstraintMaker *make) {  
  56.         make.right.equalTo(_phoneNoField.mas_right);  
  57.         make.top.equalTo(_phoneNoField.mas_bottom).with.offset(30);  
  58.         make.width.equalTo(@110);  
  59.         make.height.equalTo(_phoneNoField.mas_height);  
  60.     }];  
  61.      
  62.     //验证码输入框  
  63.     _verifyNoField = [[UITextField alloc] init];  
  64.     [_verifyNoField setTextColor:[UIColor whiteColor]];  
  65.     [_verifyNoField setClearButtonMode:UITextFieldViewModeWhileEditing];  
  66.     [_verifyNoField setKeyboardType:UIKeyboardTypeDecimalPad];  
  67.     [_verifyNoField setPlaceholder:@"输入验证码"];  
  68.     [_verifyNoField setFont:[UIFont fontWithName:@"Helvetica" size:FONT_SIZE_24]];  
  69.     [_verifyNoField addTarget:self action:@selector(updateBtnState) forControlEvents:UIControlEventEditingChanged];  
  70.     [self.view addSubview:_verifyNoField];  
  71.     [_verifyNoField mas_makeConstraints:^(MASConstraintMaker *make) {  
  72.         make.left.equalTo(_phoneNoField.mas_left);  
  73.         make.right.equalTo(_verifyButton.mas_left).and.offset(-20);  
  74.         make.bottom.equalTo(_verifyButton.mas_bottom);  
  75.         make.height.equalTo(_phoneNoField.mas_height);  
  76.     }];  
  77.     UIView *line1 = [[UIView alloc] init];  
  78.     [line1 setBackgroundColor:[UIColor whiteColor]];  
  79.     [_verifyNoField addSubview:line1];  
  80.     [line1 mas_makeConstraints:^(MASConstraintMaker *make) {  
  81.         make.left.equalTo(_phoneNoField.mas_left);  
  82.         make.bottom.equalTo(_verifyNoField.mas_bottom);  
  83.         make.right.equalTo(_verifyNoField.mas_right);  
  84.         make.height.equalTo(@0.5);  
  85.     }];  
  86.      
  87.     //提交按钮  
  88.     _loginBtn = [[WMButton alloc] init];  
  89.     [_loginBtn setBackgroundImage:[UIImage imageNamed:@"login_btn"] forState:UIControlStateNormal];  
  90.     [self.view addSubview:_loginBtn];  
  91.     [_loginBtn addTarget:self action:@selector(doLogin) forControlEvents:UIControlEventTouchUpInside];  
  92.     [_loginBtn setEnabled:NO];  
  93.     [_loginBtn mas_makeConstraints:^(MASConstraintMaker *make) {  
  94.         make.centerX.mas_equalTo(self.view.mas_centerX);  
  95.         make.top.mas_equalTo(_verifyNoField.mas_bottom).with.offset(38);  
  96.         make.size.mas_equalTo(CGSizeMake(65, 65));  
  97.     }];  
  98. }  
 
转自：http://thierry-xing.iteye.com/blog/2177090
iosdeve
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值