IOS使用Auto Layout中的VFL适配

做登录页面,之前做都是用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 <UIKit/UIKit.h>

@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:];
//        _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: metrics:nil views:NSDictionaryOfVariableBindings(_leftImgView,_nameLabel,_txtField)]];
    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat: metrics:nil views:NSDictionaryOfVariableBindings(_leftImgView,_bottomLine)]];
    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat: metrics:nil views:NSDictionaryOfVariableBindings(_bottomLine)]];
    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat: metrics:nil views:NSDictionaryOfVariableBindings(_txtField,_bottomLine)]];
    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat: 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: metrics:nil views:views]];
    //设置宽度
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat: metrics:nil views:views]];
    //水平居中
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:headView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier: constant:]];

    //账号
    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: metrics:nil views:NSDictionaryOfVariableBindings(accountView)]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat: 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: metrics:nil views:NSDictionaryOfVariableBindings(passWordView)]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat: 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:];
    loginBtn.backgroundColor=[UIColor colorWithRed:0.992f green:0.318f blue:0.106f alpha:1.00f];
    [self.view addSubview:loginBtn];

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat: metrics:nil views:NSDictionaryOfVariableBindings(passWordView,loginBtn)]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat: 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: metrics:nil views:NSDictionaryOfVariableBindings(titleLabel)]];
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:titleLabel attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier: constant:]];

}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];

}

@end

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

4s

5

5s

6

6+

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