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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/296466.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

左手菲尔兹右手突破奖，这个中国女婿其实是英国贵族？拿到300万奖金后他这样说……...

左手菲尔兹右手突破奖，这个中国女婿其实是英国贵族？拿到300万奖金后他这样说……...

全世界只有3.14 % 的人关注了爆炸吧知识如果说科学界里高大上的奖项&#xff0c;你还是只能想到诺贝尔&#xff0c;菲尔兹&#xff0c;那可能真的是out了。毕竟现在都0202年了。少年&#xff0c;突破奖了解一下&#xff1f;作为有马云&#xff0c;马化腾&#xff0c;还有俄罗斯…
阅读更多...
理财平台架构分析

理财平台架构分析

一个理财平台可以从不同的维度来看。对于一个消费者来说&#xff0c;最宏观的看法&#xff0c;P2P公司的理财平台相当于一个中介&#xff0c;一边用于对接用户&#xff0c;一边用于对接产品提供商。这个中介系统负责用户和产品提供者之间的交互。对于一个P2P理财公司来说&#…
阅读更多...
mysql数据压缩存储_压缩文本，然后存储在mysql数据库中

mysql数据压缩存储_压缩文本，然后存储在mysql数据库中

I am developing a web application using php and MySQL. I am compressing the text using gzcompress() php function before storing in MySQL database / storing compressed form of text in database. My Question is that is this OK? to store compressed form? Or …
阅读更多...
Abp VNext 集成sharding-core 分表分库

Abp VNext 集成sharding-core 分表分库

ShardingCore 易用、简单、高性能、普适性&#xff0c;是一款扩展针对efcore生态下的分表分库的扩展解决方案,支持efcore2的所有版本,支持efcore2的所有数据库、支持自定义路由、动态路由、高性能分页、读写分离的一款组件&#xff0c;如果你喜欢这组件或者这个组件对你有帮助请…
阅读更多...
引热议！多所高校明文规定：不再给部分全日制研究生安排宿舍

引热议！多所高校明文规定：不再给部分全日制研究生安排宿舍

全世界只有3.14 % 的人关注了爆炸吧知识本文转自募格学术。近日&#xff0c;高校宿舍问题频发。矛盾点基本都集中在宿舍加塞人&#xff0c;宿舍环境不好&#xff0c;为了迎接新生强制老生搬宿舍但宿舍环境一言难尽等...... 不过好歹也都算解决了研究生住宿的问题。但近日&#…
阅读更多...
Unity 游戏开发技巧集锦之使用忍者飞镖创建粒子效果

Unity 游戏开发技巧集锦之使用忍者飞镖创建粒子效果

Unity 游戏开发技巧集锦之使用忍者飞镖创建粒子效果 使用忍者飞镖创建粒子效果 游戏中&#xff0c;诸如烟、火、水滴、落叶等粒子效果&#xff0c;都可以使用粒子系统&#xff08;particle system&#xff09;来实现。例如&#xff0c;《明朝传奇》中的篝火&#xff0c;如图2-3…
阅读更多...
落在我手里，今天你能嫁出去算我输！

落在我手里，今天你能嫁出去算我输！

1 今天你能嫁出去算我输▼2 好像拍到了某些不可描述的画面▼3 猫猫&#xff1a;人呢&#xff1f;掉哪儿了&#xff1f;▼4 像极了下决心运动的你▼5 据最新研究欲火焚身这个词是很有科学依据的▼6 按这么说至少能保证说上话▼7 这不是普通狗仔了已经是海狗仔了▼你点的每…
阅读更多...
记一次 .NET 某资讯论坛 CPU爆高分析

记一次 .NET 某资讯论坛 CPU爆高分析

大概有11天没发文了&#xff0c;真的不是因为懒&#xff0c;本想前几天抽空写&#xff0c;不知道为啥最近求助的朋友比较多&#xff0c;一天都能拿到2-3个求助dump&#xff0c;晚上回来就是一顿分析&#xff0c;有点意思的是大多朋友自己都分析了几遍或者公司多年的牛皮藓问题&…
阅读更多...
内存调试技巧

内存调试技巧

内存调试技巧 2007 年 6 月 21 日 本文将带您了解一些良好的和内存相关的编码实践&#xff0c;以将内存错误保持在控制范围内。内存错误是 C 和 C 编程的祸根&#xff1a;它们很普遍&#xff0c;认识其严重性已有二十多年&#xff0c;但始终没有彻底解决&#xff0c;它们可能严…
阅读更多...
数学课本上的几大变态之处

数学课本上的几大变态之处

全世界只有3.14 % 的人关注了爆炸吧知识数学课本上的几大变态--完--
阅读更多...
使用Redis set 解决数据的唯一性问题

使用Redis set 解决数据的唯一性问题

