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: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"];
[email protected]"账号";
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-"];
[email protected]"密码";
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];
[email protected]"胖吴货栈发货系统";
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的原理，它属于数学的线性规划。最终还是会有一个值的