本站文章均为【小猪熊】原创,转载务必在明显处注明:(作者新浪微博:@周公梦蝶9999 )转载自【小猪熊】 原文链接:  www.piggybear.net/?p=291

为了解决适配多尺寸的问题,Apple在2012年推出了Auto Layout特性,2014年又推出了Adaptive Layout、Size Classes,2015年又推出了Stack View。这些无一不是我们开发者做适配的利器。今天就让我们看看StackView是怎么一回事。 UIStackView提供了一个高效的接口用于平铺一行或一列的视图组合。对于嵌入到StackView的视图,你不用再添加自动布局的约束了,Stack View管理这些子视图的布局,并帮你自动布局约束。也就是说,这些子视图能够适应不同的屏幕尺寸,你只需要对StackView做出相应的约束就行了。此外,你可以嵌入一个stack View到另一个stack view中来创建更为复杂的用户界面。 下面做一个小demo 在界面上拖拽3个UIImageView,第一个ImageView距离Top Layout Guide为10个像素,距离屏幕左边距为20个像素,距离屏幕右边距为20个像素,第二个和第三ImageView,每个之间的间距是10个像素,同样距离屏幕左边距为20个像素,距离屏幕右边距为20个像素,三个ImageView的高度相同为154个像素。 假如没有UIStackView,我们做这样的一个小demo展示时,通过Auto Layout分别需要给每个ImageView添加约束,而且在横屏的情况下表现不佳的话还需要通过Size Classes设置横屏的情况,就做这样的一个小demo,就这样的复杂。 对每个ImageView做对应的约束

4英寸IPhone竖屏展示是没有问题的 4英寸Iphone横屏展示就会出现这样的问题 如果想要解决如上图所示横屏问题时,我们又需要通过SizeClasses对横屏操作 面对这么简单的一个小小的demo,就要这么的复杂,针对此问题,苹果在2015年的WWDC上给我们展示了UIStackView,可以非常方便的做出这样的效果,接下来我们就用UIStackView来做一下这样的一个小demo。 首先来介绍一下UIStackView的基本属性 UIStackView的属性面板 UIStackView的属性中文解释 接下来,我们就一步步的用UIStackView来做一下 1、首先在拖拽一个Vertical Stack View到storyboard,然后选择下面的Pin按钮,对StackView设置约束 1)反勾选Constrain to margins,然后设置上面为10,左右两边分别为20,然后添加这三个约束 2)选择Resolve Auto Layout lssues,在Selected Views下面选择Add Missing Constraints,添加一下缺失约束 3)选择Resolve Auto Layout lssues,在Selected Views下面选择Update Frames,更新一下界面 4)拖拽一个View到StackView中,并在Size inspector给它设置一个背景颜色(便于看的清,随便设置),然后设置它的高度为154个像素 5)按下command + d,在复制两个相同的View,然后给每个View设置不同的背景颜色 6)在Document Outline界面选中StackView,在Attributes inspector下,Distribution设置成Fill Equally,让每个子视图的宽高相等,其实不用设置也行,因为我们刚才是复制的,不是拖拽的,所以每个View本来大小就相等。 7)同样在StackView的Attributes inspector下,将Spacing设置成10,意思就是StackView里面的每个子视图间距是10个像素 然后我们看看效果 4英寸Iphone竖屏显示(正常)     4英寸Iphone横屏显示(效果不是我们想要看到的) 那么,我们使用了UIStackView,但是在横屏的情况下还是表现不佳,该怎么办呢,非常简单 在Document Outline界面选中StackView,在Attributes inspector下,在Axis前面的加号,点击一下,选择Compact Width下面的Compact Height,然后将它设置为Horizontal。 我们为什么要这样做呢,因为在iPhone的3.5英寸,4英寸以及4.7英寸的手机下,横屏的宽和高都是Compact(紧凑型),在这种情况下,就会出现上面的那种情况,所以选择Compact Width下面的Compact Height,为什么要选择Horizontal呢,因为是横屏,那我们就让StackView水平显示,这样效果就会更好,以同样的方式添加5.5英寸的iPhone以及ipad的适配 再来看看效果 是不是非常完美呢。 总体的来说,UIStackView还是非常的方便的,但是不是这样规则性的需求时,或许就用不到UIStackView了,大家可以根据自己的需求选择,但还是建议大家能用UIStackView就尽量用,因为真心非常的方便,而且非常的快。   该工程的下载地址: oschina:git.oschina.net/piggybear/U… **github: **github.com/xiaozhuxion…

转载于:https://juejin.im/post/5a312b086fb9a0451b048c1b

