IOS AutoLayout详解(二)-多动图详解

原创Blog,转载请注明出处

blog.csdn.net/hello_hwc



前言:

上一篇文章介绍了一些讲解AutoLayout的准备知识,这一篇文章继续讲解用Storyboard来创建AutoLayout。下一篇文章会讲解下用Code来创建Storyboard。


用Control+Drag的方式来创建

- 对于一个View相对于SuperView的约束,Control+鼠标拖拽到Superview

- 对于两个View之间,Control+鼠标拖拽到另一个view

举个例子:

我想要实现这个效果

过程如下

第一步

拖拽一个ImageView,依照蓝色线参考线放到View中心,然后Control+drag,为ImageView添加两个约束,让其在水平和垂直方向上都在View的中心

如下动图



第二步

Control+drag这个imageview至其自身,添加Width和Hight恒定的约束。

这样,ImageView的约束就建立了。如果建立之后出现警告,可以选择如下图

点击Update Frames。XCode会依照约束来为我们更新View的Frame。



第三步,拖拽两个Button,然后建立约束,我想要Button分别在ImageView的两个角落。注意,拖拽的时候要依照参考蓝色线。

过程如下动图

对Button2也采用同样的方式,这时候我们就大功告成,完成了想要的。

当然,control+drag可以创建的不止是这些,读者在实际开发的过程中进行拖拽就能找到想要的约束选项


不要忘记,在大纲里也可以拖拽

这一点在Storyboard上View比较多的时候,尤其好用。

拖拽到自身如图:

Button1拖拽到Button2如图


用XCode的一些按键来创建(推荐方式)

这种方式是我比较喜欢的,因为拖拽的方式有时候拖拽不好很揪心。

这些按键在这个位置

然后,我用这些按键创建和上文一样的约束

一 为ImageView创建约束

  • 让其在View中心

选中ImageView


  • 添加高度宽度不变

    选中ImageView


  • 为Button1添加约束,让其距离ImageView的垂直距离为8(默认控件距离)

    选中Button1


  • 为Button1添加约束,让其和ImageView头部对齐

    选中Button1和Imageview



同理,为Button2对其,只不过Button2的对齐方式是尾部对齐,如果出现警告?信息,则updateFrame



最后,简单讲解下各个按键的功能

第一个用来处理对齐方式

注意有些对齐市两个View之间的,要同时选择两个View

红色圈圈的部分是形象的描述图



第二个处理距离信息,比如距离相邻控件的距离不变,宽度不变,比如在resize的时候,两个view的高度保持一致。



第三个处理,控件的当前位置和约束所约束到的位置不一致的时候是Update frame还是Update 约束,当然,也可以让XCode自动创建



第四个是当View大小改变的时候,约束的策略。



上一篇讲解AutoLayout链接

http://blog.csdn.net/hello_hwc/article/details/43967561



最后,发下牢骚:转我博客的同志,不要忘记标注下出处啊!!!做动图不容易啊!!

时间: 2024-11-06 21:13:29

IOS AutoLayout详解(二)-多动图详解的相关文章

iOS 8 AutoLayout 及SizeClass(三) 使用详解 好多值得学习及研究的地方

一.概要 通过对iOS8界面布局的学习和总结,发现autolayout才是主角,autolayout是iOS6引入的新特性,当时还粗浅的学习了下,可是没有真正应用到项目中.随着iOS设备尺寸逐渐碎片化,纯粹的hard code方式UI布局将会走向死角,而autoresizing方式也有其局限性,所以无论如何autolayout都将成为UI布局的重要方式. 前两篇以发烧友心态对iOS8界面布局的主要元素size class和autolayout进行了探索,发现要完全掌握autolayout需要大量

腾讯技术分享:GIF动图技术详解及手机QQ动态表情压缩技术实践

