发布于 2016-01-04 22:14:25 | 182 次阅读 | 评论: 0 | 来源: PHPERZ
Masonry jQuery布局插件
Masonry是一 个用来布局的jQuery插件
Masonry是用代码实现自动布局的第三方框架。
使用之前首先要导入框架,以下是具体的代码实现。
1.中心点与父视图相同
#import "ViewController.h"
#import "Masonry.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// [self setView1];
// [self setView2];
//[self setView3];
[self setView4];
}
/**
* 中心点与父视图相同
*/
-(void)setView1{
UIView *mainView = [[UIView alloc] init];
mainView.backgroundColor = [UIColor redColor];
[self.view addSubview:mainView];
[mainView mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(self.view);
make.size.mas_equalTo(CGSizeMake(200, 200));
}];
}
2.距离上下左右边距
/**
* 距离上下左右边距
*/
-(void)setView2{
UIView *mainView = [[UIView alloc] init];
mainView.backgroundColor = [UIColor redColor];
[self.view addSubview:mainView];
[mainView mas_makeConstraints:^(MASConstraintMaker *make) {
//make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(100, 80, 50, 10));
make.left.equalTo(self.view).with.offset(10);
make.right.equalTo(self.view).with.offset(-20);
make.top.equalTo(self.view).with.offset(30);
make.bottom.equalTo(self.view).with.offset(-40);
}];
3.两个视图左右排开间距是10
-(void)setView3{
//左边视图
UIView *rightView = [[UIView alloc] init];
rightView.backgroundColor = [UIColor redColor];
[self.view addSubview:rightView];
//右边视图
UIView *leftView1 = [[UIView alloc] init];
leftView1.backgroundColor = [UIColor greenColor];
[self.view addSubview:leftView1];
[rightView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.mas_equalTo(self.view.mas_centerY);
make.height.mas_equalTo(150);
make.width.mas_equalTo(leftView1.mas_width);
make.left.mas_equalTo(self.view.mas_left).with.offset(10);
make.right.mas_equalTo(leftView1.mas_left).with.offset(-10);
}];
[leftView1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.mas_equalTo(self.view.mas_centerY);
make.height.mas_equalTo(150);
make.width.mas_equalTo(rightView.mas_width);
make.left.mas_equalTo(rightView.mas_right).with.offset(10);
make.right.mas_equalTo(self.view.mas_right).with.offset(-10);
}];
}
4.登录界面
-(void)setView4{
UITextField *accountTextField = [[UITextField alloc] init];
accountTextField.backgroundColor = [UIColor redColor];
accountTextField.placeholder = @"账号";
[self.view addSubview:accountTextField];
UITextField *secretTextField = [[UITextField alloc] init];
secretTextField.backgroundColor = [UIColor greenColor];
secretTextField.placeholder = @"密码";
[self.view addSubview:secretTextField];
UIButton *loginButton = [[UIButton alloc] init];
loginButton.backgroundColor = [UIColor blueColor];
[loginButton setTitle:@"登录" forState:UIControlStateNormal];
[self.view addSubview:loginButton];
[accountTextField mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.view.mas_left).offset(50);
make.right.equalTo(self.view.mas_right).offset(-50);
make.top.equalTo(self.view.mas_top).offset(100);
make.height.mas_equalTo(50);
}];
[secretTextField mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.view.mas_left).offset(50);
make.right.equalTo(self.view.mas_right).offset(-50);
make.top.equalTo(accountTextField.mas_bottom).offset(40);
make.height.mas_equalTo(50);
}];
[loginButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.view.mas_left).offset(100);
make.right.equalTo(self.view.mas_right).offset(-100);
make.top.equalTo(secretTextField.mas_bottom).offset(40);
make.height.mas_equalTo(50);
}];
}
以下为源码连接地址:http://pan.baidu.com/s/1eRnfs8i