通过Auto Layout和Size Classes深入了解UIStackView的好处和使用相关推荐

  1. 有了Auto Layout,为什么你还是害怕写UITabelView的自适应布局?

    本文是投稿文章,作者:iOS122 Apple 算是最重视应用开发体验的公司了.从Xib到StoryBoard,从Auto Layout到Size Class,每一次的更新,都会给iOS应用的开发带来 ...

  2. Advanced Auto Layout Toolbox

    原文地址:https://www.objc.io/issues/3-views/advanced-auto-layout-toolbox/ Auto Layout was introduced in ...

  3. Advanced Auto Layout:Programmatically Creating Constraints

    Programmatically Creating Constraints以编程方式创建约束 Whenever possible, use Interface Builder to set your ...

  4. iOS6 自动布局 入门–Auto Layout(转)

    iOS6 自动布局 入门–Auto Layout(转) 标签: 杂谈   目前为止,即使你的界面设计是在合理的复杂度内,你也必须要为之写许多代码来适应变化的布局.现在我相信你会很高兴听到这种情况将不会 ...

  5. Unity2017.1官方UGUI文档翻译——Auto Layout

    Auto Layout 自动布局 The Rect Transform layout system is flexible enough to handle a lot of different ty ...

  6. iOS屏幕适配方案-Auto Layout

    市场上的android手机五花八门.各种尺寸的屏幕让android程序员们比較头疼. 也有一些大神写了一些博客提出了自己的观点.iOS貌似也迎来了大屏6+,因此屏幕适配的问题也是有滴,因此苹果也有自己 ...

  7. Auto Layout 和 Constraints

    文章修改 2月1日:添加使用约束.编辑约束和iOS特性三个部分 2月24日:根据自己的理解,修改iOS特性部分的内容 自动布局Auto Layout Auto Layout,通过设置在View上的约束 ...

  8. debugging Auto Layout:Logical Errors

    Logical Errors逻辑错误 Logical errors are simply bugs. Somewhere, you have an assumption that is faulty. ...

  9. 深入理解Auto Layout 第一弹

    form:https://zhangbuhuai.com/auto-layout-part-1/ By 张不坏 2015-07-16 更新日期:2015-07-17 文章目录 1. 写在前面 2. i ...

最新文章

  1. 从未在一起更让人遗憾_明明是真爱,却又不能在一起
  2. vue-cli脚手架
  3. js实现数据结构及算法之二叉树(Binary Tree)
  4. python与java的比较_Python和Java两者有什么区别?
  5. b/s结构中ajax技术浅析,B/S架构WEB程序中AJAX异步传输技术的应用研究
  6. 万字长文助你上手软件领域驱动设计 DDD
  7. python做abaqus后处理_python进行abaqus后处理的二次开发,我想提取odb文件中的nodeSet,结果总提示Keyerror,请各位大神指教。...
  8. [JavaWeb修行之路 Day1] 安装、配置、部署Tomcat
  9. python 文件操作练习
  10. 实验吧-密码学-杯酒人生(特殊凯撒--维吉尼亚密码)(凯撒加解密脚本、维吉尼亚密码加解密脚本)...
  11. javascript基础知识(3) 基本语法
  12. 【VS】项目属性配置(中)
  13. python能做什么-python能用来做什么?这3大主要用途你一定要知道!(实用)
  14. kx linux驱动下载,创新5.1声卡驱动kX Project Audio DriverV5.1免费版下载 - 下载吧
  15. python安装numpy模块教程_Python中Numpy包的安装与使用方法简明教程
  16. 读取没开计算机硬盘,电脑磁盘读取错误开不了机怎么办
  17. [codeforces 1353E] K-periodic Garland 为什么会想到动归dp
  18. OBS直播软件-简介
  19. ffmpeg代码实现往视频文件里面叠加文字
  20. 太原理工大学计算机科学与技术老师 王颖,王华 - 太原理工大学 - 信息与计算机学院...

热门文章

  1. c语言d1和f1的区别,讲点真话:当贝d1和f1区别有没有?测评哪个好?谁来分享使用心得...
  2. terraform_Kubernetes初学者的Terraform指南
  3. 1970-01-01是什么?为什么计算机起始时间是1970年1月1日
  4. -tomcat的介绍
  5. MEM/MBA数学强化(04)方程 函数 不等式
  6. MEM/MBA数学强化(07)几何
  7. 莫比乌斯反演公式推导
  8. php curl如何确定数据格式正确,PHP CURL没有正确处理编码的返回数据
  9. Udacity优达学城 TensorFlow笔记2-对服饰图像分类
  10. 异构计算给我们带来了哪些思考?