码迷,mamicode.com
首页 > 移动开发 > 详细

iOS 9界面适配利器:详解Xcode 7的新特性UIStackView

时间:2015-10-12 16:55:24      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:

前言

自适应、适配、布局这几个关键词一直伴随着iOS开发,从以前的单一尺寸屏幕,到现在的多尺寸屏幕,Apple一直致力于让开发人员尽可能少在这些事上耗费过多的精力,所以Apple在2012年推出了Auto Layout特性,2014年又推出了Adaptive Layout、Size Classes,2015年又推出了Stack View。这些无一不是我们开发者做适配的利器。今天就让我们看看StackView是怎么一回事。

注:示例开发环境为Xcode7 Beta 2

我们先来看看下面这个常见的布局:

技术分享

这是一种很常见的汉堡布局,如果我们需要让它自适应不同尺寸的屏幕,我们要添加哪些约束呢?

技术分享

看看图中这些约束,你们会不会感到莫名的烦躁呢,至少我是的。更让人抓狂的是,如果需要在中间再添加一个长方形,那么你要修改关联的好几个约束,有没有掀桌的冲动呢?

不过,我们开发人员总是幸运的,Apple在Xcode7中添加了一个新的特性StackView,它能完美的解决这个闹心的问题。

StackView其实一个视图容器,不过它会对它的子视图根据一定规则自动布局,将子视图按栈的排列方式进行布局,并且有几个主要的属性:

方向

StackView有水平和垂直两个方向的布局模式:

技术分享

间隔

StackView可以设置子视图之间的间隔:

技术分享

对齐方式

StackView可以设置子视图的对齐方式(水平方向和垂直方向的该属性值有所区别):

技术分享

  • Fill:子视图填充StackView。
  • Leading:靠左对齐。
  • Trailing:靠右对齐。
  • Center:子视图以中线为基准对齐。
  • Top:靠顶部对齐。
  • Bottom:靠底部对齐。
  • First Baseline:按照第一个子视图中文字的第一行对齐。
  • Last Baseline:按照最后一个子视图中文字的最后一行对齐。

分布比例

StackView可以设置子视图的分布比例:

技术分享

  • Fill:默认分布方式。
  • Fill Equally:子视图的高度或宽度保持一致。
  • Fill:Proportionally:StackView自己计算出它认为合适的分布方式。
  • Equal Spacing:子视图保持同等间隔的分布方式。
  • Equal Centering:每个子视图中心线之间保持一致的分布方式。

一切让示例来说话,在这篇文章中我们将逐步开发一个电影影评的应用来详细讲解如何使用StackView。

 

iOS 9界面适配利器:详解Xcode 7的新特性UIStackView

标签:

原文地址:http://www.cnblogs.com/BinZone/p/4871856.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!