基于Masonry的自动布局
最近研究关于Masonry的自动布局，现在来写一些总结：
1
用Masonry写一个类似于弹框的自动布局UI，并以关键帧动画从右侧进入View，点击按钮实现弹框的放大缩小动画（用的是基础动画）
直接上代码：
- (void)viewDidLoad {
[super viewDidLoad];
_myAlter = [[UIView alloc] init];
_myAlter.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:_myAlter];
[self createAnimation];
[_myAlter mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(self.view);
//固定大小
make.size.mas_equalTo(CGSizeMake(300, 200));
}];
//支付密码框，验证码框
_passwordField = [[UITextField alloc] init];
_passwordField.backgroundColor = [UIColor orangeColor];
[_myAlter addSubview:_passwordField];
_codeField = [[UITextField alloc] init];
_codeField.backgroundColor = [UIColor orangeColor];
[_myAlter addSubview:_codeField];
//忘记密码，获取验证码
UIButton *forgetPassword = [UIButton buttonWithType:UIButtonTypeCustom];
forgetPassword.backgroundColor = [UIColor blackColor];
forgetPassword.tag = 1000;
[forgetPassword addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
[_myAlter addSubview:forgetPassword];
UIButton *getCode = [UIButton buttonWithType:UIButtonTypeCustom];
getCode.backgroundColor = [UIColor blackColor];
getCode.tag = 1001;
[getCode addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
[_myAlter addSubview:getCode];
//取消，确定
UIButton *quit = [UIButton buttonWithType:UIButtonTypeCustom];
quit.backgroundColor = [UIColor blackColor];
quit.tag = 1002;
[quit addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
[_myAlter addSubview:quit];
UIButton *sure = [UIButton buttonWithType:UIButtonTypeCustom];
sure.backgroundColor = [UIColor blackColor];
sure.tag = 1003;
[sure addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
[_myAlter addSubview:sure];
//支付密码以及忘记密码的限制
[_passwordField mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(_myAlter.mas_top).with.offset(15);
make.left.equalTo(_myAlter.mas_left).with.offset(15);
make.right.equalTo(forgetPassword.mas_left).with.offset(-10);
make.width.equalTo(forgetPassword.mas_width).multipliedBy(2);//_passwordField的宽度是forgetPassword的两倍
make.height.equalTo(_codeField);
}];
[forgetPassword mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(_myAlter.mas_top).with.offset(15);
//make.left.equalTo(_passwordField.mas_right).with.offset(10);
make.right.equalTo(_myAlter.mas_right).with.offset(-15);
make.height.equalTo(_passwordField);
}];
//短信验证码以及获取验证码的限制
[_codeField mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(_passwordField.mas_bottom).with.offset(15);
make.left.equalTo(_myAlter.mas_left).with.offset(15);
make.right.equalTo(getCode.mas_left).with.offset(-10);
make.width.equalTo(getCode.mas_width).multipliedBy(2);
make.height.equalTo(quit);
}];
[getCode mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(_passwordField.mas_bottom).with.offset(15);
//make.left.equalTo(_codeField.mas_right).with.offset(10);
make.right.equalTo(_myAlter.mas_right).with.offset(-15);
make.height.equalTo(_codeField);
}];
//忘记密码以及获取验证码的限制
[quit mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(_codeField.mas_bottom).with.offset(15);
make.bottom.equalTo(_myAlter.mas_bottom).with.offset(-15);
make.left.equalTo(_myAlter.mas_left).with.offset(15);
make.right.equalTo(sure.mas_left).with.offset(-10);
make.width.equalTo(sure);
make.height.equalTo(_passwordField);
}];
[sure mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(_codeField.mas_bottom).with.offset(15);
make.bottom.equalTo(_myAlter.mas_bottom).with.offset(-15);
make.right.equalTo(_myAlter.mas_right).with.offset(-15);
make.width.equalTo(quit);
make.height.equalTo(quit);
}];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)btnClick:(UIButton*)btn{
switch (btn.tag) {
case 1000:
{
//添加动画
[UIView animateWithDuration:0.5 animations:^{
[_myAlter mas_updateConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(self.view);
make.size.mas_equalTo(CGSizeMake(300*0.5, 200*0.5));
}];
//必须调用此方法，才能出动画效果
[_myAlter layoutIfNeeded];
}];
}
break;
case 1001:
{
//添加动画
[UIView animateWithDuration:0.5 animations:^{
[_myAlter mas_updateConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(self.view);
make.size.mas_equalTo(CGSizeMake(300, 200));
}];
//必须调用此方法，才能出动画效果
[_myAlter layoutIfNeeded];
}];
}
break;
case 1002:
{
MyViewController *my = [[MyViewController alloc] init];
[self presentViewController:my animated:YES completion:^{
}];
}
break;
case 1003:
{
NSLog(@"1003");
}
break;
default:
break;
}
}
//创建动画（关键帧动画）
-(void)createAnimation
{
//frist
CAKeyframeAnimation *entranceAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
[entranceAnimation setDuration:0.8f];
[entranceAnimation setRemovedOnCompletion:YES];
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, nil,[UIScreen mainScreen].bounds.size.width*3/2, 64 + 140);
//1 直线
CGPoint point[2];
point[0] = CGPointMake([UIScreen mainScreen].bounds.size.width*3/2,self.view.center.y);
point[1] = self.view.center;
CGPathAddLines(path, nil, point, 2);
[entranceAnimation setPath:path];
CGPathRelease(path);
[_myAlter.layer addAnimation:entranceAnimation forKey:@"entrancePositon"];
}
以上是创建类似弹框的UI（功能并没用写）大家有兴趣可以自己完善
接下来是关于自动布局的循环引用：
可以不用一个一个的写限制，直接循环写出来，代码如下：
//for循环创建
- (void)forCreate{
__weak typeof(self) weakSelf = self; //对self进行weak化，否则造成循环引用无法释放controller
UIView * tempView = [[UIView alloc]init];
NSInteger count = 10;//设置一排view的个数
NSInteger margin = 10;//设置相隔距离
NSInteger height = 50;//设置view的高度
for (int i = 0; i < count; i ++) {
UIView * view = [[UIView alloc]init];
view.backgroundColor = [UIColor brownColor];
[self.view addSubview:view];
if (i == 0) {
[view mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(weakSelf.view.mas_left).offset(margin);
make.centerY.equalTo(weakSelf.view.mas_centerY);
make.height.mas_equalTo(height);
}];
}
else if (i == count - 1){
[view mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.equalTo(weakSelf.view.mas_right).offset(-margin);
make.left.equalTo(tempView.mas_right).offset(margin);
make.centerY.equalTo(tempView.mas_centerY);
make.height.equalTo(tempView);
make.width.equalTo(tempView);
}];
}
else{
[view mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(tempView.mas_right).offset(margin);
make.centerY.equalTo(tempView.mas_centerY);
make.height.equalTo(tempView);
make.width.equalTo(tempView);
}];
}
tempView = view;
[view layoutIfNeeded];
}
}
新手一枚，有些写的不好的望谅解。
浙公网安备 33010602011771号