做登录页面,之前做都是用frame做,今天想着用Auto Layout中的VFL来做。觉得做的效果还是可以的(自恋一下下)。

首先看下效果图和标记图

自己在做的过程中也遇到了好多问题,不过也一个一个的自己解决了

1.子视图居中的问题

上一博客我也写了,由于指定了视图的宽度高度,想让视图居中对齐,可它就是不能达到预期,最后还是网上找了下才解决的。

2.约束不起作用

引起这个问题的原因很多,其中有一个是犯的最愚蠢的错误,就是添加约束前设置子视图

setTranslatesAutoresizingMaskIntoConstraintsNO.

setTranslatesAutoresizingMaskIntoConstraints＝NO.

setTranslatesAutoresizingMaskIntoConstraints＝NO

重要的事情说三遍

－－－－－－－－－－－－－－－－－－－华丽的分割线－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

上面说的适配,这里说下实现

根据上图有一个账号 一个密码，它们两个只是图片 名称和文本类型不一样其他都一样，所以我就把它封装成一个View。

////  LoginView.h//  Login////  Created by City--Online on 15/9/8.//  Copyright (c) 2015年 City--Online. All rights reserved.//#import 
     
      @interface LoginView : UIView@property (nonatomic,strong) UIImageView *leftImgView;@property (nonatomic,strong) UILabel *nameLabel;@property (nonatomic,strong) UITextField *txtField;@property (nonatomic,strong) UIView *bottomLine;@end
     

////  LoginView.m//  Login////  Created by City--Online on 15/9/8.//  Copyright (c) 2015年 City--Online. All rights reserved.//#import "LoginView.h"@implementation LoginView-(instancetype)init{    self=[super init];    if (self) {                        [self setTranslatesAutoresizingMaskIntoConstraints:NO];        //左边图片        _leftImgView=[[UIImageView alloc]init];        [_leftImgView setTranslatesAutoresizingMaskIntoConstraints:NO];        [self addSubview:_leftImgView];                //名称        _nameLabel=[[UILabel alloc]init];        _nameLabel.font=[UIFont systemFontOfSize:18.0];        _nameLabel.textColor=[UIColor colorWithRed:0.200f green:0.200f blue:0.200f alpha:1.00f];        [_nameLabel setTranslatesAutoresizingMaskIntoConstraints:NO];                [self addSubview:_nameLabel];                //输入文本框        _txtField=[[UITextField alloc]init];        _txtField.font=[UIFont systemFontOfSize:18];//        _txtField.layer.borderWidth=2.0;        [_txtField setTranslatesAutoresizingMaskIntoConstraints:NO];               [self addSubview:_txtField];                //底部线条        _bottomLine=[[UIView alloc]init];        _bottomLine.backgroundColor=[UIColor colorWithRed:0.427f green:0.427f blue:0.427f alpha:1.00f];        [_bottomLine setTranslatesAutoresizingMaskIntoConstraints:NO];        [self addSubview:_bottomLine];    }    return self;}-(void)updateConstraints{    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-35-[_leftImgView(25)]-10-[_nameLabel(40)]-5-[_txtField]-35-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_leftImgView,_nameLabel,_txtField)]];    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[_leftImgView(25)]-10-[_bottomLine(0.5)]-0-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_leftImgView,_bottomLine)]];    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-30-[_bottomLine]-30-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_bottomLine)]];    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-25-[_txtField]-5-[_bottomLine(0.5)]-0-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_txtField,_bottomLine)]];    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[_nameLabel]-0-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_nameLabel)]];    [super updateConstraints];}@end

在界面中布局登录页面:

////  ViewController.m//  Login////  Created by City--Online on 15/9/8.//  Copyright (c) 2015年 City--Online. All rights reserved.//#import "ViewController.h"#import "LoginView.h"@interface ViewController ()@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];        self.view.backgroundColor=[UIColor whiteColor];        //顶部图片    UIImageView *headView=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"MR WU.png"]];    [headView setTranslatesAutoresizingMaskIntoConstraints:NO];    [self.view addSubview:headView];    NSDictionary* views = NSDictionaryOfVariableBindings(headView);    //设置高度    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-90-[headView(100)]" options:0 metrics:nil views:views]];    //设置宽度    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"[headView(100)]" options:0 metrics:nil views:views]];    //水平居中    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:headView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]];        //账号    LoginView *accountView=[[LoginView alloc]init];    accountView.leftImgView.image=[UIImage imageNamed:@"user.png"];    accountView.nameLabel.text=@"账号";    accountView.txtField.secureTextEntry=NO;    [self.view addSubview:accountView];        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[accountView]-0-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(accountView)]];    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[headView]-50-[accountView(66)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(headView,accountView)]];        //密码    LoginView *passWordView=[[LoginView alloc]init];    passWordView.leftImgView.image=[UIImage imageNamed:@"lock-"];    passWordView.nameLabel.text=@"密码";    passWordView.txtField.secureTextEntry=YES;    [self.view addSubview:passWordView];        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[passWordView]-0-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(passWordView)]];    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[accountView]-0-[passWordView(accountView)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(accountView,passWordView)]];        //登录按钮    UIButton *loginBtn=[UIButton buttonWithType:UIButtonTypeRoundedRect];    [loginBtn setTranslatesAutoresizingMaskIntoConstraints:NO];    [loginBtn setTitle:@"登录" forState:UIControlStateNormal];    [loginBtn setTitleColor:[UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.00f] forState:UIControlStateNormal];    loginBtn.titleLabel.font=[UIFont systemFontOfSize:20];    loginBtn.backgroundColor=[UIColor colorWithRed:0.992f green:0.318f blue:0.106f alpha:1.00f];    [self.view addSubview:loginBtn];        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[passWordView]-25-[loginBtn(45)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(passWordView,loginBtn)]];    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-30-[loginBtn]-30-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(loginBtn)]];        UILabel *titleLabel=[[UILabel alloc]init];    [titleLabel setTranslatesAutoresizingMaskIntoConstraints:NO];    titleLabel.text=@"胖吴货栈发货系统";    titleLabel.font=[UIFont systemFontOfSize:14.0];    [titleLabel setTextColor:[UIColor colorWithRed:0.992f green:0.318f blue:0.106f alpha:1.00f]];    [self.view addSubview:titleLabel];    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"[titleLabel]" options:NSLayoutFormatAlignAllCenterX metrics:nil views:NSDictionaryOfVariableBindings(titleLabel)]];    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[titleLabel]-10-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(titleLabel)]];    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:titleLabel attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]];    }- (void)didReceiveMemoryWarning {    [super didReceiveMemoryWarning];    }@end

上面代码中包含了VFL的基本语法,对于更深的语法慢慢的来了解,晒一下做的效果

4s                        

 

5      

5s

6

6+

前面用的autoLayout自动布局,想着是自动布局Frame会不起作用,一直纠结键盘遮挡的问题。在网上找了下,有网友说改变约束,自己的布局也正好是以顶部的图片依次相对布局 ,所以准备改下顶部的约束就会解决键盘遮挡。自己定了一个标记值，判断键盘隐藏顶部约束值为正，否则为负。可是问题出现了，点击文本框后能键盘弹出后视图能向上，但键盘隐藏之后视图并未回到原位，自己又试着删除全部约束重新添加可还是不行，这个问题让我纠结好久。最后问了下小伙伴oliver,改了下frame问题就解决了。我以为用autolayout并未设置frame，怎么会有呢，问了他下，原来适配也是有frame的。这让我想起了autoLayout的原理，它属于数学的线性规划。最终还是会有一个值的