(八十七)AutoLayout的简介与实例
AutoLayout是继AutoResizing之后的一种自动布局方法,解决了AutoResizing无法处理控件间相互关系的问题。
AutoLayout在storyboard中通过底部工具条设置,底部工具条只有勾选了AutoLayout允许才能显示。
从左到右三个按钮分别是 对齐、固定和尺寸修复。
【Align】
第一栏和第二栏都无法选择,因为它们都是相对属性,需要一个以上的控件。
第一栏分别是左、右、上、下对齐,后面的值是偏移量。
第二栏是相对另一个控件水平、居中对齐或者基于某条线对齐。
第三栏可以直接选择,是相对于屏幕水平和垂直对齐。
【Pin】
上面的四个属性和AutoResizing一致,表示四个方向的固定距离,右面的小箭头代表的是相对于哪个View,需要注意的是,如果B想相对于A布局,让B的顶部距离A的底部20点,则在B中要选择相对于A,则A必须在B的上面才可选择,如图所示:在下拉框中选择正确的View,为了方便,应当给每个View都起个名字。
下面的Equal Widths和Equal Heights都是需要两个或两个以上View,实现他们的宽、高一致所用。
注意在第一栏的最后有Constrain to margins是默认勾选的,iOS8有新特性,左右有一定边距,如果要相对于屏幕的边缘计算,应该取消勾选,一定要注意。
【Resolve Auto Layout Issues】
在AutoLayout约束后的结果与当前显示不一致时,点击Update Frames即可更新视图。
【注意点】
1.使用了AutoLayout以后尽量不要设置frame,否则可能会出现奇怪的问题。
2.AutoLayout出现红色为错误,说明缺少约束条件;黄色为警告,应当Update Frames更新视图。
【更改约束实现比例关系】
有时候会有一种需求,A相对屏幕居中,B和A右对齐,并且B的宽度是A的一半,重点是最后这个比例关系。
主要有两种实现方式,介绍之前,先介绍更改约束的方法,点击任意一条约束线,看右侧的界面:
这里反映的是计算关系,公式为First = (Second + Constant) * Multiplier,假设这个是宽度关系,并且blueView的宽度已经固定,则根据上面的公式,系统会自动解出redView的宽度,反之亦然。
★实现方法一:利用宽度关系
为A、B添加Equal Widths约束,选中约束线,更改Multiplier,使得ViewB.width = (ViewA.width + 0) * 0.5,或者满足ViewA.width = (ViewB.width + 0) * 2。
★实现方法二:利用居中对齐
因为A相对屏幕居中,因此只要让B的左侧和屏幕中线对齐即可。
实现方法为SuperView.Center X = (ViewB.Leading + 0) * 1,因为父视图的中心X不变,因此只能让ViewB的左侧变化,从而实现了与中线对齐。
【控制器View伸缩变化时的处理】
如果控制器View伸缩,而子控件相对屏幕的位置又不能变,可以选择按照屏幕的中线进行布局。
(八十七)AutoLayout的简介与实例的更多相关文章
- 一起talk C栗子吧(第八十七回:C语言实例--使用管道进行进程间通信概述)
各位看官们,大家好.上一回中咱们说的是进程间通信的样例.这一回咱们说的样例是:使用管道进行进程间通信. 闲话休提,言归正转. 让我们一起talk C栗子吧! 我们在前面的的章回中介绍了使用管道进行进程 ...
- Python之路【第八篇】:堡垒机实例以及数据库操作
Python之路[第八篇]:堡垒机实例以及数据库操作 堡垒机前戏 开发堡垒机之前,先来学习Python的paramiko模块,该模块机遇SSH用于连接远程服务器并执行相关操作 SSHClient ...
- 第三百八十七节,Django+Xadmin打造上线标准的在线教育平台—网站上传资源的配置与显示
第三百八十七节,Django+Xadmin打造上线标准的在线教育平台—网站上传资源的配置与显示 首先了解一下static静态文件与上传资源的区别,static静态文件里面一般防止的我们网站样式的文件, ...
- “全栈2019”Java第八十七章:类中嵌套接口的应用场景(拔高题)
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- (八十七)AutoLayout的简单介绍与实例
AutoLayout是继AutoResizing之后的一种自己主动布局方法.攻克了AutoResizing无法处理控件间相互关系的问题. AutoLayout在storyboard中通过底部工具条设置 ...
- jquery简介和实例
一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. 参考:http://www.php100 ...
- Wpf 数据绑定简介、实例1
简介:1.WPF绑定使用的源属性必须是依赖项属性,这是因为依赖项属性具有内置的更改通知支持,元素绑定表达式使用了Xaml扩展标记, WPF绑定一个控件是使用Binding.ElementName, 绑 ...
- Hibernate简介与实例
一.Hibernate简介 1.什么是Hibernate? Hibernate是数据持久层的一个轻量级框架.数据持久层的框架有很多比如:iBATIS,myBatis,Nhibernate,Siena等 ...
- Java过滤器详细文档,简介,实例,应用
简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件或静态 ...
随机推荐
- sklearn.model_selection 的 train_test_split作用
train_test_split函数用于将数据划分为训练数据和测试数据. train_test_split是交叉验证中常用的函数,功能是从样本中随机的按比例选取train_data和test_data ...
- 浅谈 Axios 在 Vue 项目中的使用
介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...
- Nginx 配置HTTPS 与Node.js 配置HTTPS方法
前段时间公司网站要求加上HTTPS安全CA证书,公司服务器全是阿里云服务器,并且配有负载均衡,所以选择直接在阿里云购买CA证书,阿里云有一种证书可以免费试用一年,决定申请此证书,阿里云证书需要验证,阿 ...
- Vue2.0搭建脚手架流程
介绍 Vue.js是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 安装node.js ...
- ACM 人见人爱A^B
求A^B的最后三位数表示的整数. 说明:A^B的含义是"A的B次方" Input输入数据包含多个测试实例,每个实例占一行,由两个正整数A和B组成(1<=A,B<=10 ...
- MySQL注释中的sql也可能执行
MySql支持三种注释形式:# 和–属于单行注释,注释范围为该行的结尾:/* */注释属于多行注释,此外该种注释还可以实现行内注释.具体的使用情况如下图中所示(四种使用情形): 除此之外,/* */这 ...
- android 自定义view之侧滑效果
效果图: 看网上的都是两个view拼接,默认右侧的不显示,水平移动的时候把右侧的view显示出来.但是看最新版QQ上的效果不是这样的,但给人的感觉却很好,所以献丑来一发比较高仿的. 知识点: 1.Vi ...
- ejabberd编译更新脚本
ejabberd编译更新脚本 (金庆的专栏 2016.8) 用rebar编译ejabberd源码,然后复制编译所得beam文件到ejabberd安装目录, 调用ejabberdctl热更新. call ...
- JAVA面向对象-----main方法详解
JVM看不懂的可以跳过,这里不做过多解释,(^__^) 嘻嘻-- 主函数是静态的 public static void main(String[] args){ } 主函数是什么:主函数是一个特殊的函 ...
- (一二八)使用POST上传文件
简介 上传文件到服务器是一个比较常用的操作,最基本的方式是通过POST上传,文件以二进制形式,作为一个参数传递,但是这个POST的结构相当复杂,且必须完全符合HTTP标准. 文件上传的POST格式 该 ...