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"];
    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的原理，它属于数学的线性规划。最终还是会有一个值的

时间： 2024-10-31 08:20:17

IOS使用Auto Layout中的VFL适配的相关文章

iOS App中UILabel的自定义及在Auto Layout中的使用_IOS

自定义UILabel,接受触摸事件: 复制代码 代码如下: #import <UIKit/UIKit.h>   @interface myLabel : UILabel   @end 复制代码 代码如下: #import "myLabel.h" @implementation myLabel - (id)initWithFrame:(CGRect)frame {     self = [super initWithFrame:frame];     if (self) {

iOS 7 - Auto Layout on iOS Versions prior to 6.0

遇到这个问题的时候,只需要两步就可以搞定. 1. 点击你的xib文件,在界面处理右边栏里选择第一个tab,在里面uncheck User Autolayout这一项 2. 在View as对应的下拉列表里选择iOS6 or earlier. 这样在编译一次就可以保证没有错误了. 第一项完成之后其实就不会出什么错了,但是第二项很重要,否则在console里会出现一对的Context不对的CoreGraphic警告. 欢迎加群互相学习,共同进步.QQ群:iOS: 58099570 | Android

Auto Layout 进阶

引言: Auto Layout是iOS6发布后引入的一个全新的布局特性,其目的是弥补以往autoresizing在布局方面的不足之处,以及未来面对更多尺寸适配时界面布局可以更好的适应.要完全掌握Auto Layout是一件非常消耗精力的事情,需要大量的实践,并且在根本上面,理解其如何使用,如果要全面的介绍Auto Layout和使用场景估计几篇博文都介绍不完,本文希望能将使用Auto Layout的重点和技巧以及注意事项,进行一个介绍.成为学习Auto Layout的一个导航文章. 参考资料:

Auto Layout 入门及使用

引言:           Auto Layout是iOS6发布后引入的一个全新的布局特性,其目的是弥补以往autoresizing在布局方面的不足之处,以及未来应对更多尺寸适配界面时布局可以更好的展示.要完全掌握Auto Layout(以下简称AL)不是一件容易的事情,实践是学习和掌握的根本,并且在根本上面,理解其如何使用,本篇做为AL的入门介绍和功能使用 参考资料: 1:iOS7.0 Xcode5 Auto Layout 备忘录 http://www.cnblogs.com/thefeeli

iOS应用开发中使用Auto Layout来适配不同屏幕尺寸_IOS

简介Auto Layout 是苹果在 Xcode 5 (iOS 6) 中新引入的布局方式,旨在解决 3.5 寸和 4 寸屏幕的适配问题.屏幕适配工作在 iPhone 6 及 plus 发布以后变得更加重要,而且以往的"笨办法"的工作量大幅增加,所以很多人开始学习使用 Auto Layout 技术. 初体验 0. 开发环境 本系列文章的开发环境为: OS X 10.10.3 Xcode Version 6.3.1 (6D1002)1. 新建应用 新建一个 Single View Appl

iOS应用中使用Auto Layout实现自定义cell及拖动回弹_IOS

自定义 cell 并使用 Auto Layout创建文件 我们可以一次性创建 xib 文件和类的代码文件. 新建 Cocoa Touch Class: 设置和下图相同即可: 检查成果 分别选中上图中的 1.2 两处,检查 3 处是否已经自动绑定为 firstTableViewCell,如果没有绑定,请先检查选中的元素确实是 2,然后手动绑定即可. 完成绑定工作 切换一页,如下图进行 Identifier 设置: 新建 Table View Controller 页面 新建一个 Table Vie

a...-怎么用baseadapter将sqlite中的数据库适配到一个fragment里的listview?

问题描述 怎么用baseadapter将sqlite中的数据库适配到一个fragment里的listview? 想用baseadapter添加listview中图片资源,同时通过baseadapter为listview中按钮设置监听事件,有那位好心的大侠帮帮忙! 解决方案 重写一个适配器,把数据库的数据遍历出来 存在一个集合里面,再setAdapter 就行了 解决方案二: 你自少要说下数据库数据是什么样的 你要的adapter需要那些参数 解决方案三: 你自少要说下数据库数据是什么样的 你要的

android-Android开发中遇到的适配问题

问题描述 Android开发中遇到的适配问题 android中同样是1080*1920的分辨率,但是屏幕一个是5英寸一个是5.7英寸,怎么适配 解决方案 其实在实际开发中用到的最多的是用dimens.xml文件来适配各种不同分辨率的手机,通常会有多个文件夹对应不同分辨率的手机屏幕,系统会根据自己的手机分辨率的dpi找到对应的dimens文件夹中的文件从而进行适配. 解决方案二: Android的适配问题android开发中屏幕适配问题android图片适配问题 解决方案三: 推荐用Android

Android开发中LinearLayout布局技巧及layout中drawable属性区别

先介绍drawable属性的区别,这个算是比较简单的,但是还是有一点点的小细节需要进行说明,drawable有五个文件夹,分别为hdpi,ldpi,mdpi,xdpi,xxdpi,这五个文件夹想必大家都知道,其实就是为了适应不同分辨率,由于手机分辨率的不同,因此我们的图片需要适应不同手机的分辨率...hdpi:480x800   mdpi:480x320   ldpi:320x240xdpi:1280x720 xxdpi 1920x1280其实这个数字并不是非常精确的,只是说明每一个阶段都有一个