iOS中UIStackView的使用

闲言

最近在维护项目的过程中发现了之前的同事有使用UIStackView布局,觉得还挺方便的,因为之前并没有使用过UIStackView布局,所以利用一点时间整理一下有关UIStackView布局需要注意的点以及在哪种情况下使用UIStackView布局会更加高效.

简单了解UIStackView

在iOS9中苹果在UIKit框架中引入了一个新的视图类UIStackViewUIStackView 类提供了一个高效的接口用于平铺一行或一列的视图组合。Stack视图管理着所有在它的 arrangedSubviews 属性中的视图的布局。这些视图根据它们在 arrangedSubviews 数组中的顺序沿着 Stack 视图的轴向排列。
简而言之,即UIStackView,就是一个ContainerView,可以沿横向或纵向按照一定的规则布局内部的子View

UIStackView属性讲解

UIStackView主要包括了四大属性:axisalignmentdistributionspacing

  • axis
    主要设置UIStackView布局的方向:水平方向或垂直方向。
typedef NS_ENUM(NSInteger, UILayoutConstraintAxis) {

UILayoutConstraintAxisHorizontal = 0,//水平

UILayoutConstraintAxisVertical = 1//垂直

};
  • alignment
    主要设置非轴方向子视图的对齐方式。
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);
  • distribution
    设置轴方向上子视图的分布比例(如果axis是水平方向,也即设置子视图的宽度,如果axis是垂直方向,则是设置子视图的高度)。
typedef NS_ENUM(NSInteger, UIStackViewDistribution) {

UIStackViewDistributionFill = 0,

UIStackViewDistributionFillEqually,

UIStackViewDistributionFillProportionally,

UIStackViewDistributionEqualSpacing,

UIStackViewDistributionEqualCentering,

} NS_ENUM_AVAILABLE_IOS(9_0);
  • spacing
    该属性控制子视图之间的间隔大小,在distribution前三个属性值设置的情况下,子视图之间是没有间隔,我们可以通过spacing属性显式的设置

具体使用以及注意点

动态布局的时候很方便,隐藏一个视图,其他视图自动更新约束,如果只用masonry的话还要手动去更新约束,内容一多就很麻烦,所以这玩意儿是布局神器。目前笔者仅仅是使用UIStackView进行一些简单页面的布局,比如需要动态显示隐藏一些布局时优先会考虑使用UIStackView布局,但也不是非要使用UIStackView布局,比如一些复杂的界面,页面元素较多的也看笔者就不建议使用UIStackView布局。当然如果大家有好的想法,也可以在评论区讨论,或者私信我都可以,欢迎评论。

猜你喜欢

转载自blog.csdn.net/weixin_34390996/article/details/87502148