服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - IOS - iOS9新特性之UIStackView

iOS9新特性之UIStackView

2021-03-30 16:29路人Q IOS

UIStackView主要包括了四大属性:axis、alignment、distribution、spacing。下面通过本文给大家介绍iOS9新特性之UIStackView的相关知识,感兴趣的朋友一起看看吧

1. uistackview相关属性理解

uistackview是ios9之后推出的,我也是第一次接触,在学习的过程中对于其中的相关属性,尤其是对其中的distribution几个属性值,一知半解的,所以特写此文通过代码实例理解它们每个属性的区别。

uistackview主要包括了四大属性:axis、alignment、distribution、spacing。

一、axis

主要设置uistackview布局的方向:水平方向或垂直方向。

?
1
2
3
4
typedef ns_enum(nsinteger, uilayoutconstraintaxis) {
uilayoutconstraintaxishorizontal = 0,//水平
uilayoutconstraintaxisvertical = 1//垂直
};

二、alignment

主要设置非轴方向子视图的对齐方式。

?
1
2
3
4
5
6
7
8
9
10
typedef ns_enum(nsinteger, uistackviewalignment) {
uistackviewalignmentfill,//子视图填充stackview
uistackviewalignmentleading,//子视图左对齐(axis为垂直方向而言)
uistackviewalignmenttop = uistackviewalignmentleading,//子视图顶部对齐(axis为水平方向而言)
uistackviewalignmentfirstbaseline, // 按照第一个子视图的文字的第一行对齐,同时保证高度最大的子视图底部对齐(只在axis为水平方向有效)
uistackviewalignmentcenter,//子视图居中对齐
uistackviewalignmenttrailing,//子视图右对齐(axis为垂直方向而言)
uistackviewalignmentbottom = uistackviewalignmenttrailing,//子视图底部对齐(axis为水平方向而言)
uistackviewalignmentlastbaseline, // 按照最后一个子视图的文字的最后一行对齐,同时保证高度最大的子视图顶部对齐(只在axis为水平方向有效)
} ns_enum_available_ios(9_0);

具体显示效果如下:

iOS9新特性之UIStackView
filliOS9新特性之UIStackView
topiOS9新特性之UIStackView
centeriOS9新特性之UIStackView
bottomiOS9新特性之UIStackView
first base lineiOS9新特性之UIStackView

三、distribution

设置轴方向上子视图的分布比例(如果axis是水平方向,也即设置子视图的宽度,如果axis是垂直方向,则是设置子视图的高度)。

?
1
2
3
4
5
6
7
typedef ns_enum(nsinteger, uistackviewdistribution) {
uistackviewdistributionfill = 0,
uistackviewdistributionfillequally,
uistackviewdistributionfillproportionally,
uistackviewdistributionequalspacing,
uistackviewdistributionequalcentering,
} ns_enum_available_ios(9_0);

下面以axis=uilayoutconstraintaxishorizontal,

alignment=uistackviewalignmentcenter为例:往uistackview中添加三个uiview,第一个uiview设为40100,第二个uiview设为8080,第一个uiview设为120*60,通过实例来说明每个属性的区别:

(1)uistackviewdistributionfill = 0,默认属性,轴方向上填充uistackview。如果axis为水平方向,则所有子视图的宽度等于uistackview的宽,所以如果只有一个子视图,则子视图的宽度就等于uistackview的宽,如果有两个子视图,且优先级一样,则会拉伸或压缩某个子视图,使两个子视图的宽度之和等于uistackview的宽……,如果axis是垂直方向,则所有子视图的高度等于uistackview的高,必要时会拉伸或压缩某个子视图。

上面是在子视图优先级一致的情况下,如果子视图优先级不一致,则会按优先级从高到低设置子视图的位置,对优先级最低的子视图进行必要的拉伸或压缩。

设置distribution=uistackviewdistributionfill后显示效果:

iOS9新特性之UIStackView

uistackviewdistributionfill

如图所示,由于三个子视图的宽度之和不够uistackview的宽度,优先级又一致,所以第三个子视图被拉伸了。当然,我们可以修改某个子视图的优先级来让其被拉伸。

(2)uistackviewdistributionfillequally,该属性设置后使所有子视图在轴方向上等宽或等高。即如果是水平方向,所有子视图都会被必要的拉伸或压缩,使得每个子视图的宽度一致,原来设置的子视图的宽度都会被忽略;如果是垂直方向,所有子视图的高度也会保持一致,如下所示:

iOS9新特性之UIStackView

uistackviewdistributionfillequally

