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

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网络请求之AFNetWorking 3.x 使用详情

    IOS网络请求之AFNetWorking 3.x 使用详情

    本篇文章主要介绍了IOS网络请求之AFNetWorking 3.x 使用详情,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    总李写代码6892021-03-04
  • IOSiOS10 Xcode8适配7个常见问题汇总

    iOS10 Xcode8适配7个常见问题汇总

    这篇文章主要为大家详细汇总了iOS10 Xcode8适配7个常见问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    索马里猫10332021-02-01
  • IOSiOS逆向教程之logify跟踪方法的调用

    iOS逆向教程之logify跟踪方法的调用

    这篇文章主要给大家介绍了关于iOS逆向教程之logify跟踪方法调用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学...

    Mr.Guo11472021-04-28
  • IOSiOS中时间与时间戳的相互转化实例代码

    iOS中时间与时间戳的相互转化实例代码

    这篇文章主要介绍了iOS中时间与时间戳的相互转化实例代码,非常具有实用价值,需要的朋友可以参考下。...

    张无忌!4812021-03-09
  • IOSiOS常见的几个修饰词深入讲解

    iOS常见的几个修饰词深入讲解

    这篇文章主要给大家介绍了关于iOS常见的几个修饰词的相关资料,iOS修饰词包括assign、weak、strong、retain、copy、nonatomic、atomic、readonly、readwrite,文中通过示...

    郡王丶千夜7422021-05-10
  • IOSxcode8提交ipa失败无法构建版本问题的解决方案

    xcode8提交ipa失败无法构建版本问题的解决方案

    xcode升级到xcode8后发现构建不了新的版本。怎么解决呢?下面小编给大家带来了xcode8提交ipa失败无法构建版本问题的解决方案,非常不错,一起看看吧...

    Cinna丶7542021-02-03
  • IOS谈一谈iOS单例模式

    谈一谈iOS单例模式

    这篇文章主要和大家谈一谈iOS中的单例模式,单例模式是一种常用的软件设计模式,想要深入了解iOS单例模式的朋友可以参考一下...

    彭盛凇11872021-01-19
  • IOSiOS APP实现微信H5支付示例总结

    iOS APP实现微信H5支付示例总结

    这篇文章主要介绍了iOS APP实现微信H5支付示例总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下...

    一张小A11332021-06-01