iOS9新特性之UIStackView
同iOS以往每个迭代一样,iOS 9带来了很多新特性。UIKit框架每个版本都在改变,而在iOS 9比较特别的是UIStackView,它将从根本上改变开发者在iOS上创建用户界面的方式。本文将带你学习怎样使用UIStackView创建用户界面。
本文假定你已经熟悉Auto Layout基础。不熟悉的可以先看看Auto Layout教程。要理解Stack View为何如此有用及它是如何起作用的,需要首先对Auto Layout有深入了解。
1. 实例预览
我们将使用UIStackView模拟一个app评分提示。用户可以增加星星或者移除星星来打分。完成后看起来是这样。
先从GitHub下载样例工程并打开。在Main.Storyboard里有两个Stack View
我们将使用这两个Stack View来布局界面。开始编码前,让我们先看一下Stack View是如何工作的。
2. UIStackView 概述
Stack View的核心便是方便垂直或水平排布多个subview,如果你做过Android开发,那它和LinearLayout 控件非常相似。
Stack View最有用的就是它会自动为每个subview创建和添加Auto Layout constraints。当然你可以控制subview的大小和位置。可以通过选项配置subview的大小、排布以及彼此间的间距。
布局内容
打开Main.Storyboard,选择其中一个Stack View可以查看其选项,并选中一个Stack View。在 Attributes Inspector中,注意Stack View下面列出的选择。
Axis表示Stack View的subview是水平排布还是垂直排布。Alignment控制subview对齐方式。Distribution定义subview的分布方式。Spacing 为subview间的最小间距。
把术语简化一下,你可这样理解:Alignment 用于控制X 和 Y值,而Distribution 用于控制高度和宽度。另两个值都会影响对齐。如果选中Baseline Relative将根据subview的基线调整垂直间距。如果选中Layout Margins Relative 将相对于标准边界空白来调整subview位置。
另一个需要记住的是,Stack View会被当成Container View。所以它是一个不会被渲染的UIView子类。它不像其他UIView子类一样,会被渲染到屏幕上。这也意味着设置其backgroundColor属性或重载drawRect:方法都不会产生任何效果。
subView和arrangedSubView
开始使用Stack View前,我们先看一下它的属性subViews和arrangedSubvies属性的不同。如果你想添加一个subview给Stack View管理,你应该调用addArrangedSubview:或insertArrangedSubview:atIndex: arrangedSubviews数组是subviews属性的子集。
要移除Stack View管理的subview,需要调用removeArrangedSubview:和removeFromSuperview。移除arrangedSubview只是确保Stack View不再管理其约束,而非从视图层次结构中删除,理解这一点非常重要。
现在我们对Stack View有一定了解,开始使用它。
3. 配置垂直布局的Stack View
打开Main.Storyboard选择上面的Stack View。对Attributes Inspector作如下改变:
Alignment 设为 Center
Distribution 设为 Equal Spacing
Spacing 设为 30
这告诉Stack View为subview添加约束,使其垂直居中并沿Stack View的轴线对称,然后为subview设置边距30。
如果subview大小和Stack View内容区不相符,将根据compression resistance priorities对subview进行拉伸或压缩。在运行时给Stack View添加subview也同样会如此。
布局有任何歧义Stack View都会根据subview在arrangedSubviews中index一步步回退去调整subview的大小,直至其刚好适应Stack View的大小。
4. 给Stack View添加垂直布局的Subview
添加一个label,一个image view和一个button到上面的Stack View里。label在最上面,image view在中间,button在下面。添加完成后看起来是这样:
接下来,我们要在Attributes Inspector里修改一下刚才添加的subview的属性。把label的文本秘诀成“How do you likeour app?”, Text Alignment选择Center 。image view的Image 输入“logo”, Content Mode选Aspect Fit。最后把button的Text 设置成“Add Star!”。
运行app。能看到我们只做了很少工作,但已经添加了三个能响应方向、size class等改变的subview。事实上你并不需手动添加任何约束。
当app运行时,点击Xcode窗口底部Debug View Hierarchy按钮可以进行实时视图调试
选择先前添加的任意一个subview。查看size inspector,我们注意到Stack View已经自动为其添加了约束。下图显示的是为button添加的约束
5. 添加五角星
按钮事件还没和app界面关联,我们先关联起来。停止运行app,打开storyboard。创建一个名为addStar的IBAction 关联到按钮的Touch Up Inside事件。
addStar(_:)方法实现:
@IBAction func addStar(sender: AnyObject) {
let starImgVw:UIImageView = UIImageView(image: UIImage(named: "star"))
self.horizontalStackView.addArrangedSubview(starImgVw)
UIView.animateWithDuration(0.25, animations: {
self.horizontalStackView.layoutIfNeeded()
})
}
给水平布局的Stack View里的星星image添加动画。记住,由于Stack View自动为我们管理Auto Layout constraints,我们只能调用layoutIfNeeded来实现动画。
编译运行app,点击add star按钮。能看到最后结果却不尽人意。
选择下面的Stack View,查看Attributes Inspector会看到问题所在。由于Alignment 和Distribution 都设置成了Fill,Stack View 拉伸了星星以适应其大小。
这在添加更多的星星的时候会引起更多问题。我们希望星星居中显示,而不是被拉伸来适应Stack View的宽度。
修改Alignment 的值为Center ,修改Distribution 的值为Fill Equally。最后在addStar(_:)方法中设置image view的内容。
@IBAction func addStar(sender: AnyObject) {
let starImgVw:UIImageView = UIImageView(image: UIImage(named: "star"))
starImgVw.contentMode = .ScaleAspectFit
self.horizontalStackView.addArrangedSubview(starImgVw)
UIView.animateWithDuration(0.25, animations: {
self.horizontalStackView.layoutIfNeeded()
})
}
运行app,点几次添加按钮,我们发现所有星星居中了。
6. Stack View嵌套
不能删除星星,我们的app评分什么用处不大。打开storyboard,添加一个水平布局的Stack View到上面的Stack View里。把它放置在logo之下,按钮之上。
把“Add Star!”按钮拖到新添加的Stack View里,再添加一个按钮到新的Stack View里。改变按钮的title为“Remove Star”,文本颜色设为red。预览如下:
在Attributes Inspector中编辑新Stack View的属性,改变如下:
Alignment 设为 Center
Distribution 设为 Equal Spacing
Spacing 设为 10
7. 删除五角星
为“Remove Star”按钮创建名为removeStar,事件类型为Touch Up Inside的IBAction响应方法。
removeAction(_:)实现:
@IBAction func removeStar(sender: AnyObject) {
let star:UIView? = self.horizontalStackView.arrangedSubviews.last
if let aStar = star
{
self.horizontalStackView.removeArrangedSubview(aStar)
aStar.removeFromSuperview()
UIView.animateWithDuration(0.25, animations: {
self.horizontalStackView.layoutIfNeeded()
})
}
}
运行app,现在既可增加,也可删除了。改变模拟器方向或者旋转设备看看app会怎样调整其界面。我们并未添加一行约束就构建好了app的用户界面。
需要注意的是:removeStar(_:)里调用removeFromSuperview是把subview从视图层级中移除。再次调用removeArrangedSubview(_:)只是告诉Stack View不再需要管理subview的约束。而subview会一直保持在视图层级结构中直到调用removeFromSuperview把它移除。
结论
UIStackView类大大简化了用户界面开发。这是好事,特别是随着硬件的改变。使用UIStackView,减少了开发者为简单场景设置枯燥的约束,把繁杂的工作交给了UIKit。
iOS9新特性之UIStackView的更多相关文章
- iOS9新特性-UIStackView
1. UIStackView相关属性理解 UIStackView是iOS9之后推出的,我也是第一次接触,在学习的过程中对于其中的相关属性,尤其是对其中的distribution几个属性值,一知半解的, ...
- iOS9新特性——堆叠视图UIStackView
一.引言 随着autolayout的推广开来,更多的app开始使用自动布局的方式来构建自己的UI系统,autolayout配合storyBoard和一些第三方的框架,对于创建约束来说,已经十分方便,但 ...
- Xcode And iOS9新特性
Xcode And iOS9 1. Xcode7 新特性 > 可直接在真机上运行自己的应用,只需要有苹果账号,无需购买苹果开发者账号. > 可设置在出现 EXC_BAD_ACCESS 错误 ...
- IOS9新特性之Contacts联系人
在以前iOS开发中,涉及联系人相关的编程,代码都非常繁琐,并且框架的设计也不是Objective-C风格的,这使开发者用起来非常的难受.在iOS9中,apple终于解决了这个问题,全新的Contact ...
- iOS9新特性
本文主要是说一些iOS9适配中出现的坑,如果只是要单纯的了解iOS9新特性可以看瞄神的开发者所需要知道的 iOS 9 SDK 新特性.9月17日凌晨,苹果给用户推送了iOS9正式版,随着有用户陆续升级 ...
- iOS9新特性之泛型
iOS9新特性之泛型 作用:限制类型 好处:1.提高开发规范,减少程序员之间的交流 2.通过集合取出来的对象,直接当作泛型对象使用,可以直接使用点语法(id类型不能使用点语法) 使用场景: 1.在集 ...
- ios开发ios9新特性关键字学习:泛型,逆变,协变,__kindof
一:如何去学习?都去学习什么? 1:学习优秀项目的设计思想,多问几个为什么,为什么要这么设计,这么设计的好处是什么,还能不能在优化 ,如何应用到自己的项目中 2:学习优秀项目的代码风格,代码的封装设计 ...
- ios9新特性概述
1.iPad的分屏功能很重要. 开发者对iPad的分屏功能感到兴奋,并认为其对苹果未来非常重要.电子邮件信息应用Hop创始人艾瑞兹·皮洛索夫(Erez Pilosof)认为,如果苹果如传闻中那样决定推 ...
- iOS9新特性 window决定程序的状态栏管理问题
Xcode7升级之后遇到的问题 问题一: 老项目在Xcode6上运行没有任何问题,但在Xcode7上运行直接崩了! 经过一波分析: 发现是因为我顶部状态栏处添加了topWindow,用于处理Tab ...
随机推荐
- scss组件定制的一些学习
应组织上的要求,简化前端开发,提高工作效率,开始着手研究scss框架及组件化. 把一些长的像的弄在一起,就有了组件化. 但组件只用一部分需要的,就有了定制. 下面是参考一个button组件写出的一些简 ...
- IIS下图片防盗连设置详解
小站只有100个IIS,盗链后经常是连主页都打不开,就想着弄个图片防盗链,在网上找了一下资料,正则表达式的写法啊,ISAPI_REWRITE基本配置啊等等,找来啃了一天终于发现有三个方法实现. 第一. ...
- CMD 下 进入 ORACLE
.sqlplus /nolog .connect sys/orcl@ORCL as sysdba .select sysdate from dual exit;
- 简单代码JS随机,数组操作,延时执行
<script language="javascript"> var str="baidu.com,163.com,sohu.com,kankan.com,1 ...
- 最简单的ASP动态页面生成伪静态方法
目前网站制作中很多网站都采用生成静态页的方法,原因是这样访问速度会得到提高(服务器端CPU利用率很低),另外也容易被搜索引擎收录,但是这带来的一个问题就是需要足够大的空间存放这些静态页面,如果你的空间 ...
- QT使用BC技术(网页与桌面结合)开发程序,好多相关链接(寒山居士)
http://blog.csdn.net/Esonpo/article/category/1366376
- Graphviz-Gdot语言学习
GVEdit这个绘图软件呢我也是刚接触的,感觉画起图来还是很爽的...尤其很熟悉c++后很容易上手这门dot语言. 先看一下十分清新的编程界面: 没有天下最邪恶的语法加亮,没有缩进行...这又算什么! ...
- Numerical Methods with MATLAB(1)
目前正在阅读MATLAB相关的书籍:Numerical Methods with MATLAB,现在感觉这本书写的还行, 细致基础,而且写的比较清楚,同时把malab和数值算法结合在一起. 目前刚看完 ...
- HDOJ 1279 验证角谷猜想
Problem Description 数论中有许多猜想尚未解决,其中有一个被称为"角谷猜想"的问题,该问题在五.六十年代的美国多个著名高校中曾风行一时,这个问题是这样描述的:任何 ...
- java——Arrays.asList()方法
Arrays.asList() 是将数组作为列表 问题来源于: public class Test { public static void main(String[] args) { int[] a ...