因为之前做过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));
}];
}
mark一下
相关推荐
Masonry是一个基于AutoLayout的轻量级框架，它提供了一种更加简洁的语法来设置约束，使得自动布局更加易读、易用。 1. **AutoLayout**： AutoLayout是Apple引入的一种布局机制，用于在各种屏幕尺寸和方向下保持...
在这个名为"Evenly-Spacing-Blocks-With-Autolayout-Masonry-Storyboard-"的项目中，我们将深入探讨如何结合使用`Storyboard`、`AutoLayout`和`Masonry`来创建一个具有均匀间距的块状布局。 首先，`AutoLayout`是...
通过使用 Masonry，开发者可以更高效地处理复杂的布局问题，减少因 AutoLayout 导致的代码复杂性。这个框架已经在许多大型项目中得到验证，是 iOS 开发者值得信赖的 AutoLayout 封装工具。下载并研究 "Masonry-...
然而，AutoLayout的原生API在使用时可能会显得复杂，这就催生了第三方库的出现，其中Masonry就是一款备受开发者喜爱的解决方案。本文将深入探讨Masonry的特点、优势以及如何在项目中应用。 Masonry，作为一个开源的...
在本文中，我们将深入探讨Masonry的基本使用方法，并通过"MasonryDemo.zip"中的示例代码，帮助你更好地理解和应用这个框架。 1. **Masonry简介** Masonry是基于Objective-C的，同时也支持Swift的AutoLayout库。它...
Masonry是一个轻量级的第三方布局框架，它的主要目标是简化AutoLayout的使用，提供更加优雅和简洁的API。Masonry通过引入自己的描述语法和链式语法，极大地提高了代码的可读性和易用性，使得开发者可以更高效地创建...
Masonry是由Jason Creighton创建的，它基于Apple的AutoLayout框架，但提供了更简洁的API，让开发者能够用链式语法来设置约束，大大提高了代码的可读性和可维护性。相比于传统的NSLayoutConstraint方式，Masonry的...
Masonry是一个轻量级的布局框架，拥有自己的描述语法，采用更优雅的链式语法封装自动布局，简洁明了并具有高可读性，而且同时支持 iOS 和 Max OS X。Masonry是一个用代码写iOS或OS界面的库，可以代替Auto layout。
在iOS开发中，想要模仿QQ空间的界面布局，可以利用AutoLayout和Masonry框架来实现。本文将深入探讨这两个技术及其在创建类似QQ空间界面中的应用。 AutoLayout是Apple引入的一种布局系统，用于在iOS和OS X上处理用户...
Masonry是一个第三方的AutoLayout框架，它通过链式语法大大简化了界面布局的代码，使得布局过程更加简洁、易读。本教程将介绍Masonry的入门及几种常用方法。 首先，Masonry的核心理念是基于“约束”的编程，它通过...
- Masonry是一个轻量级的布局框架，它适用于iOS和OSX平台，旨在简化Auto Layout的使用。 - 该框架采用链式语法，提高代码的可读性和简洁性，方便开发者快速构建复杂的布局。 2. **Masonry的核心方法** - `mas_...
Masonry 是一个强大的 AutoLayout 框架，它简化了 iOS 自动布局的代码编写过程。在传统的 AutoLayout 中，我们通常需要编写大量的 NSLayoutConstraint 代码来定义视图之间的约束关系。而 Masonry 提供了一种链式语法...
Masonry布局框架是iOS开发中一个非常实用的第三方库，用于简化AutoLayout的代码编写，提高了布局效率并增强了代码的可读性。在早期的iOS开发中，开发者通常使用xib或storyboard文件来设计界面布局，或者依赖于...
Masonry AutoLayout框架 UITableView+FDTemplateLayoutCell cell自适应高度框架 SDWebImage 只是用了UIImageView + WebCache 使用说明 克隆项目后，需要使用Cocoapods updte/install 部分图片素材来源于融云...
总的来说，这个项目涉及了iOS开发中的AutoLayout和Masonry使用，以及可能的Java后端交互。学习这个项目，开发者可以深入理解Masonry如何简化界面布局，以及如何独立实现瀑布流布局。同时，如果项目包含了Java代码，...
在UI设计上，`Masonry`是一个布局约束库，它简化了AutoLayout的代码，使开发者能够更灵活地控制视图的布局。 在MVVM（Model-View-ViewModel）架构中，`ReactiveCocoa`或者`RxSwift`是非常重要的框架。它们引入了...
《iOS开发：Masonry框架的使用指南》 在iOS应用开发中，布局是构建用户界面的关键环节。Masonry是一款强大的自动布局库，它基于NSLayoutConstraint，提供了简洁的API，使得开发者能够更方便地进行界面布局。本文将...
4. **Masonry布局库**：Masonry是iOS开发中一个强大的AutoLayout框架，用于进行视图的约束布局。在K线图中，Masonry可以帮助开发者轻松地处理屏幕尺寸的变化，确保每个K线元素在不同屏幕尺寸下都能正确对齐和显示。 ...