美文网首页
Masonary三方自动布局

Masonary三方自动布局

作者: 我不白先生 | 来源:发表于2020-11-04 18:17 被阅读0次

    可以引入第三方的库来实现添加约束,Masonry是一套非常优秀的第三方框架,使用方便的语法,只管的语义实现对约束的管理。
    步骤一:添加第三方库

    第三方库的文件可以从Github上下载,直接拖拽到工程中即可。效果如图-1所示:

    image image.png image.png image.png image.png image.png

    yellowView此处可以简化
    第一变


    image.png

    第二变


    image.png
    第三变
    image.png
    接着blueView代码
    image.png

    此处可简化


    image.png
    屏幕效果
    image.png
    需求
    image.png
    image.png
    image.png
    简化

    grayView(1)


    image.png

    grayView(2)


    image.png

    orangeView(1)背景色改成orangeColor


    image.png

    orangeView(2)需求修改�


    image.png
    image.png

    brownView


    image.png

    练习
    屏幕效果


    image.png

    ViewController.m

    #import "ViewController.h"
    #define MAS_SHORTHAND_GLOBALS
    #import "Masonry.h"
    @interface ViewController ()
    @property(nonatomic,strong)UIButton *closeButton;
    @property(nonatomic,strong)UIImageView *logoImageView;
    @property(nonatomic,strong)UITextField *phoneTextField;
    @property(nonatomic,strong)UIButton *codeButton;
    @property(nonatomic,strong)UITextField *codeTextField;
    @property(nonatomic,strong)UIButton *passwordButton;
    @property(nonatomic,strong)UIButton *protocolButton;
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        [self closeButton];
        [self logoImageView];
        [self phoneTextField];
        [self codeButton];
        [self codeTextField];
        [self passwordButton];
        [self protocolButton];
    }
    -(UIButton *)protocolButton{
        if(!_protocolButton){
            _protocolButton= [UIButton buttonWithType:UIButtonTypeSystem];
            NSDictionary *dic = @{
                                  NSFontAttributeName:[UIFont systemFontOfSize:12],
                                  NSForegroundColorAttributeName:[UIColor orangeColor],
                                  //设置下划线可见
                                  NSUnderlineStyleAttributeName:@YES,
                                  //设置下划线颜色
                                  NSUnderlineColorAttributeName:[UIColor orangeColor]
                                  };
            _protocolButton = [UIButton buttonWithType:UIButtonTypeSystem];
            NSAttributedString *title = [[NSAttributedString alloc]initWithString:@"用户协议" attributes:dic];
            [_protocolButton setAttributedTitle:title forState:UIControlStateNormal];
           
            
            UILabel *label = [[UILabel alloc]init];
            label.font = [UIFont systemFontOfSize:12];
            label.text = @"点击登陆,即表示您同意";
            UIStackView *sv = [[UIStackView alloc]init];
            [sv addArrangedSubview:label];
            [sv addArrangedSubview:_protocolButton];
            //设置子视图的排布方式
            sv.axis = UILayoutConstraintAxisHorizontal;
            [self.view addSubview:sv];
            [sv mas_makeConstraints:^(MASConstraintMaker *make) {
                make.centerX.equalTo(0);
                make.bottom.equalTo(-20);
            }];
        }
        return _protocolButton;
    }
    -(UIButton *)passwordButton{
        if(!_passwordButton){
            _passwordButton = [UIButton buttonWithType:UIButtonTypeSystem];
            NSDictionary *dic = @{
                                  NSFontAttributeName:[UIFont systemFontOfSize:12],
                                  NSForegroundColorAttributeName:[UIColor orangeColor],
                                  //设置下划线可见
                                  NSUnderlineStyleAttributeName:@YES,
                                  //设置下划线颜色
                                   NSUnderlineColorAttributeName:[UIColor orangeColor]
                                  };
            _passwordButton = [UIButton buttonWithType:UIButtonTypeSystem];
            NSAttributedString *title = [[NSAttributedString alloc]initWithString:@"密码登陆" attributes:dic];
            [_passwordButton setAttributedTitle:title forState:UIControlStateNormal];
            [self.view addSubview:_passwordButton];
            [_passwordButton mas_makeConstraints:^(MASConstraintMaker *make) {
                make.right.equalTo(-25);
                make.top.equalTo(self.codeButton.mas_bottom).equalTo(30);
            }];
        }
        return _passwordButton;
    }
    -(UITextField *)codeTextField{
        if(!_codeTextField){
            _codeTextField = [[UITextField alloc]init];
            _codeTextField.placeholder = @"输入验证码";
            _codeTextField.keyboardType = UIKeyboardTypePhonePad;
            [self.view addSubview:_codeTextField];
            [_codeTextField mas_makeConstraints:^(MASConstraintMaker *make) {
                make.left.equalTo(self.phoneTextField);
                make.top.equalTo(self.phoneTextField.mas_bottom).offset(24);
                make.right.equalTo(self.codeButton.mas_left).offset(-10);
            }];
            UIView *lineview  = [[UIView alloc]init];
            [self.view addSubview:lineview];
            lineview.backgroundColor = [UIColor grayColor];
            [lineview mas_makeConstraints:^(MASConstraintMaker *make) {
                make.left.equalTo(10);
                make.right.equalTo(-10);
                make.top.equalTo(self.codeTextField.mas_bottom).offset(12);
                make.height.equalTo(1);
            }];
        }
        return _codeTextField;
    }
    -(UIButton *)codeButton{
        if (!_codeButton) {
            _codeButton = [UIButton buttonWithType:UIButtonTypeSystem];
            [_codeButton setBackgroundImage:[UIImage imageNamed:@"验证码框"] forState:UIControlStateNormal];
            [_codeButton setTitle:@"获取验证码" forState:UIControlStateNormal];
            [_codeButton setTitleColor:[UIColor orangeColor] forState:UIControlStateNormal];
            _codeButton.titleLabel.font = [UIFont systemFontOfSize:11];
            [self.view addSubview:_codeButton];
            [_codeButton mas_makeConstraints:^(MASConstraintMaker *make) {
                make.centerY.equalTo(self.codeTextField);
                make.right.equalTo(-25);
                make.height.equalTo(28);
                make.width.equalTo(90);
            }];
        }
        return _codeButton;
    }
    -(UIButton*)closeButton{
        if(!_closeButton){
           _closeButton = [UIButton buttonWithType:UIButtonTypeCustom];
            [_closeButton setBackgroundImage:[UIImage imageNamed:@"ahj"] forState:UIControlStateNormal];
            [_closeButton setBackgroundImage:[UIImage imageNamed:@"ahi"] forState:UIControlStateHighlighted];
            [self.view addSubview:_closeButton];
            [_closeButton mas_makeConstraints:^(MASConstraintMaker *make) {
                make.top.equalTo(24);
                make.right.equalTo(-17);
            }];
        }
        return _closeButton;
    }
    -(UIImageView *)logoImageView{
        if(!_logoImageView){
            _logoImageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"logo"]];
            [self.view addSubview:_logoImageView];
            [_logoImageView mas_makeConstraints:^(MASConstraintMaker *make) {
           
                make.top.equalTo(80);
               make.centerX.equalTo(0);
            }];
        }
        return _logoImageView;
    }
    -(UITextField *)phoneTextField{
        if(!_phoneTextField){
            _phoneTextField = [[UITextField alloc]init];
            _phoneTextField.placeholder = @"输入手机号";
            _phoneTextField.keyboardType = UIKeyboardTypePhonePad;
            [self.view addSubview:_phoneTextField];
            [_phoneTextField mas_makeConstraints:^(MASConstraintMaker *make) {
                make.left.equalTo(25);
                make.right.equalTo(-25);
                make.top.equalTo(self.logoImageView.mas_bottom).offset(30);
            }];
            //第一种给textfeild加下划线
    //        UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"Line"]];
    //        [self.view addSubview:imageView];
    //        [imageView mas_makeConstraints:^(MASConstraintMaker *make) {
    //            make.left.equalTo(10);
    //            make.right.equalTo(-10);
    //            make.top.equalTo(self.phoneTextField.mas_bottom).equalTo(12);
    //        }];
            //第二种创建view制出下划线的视觉效果
            UIView *myview  = [[UIView alloc]init];
            [self.view addSubview:myview];
            myview.backgroundColor = [UIColor grayColor];
            [myview mas_makeConstraints:^(MASConstraintMaker *make) {
                make.left.equalTo(10);
                make.right.equalTo(-10);
                make.top.equalTo(self.phoneTextField.mas_bottom).offset(12);
                make.height.equalTo(1);
            }];
    
        }
      return _phoneTextField;
    }
    @end
    

    相关文章

      网友评论

          本文标题:Masonary三方自动布局

          本文链接:https://www.haomeiwen.com/subject/tzabvktx.html