(3)uistackviewdistributionfillproportionally 该属性设置后会根据原先子视图的比例来拉伸或压缩子视图的宽或高,如实例中三个子视图原先设置的宽度是1:2:3,所以水平方向上显示时,会按照这个比例进行拉伸,如下图所示,拉伸后的宽度依然是1:2:3。

iOS9新特性之UIStackView

uistackviewdistributionfillproportionally

(4)uistackviewdistributionequalspacing 该属性会保持子视图的宽高,所有子视图中间的间隔保持一致。如下图所示,图中子视图的间隔(绿线所示的长度)都是一致的。

iOS9新特性之UIStackView

uistackviewdistributionequalspacing

(5)uistackviewdistributionequalcentering 该属性是控制所有子视图的中心之间的距离保持一致,如下图所示,子视图中心点之间的间隔(绿线所示的长度)是一致的。

iOS9新特性之UIStackView

uistackviewdistributionequalcentering

四、spacing 该属性控制子视图之间的间隔大小,在distribution前三个属性值设置的情况下,子视图之间是没有间隔,我们可以通过spacing属性显式的设置,如下图在distribution=uistackviewdistributionfillequally情况下,设置子视图间隔为10,子视图之间间隔都为10,且子视图依然等宽。

iOS9新特性之UIStackView

spacing=10

2.进阶

我们可以从interface builder右侧的操作面板中,选择uistackview控件直接拖到xib中。可以选择horizontal和vertical两个方向的uistackview,也可以在拖到xib中之后手动修改。

iOS9新特性之UIStackView

然后将两个view拖到这个uistackview中,父视图也可以将uistackview作为子视图来进行多层uistackview嵌套,这也是苹果推荐的做法。

iOS9新特性之UIStackView

打开右侧设置面板来设置uistackview的一些属性,达到更好的布局效果。

iOS9新特性之UIStackView

除了上面的方法也可以在xib中直接选择多个view,然后点击右下方的stack按钮,系统会自动推断布局方式,帮我们自动布局子视图,我们可以在系统布局之后在手动进行调整。

iOS9新特性之UIStackView

代码布局其实本质上就是对数组进行操作,数组中存储的是uistackview的子视图。然后通过设置uistackview的枚举值属性进行页面排布。代码布局的方式这里就不演示了。。。

延伸 · 阅读

精彩推荐
  • IOSiOS通过逆向理解Block的内存模型

    iOS通过逆向理解Block的内存模型

    自从对 iOS 的逆向初窥门径后,我也经常通过它来分析一些比较大的应用,参考一下这些应用中某些功能的实现。这个探索的过程乐趣多多,不仅能满足自...

    Swiftyper12832021-03-03
  • IOSIOS 屏幕适配方案实现缩放window的示例代码

    IOS 屏幕适配方案实现缩放window的示例代码

    这篇文章主要介绍了IOS 屏幕适配方案实现缩放window的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要...

    xiari5772021-06-01
  • IOSiOS布局渲染之UIView方法的调用时机详解

    iOS布局渲染之UIView方法的调用时机详解

    在你刚开始开发 iOS 应用时,最难避免或者是调试的就是和布局相关的问题,下面这篇文章主要给大家介绍了关于iOS布局渲染之UIView方法调用时机的相关资料...

    windtersharp7642021-05-04
  • IOSiOS 雷达效果实例详解

    iOS 雷达效果实例详解

    这篇文章主要介绍了iOS 雷达效果实例详解的相关资料,需要的朋友可以参考下...

    SimpleWorld11022021-01-28
  • IOS关于iOS自适应cell行高的那些事儿

    关于iOS自适应cell行高的那些事儿

    这篇文章主要给大家介绍了关于iOS自适应cell行高的那些事儿,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    daisy6092021-05-17
  • IOSIOS开发之字典转字符串的实例详解

    IOS开发之字典转字符串的实例详解

    这篇文章主要介绍了IOS开发之字典转字符串的实例详解的相关资料,希望通过本文能帮助到大家,让大家掌握这样的方法,需要的朋友可以参考下...

    苦练内功5832021-04-01
  • IOSiOS中tableview 两级cell的展开与收回的示例代码

    iOS中tableview 两级cell的展开与收回的示例代码

    本篇文章主要介绍了iOS中tableview 两级cell的展开与收回的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    J_Kang3862021-04-22
  • IOS解析iOS开发中的FirstResponder第一响应对象

    解析iOS开发中的FirstResponder第一响应对象

    这篇文章主要介绍了解析iOS开发中的FirstResponder第一响应对象,包括View的FirstResponder的释放问题,需要的朋友可以参考下...

    一片枫叶4662020-12-25