Auto Layout用法剖析(1)

转载请注明转自此处:http://blog.csdn.net/xietao3/article/details/41549959

1、首先是图片最上方四个方向键(leading左、trailing右、top上、bottom下)

举个栗子,左方的方向键,使用该功能需要选中方向键为红色实心才会起到相应的作用,而输入框表示该控件x坐标相对某一控件的leading、trailing、top、bottom(四个位置选其一)坐标距离,这个相对的控件和控件的哪个位置都是可以选择的,,通过点击输入框右方下三角进行选择控件,控件的位置在属性面板选择,constant输入框为具体数值大小,值得一提的是这个功能不仅仅是针对于上级视图,对同一层的控件也可以用这个方法保持2个控件之间的距离恒定。

如图所示:该图内容表示相对的控件为命名为1的Button相对距离为80

2、width、height

这两个功能比较直接,比如说控件A在sb中宽度是50,加入约束宽度输入数字100,启动后该控件实际宽度为100。

3、Equal Widths、Equal Heights

这两个约束功能比较实用,可以控制控件A的宽度或高度随控件B的宽度或高度变化。

如图所示:控件1的宽度和控件View1的宽度绑定,为View1宽度的四分之一。

4、结合上面几点约束功能,学以致用,左边为模拟器编译后效果,右方为SB面板。

这里用到的有2类约束,一个是上面讲的1、space to 和3、Equal Widths/heights

控件1、2、3、4分别与背景View1添加Equal Widths约束,其宽度为View1的1/4。

控件1的leading与VIewleading间隔0,1的trailing与控件2leading间隔0,以此类推一直到4的trailing与View1的trailing间隔为0。

可以看到控件5被拉伸了,此处用了2个约束,5的leading与View1leading间隔10,5的trailing与View1的trailing间隔10,由此造成5被拉伸。

5、Aspect Ratio此功能与Equal系列有点类似,都是动态控制宽高,不同的是此功能相对控件可以是本身

如图所示:控件6的高与本身的宽成1:2比例,在模拟器运行后,宽即是高的2倍。

6、Align 这个主要是用来各种对齐的

leading、trailing、top、bottom、center、hor、ver分别为左对齐、右对齐上对齐、下对齐、水平中心对齐、垂直中心对齐,同时可以通过constant设置偏移量。

baseline比较奇怪,为控件内文本底部对齐,跟实际效果有点出路,看上去只起到压缩文本框高度的作用如图所示。

水平对齐,对齐位置可以是centerX、leading、trailing。

图中左边为模拟器运行情况,右边为SB面板,该效果使用的是水平对齐方式,位置为CenterX

时间: 2024-10-07 05:35:39

Auto Layout用法剖析(1)的相关文章

Auto Layout用法剖析(2)

转载请注明转自此处:http://blog.csdn.net/xietao3/article/details/41549959 1.从上往下发现一直到baseline跟第一篇的功能相同,只有两个Hor Center in Container和Ver Center in Container之前是没有的,这个功能也特别简单,对使用该约束的控件与superView对齐 如图所示:左方为SB面板,右方为模拟器运行效果,可以看到在SB面板中X坐标不一致的控件1和2在运行后都已经以superView的Cen

Auto Layout Guide----(三)-----Anatomy of a Constraint

Anatomy of a Constraint 剖析约束 The layout of your view hierarchy is defined as a series of linear equations. Each constraint represents a single equation. Your goal is to declare a series of equations that has one and only one possible solution. A samp

深入理解Auto Layout 第一弹

本文转载至 http://zhangbuhuai.com/2015/07/16/beginning-auto-layout-part-1/ By 张不坏 2015-07-16 更新日期:2015-07-17 文章目录 1. 写在前面 2. iOS布局机制 3. 几个重要的API 3.1. intrinsicContentSize方法 3.2. preferredMaxLayoutWidth属性 3.3. sizeThatFits:方法和sizeToFit方法 3.4. systemLayoutS

WWDC2016 Session笔记 – Xcode 8 Auto Layout新特性

来源:一缕殇流化隐半边冰霜(@halfrost) 链接:http://t.cn/Rt7sKBv 目录 1.Incrementally Adopting Auto Layout 2.Design and Runtime Constraints 3.NSGridView 4.Layout Feedback Loop Debugging 一.Incrementally Adopting Auto Layout Incrementally Adopting Auto Layout是什么意思呢?在我们IB

iOS之Xcode8 Auto Layout新特性

目录 1.Incrementally Adopting Auto Layout 2.Design and Runtime Constraints 3.NSGridView 4.Layout Feedback Loop Debugging 一.Incrementally Adopting Auto Layout Incrementally Adopting Auto Layout是什么意思呢?在我们IB里面布局我们的View的时候,我们并不需要一次性就添加好所有的constraints.我们可以一

xcode中Auto Layout的使用

    在上篇文章中我和大家简单的说了一下纯代码实现自动布局,在这篇文章中我打算和大家说一下用xib中的Auto Layou的方法来约束布局,此方法节省了大量的冗余代码,操作简单易懂,但是在操作过程中要注意自己的约束条件是否冲突,冲突容易引起bug哦,好了我们步入正题吧!  1.Auto Layout工具箱功能介绍                     好了以上就是这些工具箱的用法,下边我给大家来两段代码和事例图来加深理解: 2.实例演示   2.1实现如下的两个图          布局方式

Auto Layout 使用心得

此系列文章代码仓库在 https://github.com/johnlui/AutoLayout ,有不明白的地方可以参考我的 Auto Layout 设置哦,下载到本地打开就可以了. 简介 Auto Layout 是苹果在 Xcode 5 (iOS 6) 中新引入的布局方式,旨在解决 3.5 寸和 4 寸屏幕的适配问题.屏幕适配工作在 iPhone 6 及 plus 发布以后变得更加重要,而且以往的“笨办法”的工作量大幅增加,所以很多人开始学习使用 Auto Layout 技术. 初体验 0.

Day3 : Auto layout 和 JVFloatLabeledTextfield框架 学习笔记

为了可以优化项目的UI,为了可以使用JVFloatLabeledTextfield框架来构建文本输入框(动画效果超赞),今天重点学习了Auto Layout(以下简称AL)技术,主要是了解AL的工作原理,并且要掌握用代码添加constraints. 1.JVFloatLabeledTextfield JVFloatLabeledTextfield框架可以让文本框呈现一个漂浮的PlaceHolder,简洁.明确.生动.而这个框架另一个让我大开眼界的是他利用AL技术画直线,做出一个简单的表单页面.画

iOS开发之Auto Layout入门

随着iPhone6与iOS8的临近,适配的问题讲更加复杂,最近学习了一下Auto Layout的使用,与大家分享.  什么是Auto Layout? Auto Layout是iOS6发布后引入的一个全新的布局特性,其目的是弥补以往Autoresizing在布局方面的不足之处,以及未来面对更多尺寸适配时界面布局可以更好的适应. 为什么要用Auto Layout? Autolayout能解决不同屏幕(iPhone4,iPhone5,iPad...)之间的适配问题. 在iPhone4时代开发者只需要适