ios Autolayout 按比例相对布局
看到一篇讲ios storyboard 按比例相对布局的博客,挺不错的转下来了!
可到liumh.com查看。
本文记录如何在 UIStoryboard 或者 xib 中进行百分比布局,包括
- View.Width 占其 Superview.Width 的百分比
- View.Leading 与 Superview.Leading 间距占 Superview.Width 的百分比
- View.Trailing 与 Superview.Trailing 间距占 Superview.Width 的百分比
- View.Leading 与 Superview.CenterX 间距占父视图 Superview.Width 的百分比
- 限定View的宽高比
- 以 Superview.Width 宽度的某一百分比为 View 之间的间隔
在 iOS NSLayoutConstraint priority 一文中提到过 multiplier, 上述提到的百分比布局都是基于
multiplier 实现的,下面来一一查看其实现。
View.Width 占其 Superview.Width 的百分比
该功能实现很简单,以一个居中的按钮 Button 为例,首先将按钮相对于父容器添加 Equal Width 的 constraint,然后将它的 multiplier 设成 0.2,这样就可实现 Button1 的宽度为父容器宽度的 0.2 倍。操作步骤如下:

View.Leading 与 Superview.Leading 间距占 Superview.Width 的百分比
该功能实现其实是使 View.Leading 相对于 Superview.Trailing 布局,然后再调整 multiplier 参数实现,如下操作步骤实现了将 Button 的左边距离父视图左边界的距离站父视图宽度的0.2倍,如下:

View.Trailing 与 Superview.Trailing 间距占 Superview.Width 的百分比
该需求实现是使 View.Trailing 相对于 Superview.Trailing 布局,然后再调整 multiplier 参数,需要注意的是使用 Reverse First And Second Item 调整如下表达式中 item1 和 item2 在等式中两边的位置。
item1.attribute1 = multiplier × item2.attribute2 + constant
以下步骤实现 Button 的 Trailing 距离父视图右边距为父视图宽度的0.2倍,需要注意的是,此时的 multiplier 是 (1-0.2=0.8),在修改 Button 约束值时,可以从顶部导航中看到约束表达式的变化:

View.Leading 与 Superview.CenterX 间距占父视图 Superview.Width 的百分比
有时间需要将 UI 组件相对于父视图的中线进行布局,比如将 View.Leading 与父视图中线的距离设定为父视图宽度20%, 即相对于父视图 CenterX 的 multiplier 值为 1.4

限定View的宽高比
有时候我们需要保持视图的宽高比不变进行缩放,此时可以设定其 Aspect Ratio 保持其在进行缩放时宽高比固定。
以 Superview.Width 宽度的某一百分比为 View 之间的间隔
要实现这个需求就没有之前那么简单了,这需要添加一个间距视图,设置每个视图与相邻间距视图的边缘间距约束,然后给所有的间距视图添加相对于其父视图的等宽约束,设置合适的比例即可。这里借用 为iPhone 6设计自适应布局 文中一图:

关于文中所涉及到的方法,可在 AutoLayoutMultiplier 工程中查看。
ios Autolayout 按比例相对布局的更多相关文章
- 从此爱上iOS Autolayout
转:从此爱上iOS Autolayout 这篇不是autolayout教程,只是autolayout动员文章和经验之谈,在本文第五节友情链接和推荐中,我将附上足够大家熟练使用autolayout的教程 ...
- iOS autoLayout总结
本文转自 http://ruikq.github.io/ios/autolayout/uiscrollview/2015/01/27/iOS-autolayout%E6%80%BB%E7%BB%93. ...
- 【转】IOS AutoLayout详解(三)用代码实现(附Demo下载)
转载自:blog.csdn.net/hello_hwc IOS SDK详解 前言: 在开发的过程中,有时候创建View没办法通过Storyboard来进行,又需要AutoLayout,这时候用代码创建 ...
- iOS 瀑布流之栅格布局
代码地址如下:http://www.demodashi.com/demo/14760.html 一 .效果预览 二.确定需求 由下面的需求示意图可知模块的最小单位是正方形,边长是屏幕宽除去边距间隔后的 ...
- iOS — Autolayout之Masonry解读
前言 1 MagicNumber -> autoresizingMask -> autolayout 以上是纯手写代码所经历的关于页面布局的三个时期 在iphone1-iphone3gs时 ...
- [转]从此爱上iOS Autolayout
原文地址 这篇不是autolayout教程,只是autolayout动员文章和经验之谈,在本文第五节友情链接和推荐中,我将附上足够大家熟练使用autolayout的教程.这篇文章两个月前就想写下来,但 ...
- iOS AutoLayout自动布局&Masonry介绍与使用实践
Masonry介绍与使用实践:快速上手Autolayout http://www.cnblogs.com/xiaofeixiang/p/5127825.html http://www.cocoachi ...
- iOS - AutoLayout
前言 NS_CLASS_AVAILABLE_IOS(6_0) @interface NSLayoutConstraint : NSObject @available(iOS 6.0, *) publi ...
- IOS开发之UIScrollView约束布局
概要 在iOS开发学习中,UIScrollView是绕不过去的一个重要控件. 但是相对于Android的ScrollView,iOS的这个滚动控件的用法简直是复杂一万倍... 最主要是目前能找到的大部 ...
随机推荐
- tomcat设定shared lib共享同样的jar
在项目越来越多的时候,部署在tomcat的发布包也会越来越多,这样难免有很多相同的jar会被加载,占用大量的永久存续区内存,通过设定shared lib来控制相同的jar只加载一个,这样有以下好处: ...
- 体验StartOS
旧电脑,原来使用的是win xp.随着win及其支持打软件打“成长”,电脑运行越来越慢了.一个操作需要很长的时间等待,终于,失去了耐心,换了新的电脑. 旧电脑弃置多年,留之无用,弃之可惜.偶发奇想,换 ...
- Python IAQ中文版 - Python中少有人回答的问题
Python中少有人回答的问题 The Python IAQ: Infrequently Answered Questions 1 Q: 什么是"少有人回答的问题(Infrequently ...
- 触电JavaScript-如何将json 二维数组转换为 JSON object
最近因为项目中使用的是 ActiveReports .Net 产品,因为他们最近新出了 ActiveReports JS 版本,所以内心有点痒痒,想试试这个纯前端版本报表控件到底如何,毕竟我们项目有 ...
- ng 图片的引用
对于图片的引用有两种类型 本地 业务逻辑中(使用url) 本地中图片需要存放在静态资源夹assets中下新建的文件夹images文件夹中 eg:images文件夹中有一张01.png 的图片 显示本地 ...
- iframe 设置占屏幕高度 100%
给 iframe 元素设置 fixed 定位,并且设置 100% 的宽和高: iframe { position: fixed; background: #000; border: none; top ...
- JVM(五)回收机制
1.对象的引用 JDK1.2之后,对象的引用分为了四种情况 强引用:Object obj = new Object():只要强引用还在,垃圾回收器就永远不会收集被引用的对象. 软引用:So ...
- Spring DestorySingleton流程
第一节介绍Spring启动(链接)时,介绍AbstractApplicationContext的过销毁过程,主要是调用了内部的destroyBeans方法,这节便来介绍bean的销毁过程. 一.销毁 ...
- SpringBootSecurity学习(22)前后端分离版之OAuth2.0自定义授权码
使用JDBC维护授权码 前面的代码中,测试流程第一步都是获取授权码,然后再携带授权码去申请令牌,授权码示例如下: 产生的授权码默认是 6 位的,产生以后并没有做任何管理,可以说是一个临时性的授权码,o ...
- Typesetting HDU - 6107
Yellowstar is writing an article that contains N words and 1 picture, and the i-th word contains aia ...