【转】有趣的Autolayout示例-Masonry实现
原文网址:http://tutuge.me/2015/05/23/autolayout-example-with-masonry/
好久没有写Blog了,这段时间有点忙啊=。=
本文举了3个比较有“特点”的Autolayout例子,源于微博上好友的提问,感觉比较有意思,也比较有代表性,就写了出来,分享给大家~
至于为什么用Masonry,那是因为它好用啊!(被问到过有关Masonry的问题,就索性用它来实现吧=。=)。
效果图
Github地址
https://github.com/zekunyan/AutolayoutExampleWithMasonry
关于例子工程结构
实现的时候采用的是用StoryBoard拖拽约束+Masonry手写代码相结合的方式实现。最关键的地方是用Masonry,为了更好地突出重点。其它的无关紧要的空间约束,直接就拖拽了。
关于Autolayout
刚开始学习Autolayout的时候,什么“Leading Edges”、“Horizontal Centers”,好多啊,感觉一下子适应不来,有时候面对一个界面布局上的需求,可能都无从下手。
总的来说,我觉得Autolayout的关键就是“Constraint(约束)”。其实就是以下两点:
- 从显式设置frame的属性,到利用约束控制View的大小、位置。
- 思考如何布局时,重点从单个的View,到整体所有View之间的相互关系。
既然没有了具体设置View的frame属性,也就是说,系统会在运行时,通过我们设定的“约束”,计算出每个View的frame,再去绘制屏幕内容。
也就是说,我们设置的Constraint,要能体现出View的位置(x、y坐标)、大小(宽高)。无论是用IB拖拽约束,还是手写代码,只要从这个角度去思考,很多问题就都能解决。
有关Autolayout的知识,网上有很多,在这里就不详细列出了,但是有个公式倒是可以贴出来:
1 |
viewA-attribute = viewB-attribute * multiplier + constant |
关于Masonry
好用!
Case 1: 并排两个label,宽度由内容决定。父级View宽度不够时,优先显示左边label的内容
遇到这种跟内容压缩、优先级有关的布局,就不得不提Autolayout中的两个重要的属性“Content Compression Resistance”和“Content Hugging”。
Content Compression Resistance = 不许挤我!
对,这个属性说白了就是“不许挤我”=。=
这个属性的优先级(Priority)越高,越不“容易”被压缩。也就是说,当整体的空间装不下所有的View的时候,Content Compression Resistance优先级越高的,显示的内容越完整。
Content Hugging = 抱紧!
这个属性的优先级越高,整个View就要越“抱紧”View里面的内容。也就是View的大小不会随着父级View的扩大而扩大。
分析
根据要求,可以将约束分为两个部分:
- 整体空间足够时,两个label的宽度由内容决定,也就是说,label的“Content Hugging”优先级很高,而且没有固定的Width属性。
- 整体空间不够时,左边的label更不容易被压缩,也就是“Content Compression Resistance”优先级更高。
重点:
- label不设置具体的宽度(width)属性,宽度由内容决定。
- 显示的优先级由“Content Compression Resistance”属性的高低决定。
约束示例图
关键代码
关键的代码如下:(label1是左边的label,label2是右边的)
设置位置
1 |
// label1: 位于左上角 |
设置内容约束
1 |
//设置label1的content hugging 为1000 |
小节
灵活运用“Content Compression Resistance”和“Content Hugging”属性。
Case 2: 四个ImageView整体居中,可以任意显示、隐藏
先看看示例的截图:
下面的四个Switch控件分别控制上面对应位置的图片是否显示。
分析
- 首先就是整体居中,为了实现这个,最简单的办法就是将四个图片“装进”一个容器View里面,然后让这个容器View在整个页面中居中即可。这样就不用控制每个图片的居中效果了。
- 然后就是显示与隐藏。在这里我直接控制图片ImageView的宽度,宽度为0的时候不就“隐藏”了吗。
约束示例图
解释
之所以这么设置,主要目的有以下几点:
- 尽量减少无效的约束,保证约束不多也不少。
- 内部的每个imageView约束其实都只有四个:left、centerY、width和height,这样有个好处,就是可以在循环里面依次添加约束,大大减少代码量。
- 最右边的imageView还要单独设置跟容器View的右边约束,是为了不用设置容器View的width,保证容器View是刚好包含内部的View的,这样整体才是居中的。
关键代码
先看看最外层容器View的代码:
1 |
//containerView 就是 容器View [_containerView mas_makeConstraints:^(MASConstraintMaker *make) { |
循环创建每个内部的imageView
1 |
//循环创建、添加imageView |
最后是循环对imageView加上约束: 感谢XVXVXXX的PR:-D
1 |
//设定大小 |
控制ImageView显示、隐藏的时候,直接让其宽度等于0就行:
1 |
- (IBAction)showOrHideImage:(UISwitch *)sender { |
小节
有时候用个“容器View”管理内部的View,往往会起到事半功倍的效果。而且在组织约束的时候,尽量的将约束统一起来,这样可以用一个函数去设置,减少代码量。
Case 3: 子View的宽度始终是父级View的一半(或者任意百分比)
其实这个很简单=。= 再看看这个公式:
1 |
viewA-attribute = viewB-attribute * multiplier + constant |
这个是Autolayout里面一个约束的不同属性的基本组合关系,替换成宽度的话,就是下面这样:
1 |
子View的宽度 = 父级View宽度 * 系数 + 常数; |
在Masonry里面,其实有个函数“multipliedBy”,就是用来设置multipler属性的(跟原本的NSLayoutConstraint的对应)。
关键代码
如下:
1 |
[subView mas_makeConstraints:^(MASConstraintMaker *make) { |
接着,只要控制父级View的宽度,子View的宽度就会随着变化了。
小节
multipliedBy在Masonry的Github主页里面没有=。=
所以要养成读头文件的习惯~
总结
有关Autolayout的东西还有好多没有写,什么动画啊、动态修改约束之类的,本文也算是个引子吧,任重而道远~
能看到这的朋友,也算是很有耐心了,哈哈~~
参考
【转】有趣的Autolayout示例-Masonry实现的更多相关文章
- AutoLayout框架Masonry使用心得
AutoLayout框架Masonry使用心得 字数1769 阅读1481 评论1 喜欢17 我们组分享会上分享了页面布局的一些写法,中途提到了AutoLayout,会后我决定将很久前挖的一个坑给填起 ...
- iOS开发通过代码方式使用AutoLayout (NSLayoutConstraint + Masonry)
iOS开发通过代码方式使用AutoLayout (NSLayoutConstraint + Masonry) 随着iPhone6/6+设备的上市,如何让手头上的APP适配多种机型多种屏幕尺寸变得尤为迫 ...
- iOS AutoLayout自动布局&Masonry介绍与使用实践
Masonry介绍与使用实践:快速上手Autolayout http://www.cnblogs.com/xiaofeixiang/p/5127825.html http://www.cocoachi ...
- iOS — Autolayout之Masonry解读
前言 1 MagicNumber -> autoresizingMask -> autolayout 以上是纯手写代码所经历的关于页面布局的三个时期 在iphone1-iphone3gs时 ...
- IOS开发通过代码方式使用AutoLayout (NSLayoutConstraint + Masonry) 转载
http://blog.csdn.net/he_jiabin/article/details/48677911 随着iPhone6/6+设备的上市,如何让手头上的APP适配多种机型多种屏幕尺寸变得尤为 ...
- 代码方式使用AutoLayout (NSLayoutConstraint + Masonry)
随着iPhone6/6+设备的上市,如何让手头上的APP适配多种机型多种屏幕尺寸变得尤为迫切和必要.(包括:iPhone4/4s,iPhone5/5s,iPhone6/6s,iPhone 6p/6ps ...
- AutoLayout初战----Masonry与FDTemplateLayoutCell实践
学iOS也有几个月了.一直都是纯代码开发,菜鸟入门,到今天还处在Frame时代.刚好近期项目在提审.有点时间能够学学传说中的AutoLayout.事实上.就是android的相对布局(Relative ...
- 在 AutoLayout 和 Masonry 中使用动画
动画是 iOS 中非常重要的一部分,它给用户展现出应用灵气的一面. 在动画块中修改 Frame 在原来使用 frame 布局时,在 UIView 的 animate block 中对 view 的布局 ...
- Autolayout 第三方开源库
转载自:http://blog.csdn.net/hmt20130412/article/details/46638625 今天才发现CSDN支持markdown了…还是给出新博客地址:Autolay ...
随机推荐
- properties配置应用,为什么需要使用properties文件
在项目中我们常常会使用Constants常量类,达到系统全局配置的目的. 但是有些常量需要动态的配置,如果项目上线后,每次修改Constants.java然后再编译,再上传Constants.clas ...
- 0环境设置 - SQLPLUS设置
define _editor=vi - SQL*PLUS默认编辑器set serveroutput on size 1000000 - 默认打开DBMS_OUTPUT, 不用每次使用都执行这个命令来启 ...
- linux入门教程(三) Linux操作系统的安装
因为笔者一直都是使用CentOS,所以这次安装系统也是基于CentOS的安装.把光盘插入光驱,设置bios光驱启动.进入光盘的欢迎界面. 其中有两个选项,可以直接按回车,也可以在当前界面下输入 lin ...
- sudo: /etc/sudoers 的模式为 0551,应为 0440
环境:Ubuntu 12.04.4 LTS 32bit 本想修改/etc/sudoers文件,取消sudo权限的密码.但是因为sudoers文件无‘w’(写)的权限,然后用命令加写权限的时候加错了,加 ...
- IOS开发--上传图片
IOS图片上传功能实现总结 IOS图片上传主要分两种方式实现,一个是将图片信息以表单的形式上传,一种是将图片以JSON的格式上传. 首先要讲的是以这两个方式上传的一个比较明显的区别就是HTTP Hea ...
- C#中用JavaScriptSerializer和Json.Net操作json格式的文件
1.json文件 2.写出对应的类 //折扣 public class Discount { public string Qty { get; set; } public string percent ...
- Java多线程3:Thread中start()和run()的区别
原文:http://www.cnblogs.com/skywang12345/p/3479083.html start() 和 run()的区别说明start():它的作用是启动一个新线程,新线程会执 ...
- 控制CPU占用率曲线
编程之美的第一个问题,我的机器是双核的,用文中的代码,得到的曲线波动比较大额,受其他进程的影响比较大.文中提到10ms接近windows的调度时间片,如果选得太小,会造成线程被频繁唤醒和挂起,造成内核 ...
- mysql优化 mysql explain
一篇文章: 使用use index优化sql查询 先看一下arena_match_index的表结构,大家注意表的索引结构CREATE TABLE `arena_match_index` ( ` ...
- python类似微信未读信息图片脚本
其实就是实现一个效果,给一张图片,然后再右上角给出未读的信息数目,就像我们打开微信的时候,总是看到红点就忍不住想要点击去查看一样. 类似这种效果: 可以知道,图片是给定的,那么只要随机生成一个数字,然 ...