本文来自腾讯前端开发工程师" wendygogogo"的技术分享,作者自评:"在Web前端摸爬滚打的码农一枚,对技术充满热情的菜鸟,致力为手Q的建设添砖加瓦." 1.GIF格式的历史 GIF ( Graphics Interchange Format )原义是"图像互换格式",是 CompuServe 公司在1987年开发出的图像文件格式,可以说是互联网界的老古董了. GIF 格式可以存储多幅彩色图像,如果将这些图像((https://www.q

IOS AutoLayout详解(一)

原创Blog,转载请注明出处 blog.csdn.net/hello_hwc 前言: AutoLayout是让UI适应控件自适应设备尺寸变化的一项关键技术.随着IOS Device的尺寸越来越多,很难再像以前一样用一些固定的数字来布置UI. AutoLayout的实现有两种方式 Storyboard 代码 用Storyboard实现又有三种可选方式 蓝色参考线来让XCode自动创建 鼠标拖拽来实现 XCode中的一些选项按键配置 本文的内容包括 Storyboard上的一些基础知识 基于蓝色参考

IOS研究之网络编程(二)-Cocoa Streams使用详解

 本文以及相关的系列文章是我总结的iOS网络开发方面的知识点,本文是第二篇,主要分析了Cocoa Streams中的几个重要类 Cocoa Streams实际上是Objective-C对CFNetwork的简单封装,主要包含了三个类:NSStream, NSInputStream, and NSOutputStream.本部分的接口接口比较简单,用法一目了然.我在这里就只列出接口,方便查阅.对CFNnework不明白的看IOS研究之网络编程(一)-CFNetwork使用详解 NSStream

Java8初体验(二)Stream语法详解

原文链接:http://ifeve.com/stream/ 1. Stream初体验 我们先来看看Java里面是怎么定义Stream的: A sequence of elements supporting sequential and parallel aggregate operations. 我们来解读一下上面的那句话: Stream是元素的集合,这点让Stream看起来用些类似Iterator: 可以支持顺序和并行的对原Stream进行汇聚的操作: 大家可以把Stream当成一个高级版本的

SPI总线协议及SPI时序图详解

SPI,是英语Serial Peripheral Interface的缩写,顾名思义就是串行外围设备接口.SPI,是一种高速的,全双工,同步的通信总线,并且在芯片的管脚上只占用四根线,节约了芯片的管脚,同时为PCB的布局上节省空间,提供方便,正是出于这种简单易用的特性,现在越来越多的芯片集成了这种通信协议.SPI是一个环形总线结构,由ss(cs).sck.sdi.sdo构成,其时序其实很简单,主要是在sck的控制下,两个双向移位寄存器进行数据交换. 上升沿发送.下降沿接收.高位先发送.上升沿到来

IOS应用的执行过程以及生命周期详解

iOS的应用程序的生命周期,还有程序是运行在前台还是后台,应用程序各个状态的变换,这些对于开发者来说都是很重要的. iOS系统的资源是有限的,应用程序在前台和在后台的状态是不一样的.在后台时,程序会受到系统的很多限制,这样可以提高电池的使用和用户体验. //开发app,我们要遵循apple公司的一些指导原则,原则如下: 1.应用程序的状态 状态如下: Not running  未运行  程序没启动 Inactive          未激活        程序在前台运行,不过没有接收到事件.在没

【转】Java8初体验(二)Stream语法详解

原文链接 http://ifeve.com/stream/ Java8初体验(二)Stream语法详解 感谢同事[天锦]的投稿.投稿请联系 [email protected]上篇文章Java8初体验(一)lambda表达式语法比较详细的介绍了lambda表达式的方方面面,细心的读者会发现那篇文章的例子中有很多Stream的例子.这些Stream的例子可能让你产生疑惑,本文将会详细讲解Stream的使用方法(不会涉及Stream的原理,因为这个系列的文章还是一个快速学习如何使用的). 1. Str

HTTPS详解二:SSL / TLS 工作原理和详细握手过程

HTTPS 详解一:附带最精美详尽的 HTTPS 原理图 HTTPS详解二:SSL / TLS 工作原理和详细握手过程 在上篇文章HTTPS详解一中,我已经为大家介绍了 HTTPS 的详细原理和通信流程,但总感觉少了点什么,应该是少了对安全层的针对性介绍,那么这篇文章就算是对HTTPS 详解一的补充吧.还记得这张图吧. HTTPS 和 HTTP的区别 显然,HTTPS 相比 HTTP最大的不同就是多了一层 SSL (Secure Sockets Layer 安全套接层)或 TLS (Transp