前言最近遇到一个问题&#xff0c;就是接收第三方数据的时候&#xff0c;类似这种直播数据&#xff0c;由于业务的缘故&#xff0c;导致对方给的数据每次都是全量的&#xff0c;而且请求很频繁&#xff0c;有时候一秒好几十次。直播数据一般都是刷刷刷的&#xff0c;这个大家或…
阅读更多...
mysql集群从节点无法启动_一次galera cluster集群故障节点无法启动问题排查

mysql集群从节点无法启动_一次galera cluster集群故障节点无法启动问题排查

现象环境&#xff1a;Server version: 10.0.25-MariaDB-wsrep MariaDB Server, wsrep_25.13.raf7f02e配置文件&#xff1a;[rootnode-23 mariadb]# more /etc/my.cnf[mysqld]server_id3bind_address node-23port 3306datadir/var/lib/mysqllog-error/var/log/mariadb/mariadb…
阅读更多...
webform 页面传值的方法总结

webform 页面传值的方法总结

ASP.NET页面之间传递值的几种方式 页面传值是学习asp.net初期都会面临的一个问题&#xff0c;总的来说有页面传值、存储对象传值、ajax、类、model、表单等。但是一般来说&#xff0c;常用的较简单有QueryString&#xff0c;Session&#xff0c;Cookies&#xff0c;Application…
阅读更多...
iNeuOS工业互联网操作系统，智慧用电测控应用案例

iNeuOS工业互联网操作系统，智慧用电测控应用案例

目 录1. 概述... 22. 系统部署结构... 23. 用电测控终端... 34. 系统应用介绍... 61. 概述通过物联网技术对引发电气火灾的主要因素(导线温度、电流和漏电流等)进行不间断的数据跟踪与统计分析&#xff0c;实时发现电气线路和用电设备存在的安全隐…
阅读更多...
出现了！豆瓣最高9.9分，2020年最值得看的美剧！你居然还没看过？【内附资源】...

出现了！豆瓣最高9.9分，2020年最值得看的美剧！你居然还没看过？【内附资源】...

全世界只有3.14 % 的人关注了爆炸吧知识在调性普遍黄暴烧脑的美剧大流中&#xff0c;《This is us》没有大牌主演&#xff0c;没有炫酷特效&#xff0c;却让观众集体沦陷&#xff0c;被称为5年难得一见的美剧。有人说&#xff0c;这是「有生之年看过的最温柔的美剧」。但它取得…
阅读更多...
C# 修改配置文件进行窗体logo切换

C# 修改配置文件进行窗体logo切换

01—前言&#xff1a;题外的话大家可能发现这个号现在原创越来越少了&#xff0c;其实小编并没有放弃持续更新&#xff0c;只是把一手原创放到了 【dotnet编程大全】这个号了&#xff0c;那个号目前原创主要更新的是wpf mvvm方面的知识&#xff0c;框架用的Caliburn.Micro&…
阅读更多...
数学有趣地超乎你的想象

数学有趣地超乎你的想象

全世界只有3.14 % 的人关注了爆炸吧知识说起数学你是拒绝还是喜欢看完这一组&#xff0c;对于数学他的震撼、霸气、美来感受下哇1三角形内角和为1802多边形外角和为360&#xff08;图来源于可乐学习&#xff09;3怎样将一个正三角形剪拼成正方形&#xff1f;4怎样把两正方形剪拼…
阅读更多...
使用C#像google/zx一样编写脚本

使用C#像google/zx一样编写脚本

google/zxzx是谷歌开源的一个能够帮助开发者快速编写脚本的工具&#xff0c;它使用JavaScript作为编程语言。示例脚本如下&#xff1a;#!/usr/bin/env zxawait $cat package.json | grep namelet branch await $git branch --show-current await $dep deploy --branch${branch…
阅读更多...
redis 查询缓存_Redis缓存总结：淘汰机制、缓存雪崩、数据不一致....

redis 查询缓存_Redis缓存总结：淘汰机制、缓存雪崩、数据不一致....

在实际的工作项目中&#xff0c; 缓存成为高并发、高性能架构的关键组件 &#xff0c;那么Redis为什么可以作为缓存使用呢&#xff1f;首先可以作为缓存的两个主要特征&#xff1a;在分层系统中处于内存/CPU具有访问性能良好&#xff0c;缓存数据饱和&#xff0c;有良好的数据淘…
阅读更多...
5部适合学英语的动画电影，快和孩子一起看！

5部适合学英语的动画电影，快和孩子一起看！

全世界只有3.14 % 的人关注了爆炸吧知识今天我们与大家分享5部非常适合小学生学习英语的动画电影&#xff0c;家长们可依据不同类别和主题为孩子挑选喜欢的影片&#xff0c;在家陪孩子一起观看。文末可免费领取哦~01 《丁丁历险记》讲述的是一天丁丁买了一只古老的船模送给船长…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023