做登錄頁面,之前做都是用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"];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的原理，它屬于數學的線性規劃。最終還是會有一個值的

總結

以上是生活随笔為你收集整理的IOS使用Auto Layout中的VFL适配的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。