【OC】巧用UIStackView简化布局

UIStackView的运用

文章目录

• UIStackView的运用
• • 引入
  • UIStackView的作用
  • UIStackView的属性
  • • compression resistance 和 hugging
    • axis
    • alignment
    • Distribution
    • spacing
  • UIStackView的方法
  • UIStackView的示例

引入

在仿写ZARA的过程之中，我看到软件之中是有大量的按钮排列在一起的，如果自己一个一个手动将按钮给添加到主视图之中，布局就会感觉十分麻烦，为了方便操作，于是我便学习了UIStackView的相关用法来简化布局的繁琐。

UIStackView的作用

UIStackView又可以被称作堆栈视图，是一种存储视图的容器，用于简化和管理其子视图的布局和排列。

它提供了一个高效的接口用于平铺一行或一列的视图组合。对于嵌入到 StackView 的视图，我们不用再添加自动布局的约束了。UIStackView会管理这些子视图的布局，并帮我们自动布局约束。也就是说，这些子视图能够适应不同的屏幕尺寸。也就是说我们只需要去管理UIStackView本身的布局，而其中的子视图的布局可以由调控UIStackView之中的属性来进行操作。

UIStackView能对布局的代码进行化简，减少了手动添加和管理约束的工作量。而且作为一个容器，删除或者添加某一个视图时，十分便利，可以使用相关方法进行动态的操作，而且布局还会相应的进行自动布局。

另外，UIStackView 支持嵌套，我们可以将一个 Stack View 嵌套到另一个 Stack View 中，从而实现更为复杂的用户界面。（但我还未使用过）

与其他继承于``UIView`的视图不同，UIStackView 它本身不能自我渲染，比如他的 backgroundColor 是无效的，所以它注定要和 UIView 相辅相成的进行工作。它能够帮助 UIView 来处理 子View 的位置和大小等布局问题。

UIStackView的属性

compression resistance 和 hugging

compression resistance（抗压缩性）和 hugging（抗拉伸性）是 UIStackView 中的两个属性，用于控制子视图在布局过程中的压缩和拉伸行为。通常情况下，较高的值表示子视图更不容易被压缩（compression resistance）或拉伸（hugging）。

我们一般使用[view setContentHuggingPriority:(UILayoutPriority) forAxis:(UILayoutConstraintAxis)]来对其进行设置

UILayoutPriority为float类型的浮点数，具体枚举类型如下：

typedef float UILayoutPriority NS_TYPED_EXTENSIBLE_ENUM; static const UILayoutPriority UILayoutPriorityRequired API_AVAILABLE(ios(6.0)) = 1000; // A required constraint.  Do not exceed this. static const UILayoutPriority UILayoutPriorityDefaultHigh API_AVAILABLE(ios(6.0)) = 750; // This is the priority level with which a button resists compressing its content. static const UILayoutPriority UILayoutPriorityDragThatCanResizeScene API_AVAILABLE(macCatalyst(13.0)) = 510; // This is the appropriate priority level for a drag that may end up resizing the window's scene. static const UILayoutPriority UILayoutPrioritySceneSizeStayPut API_AVAILABLE(macCatalyst(13.0)) = 500; // This is the priority level at which the window's scene prefers to stay the same size.  It's generally not appropriate to make a constraint at exactly this priority. You want to be higher or lower. static const UILayoutPriority UILayoutPriorityDragThatCannotResizeScene API_AVAILABLE(macCatalyst(13.0)) = 490; // This is the priority level at which a split view divider, say, is dragged.  It won't resize the window's scene. static const UILayoutPriority UILayoutPriorityDefaultLow API_AVAILABLE(ios(6.0)) = 250; // This is the priority level at which a button hugs its contents horizontally. static const UILayoutPriority UILayoutPriorityFittingSizeLevel API_AVAILABLE(ios(6.0)) = 50;  

UILayoutConstraintAxis为float类型的浮点数，具体枚举类型如下：

typedef NS_ENUM(NSInteger, UILayoutConstraintAxis) {     UILayoutConstraintAxisHorizontal = 0,     UILayoutConstraintAxisVertical = 1 }; 

axis

该属性规定了UIStackView的布局方向

• Vertical: 垂直
• Horizontal: 水平（默认值）

alignment

子视图的对齐方式

.fill: （默认） 尽可能铺满。

.leading: 当 axis 是 vertical 的时候，按 leading 方向对齐 等价于： 当 axis 是 horizontal 的时候，按 top 方向对齐。

.top: 当 axis 是 horizontal 的时候，按 top 方向对齐 等价于： 当 axis 是 vertical 的时候，按 leading 方向对齐。

.trailing: 当 axis 是 vertical 的时候，按 trailing 方向对齐 等价于： 当 axis 是 horizontal 的时候，按 bottom 方向对齐。

bottom: 当 axis 是 horizontal 的时候，按 bottom 方向对齐 等价于： 当 axis 是 vertical 的时候，按 trailing 方向对齐。

.center：居中对齐。

Distribution

定义沿堆栈视图轴排列视图的大小和位置的布局。

• fill: （默认值） 根据compression resistance和hugging两个 priority 布局
• fillEqually: 均匀分布
• fillProportionally: 按比例分布
• equalSpacing: 等间距布局，内容大小调整
• equalCentering: 等中间线间距布局，元素间距不小于 spacing 定义的值， 如果放不下，根据compression resistance压缩。

typedef NS_ENUM(NSInteger, UIStackViewDistribution)      UIStackViewDistributionFill = 0     UIStackViewDistributionFillEqually,     UIStackViewDistributionFillProportionally,     UIStackViewDistributionEqualSpacing,     UIStackViewDistributionEqualCentering, } API_AVAILABLE(ios(9.0)); 

spacing

spacing 属性确定子视图之间的间距。它是一个浮点数，表示子视图之间的固定间距。默认值为0。可以根据需要调整间距大小，以实现子视图之间的空白区域。

UIStackView的方法

• init(frame: CGRect)：创建一个 UIStackView
• init(arrangedSubviews views: [UIView])：同样是创建一个 UIStackView，但我们可以将子视图传入。views 数组里的顺序即为子视图显示的顺序。
• addArrangedSubview(view: UIView)：添加一个子视图
• removeArrangedSubview(view: UIView)：删除一个子视图
• insertArrangedSubview(view: UIView, at stackIndex: Int)：在指定位置插入一个子视图

注：如果一个元素没有被 addSubview，调用 arrangedSubviews 会自动 addSubview。当一个元素被 removeFromSuperview ，则 arrangedSubviews也会同步移除当一个元素被 removeArrangedSubview， 不会触发 removeFromSuperview，它依然在视图结构中。

UIStackView的示例

在进行仿写的过程之中，我使用UIStackView来存储按钮，相关代码如下：

- (void)setupTopBar {     self.topBarView = [[UIView alloc] initWithFrame:CGRectZero];     self.topBarView.translatesAutoresizingMaskIntoConstraints = NO;     [self.view addSubview:self.topBarView];          UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectZero];     titleLabel.text = @"ZARA";     titleLabel.font = [UIFont fontWithName:@"HelveticaNeue-Bold" size:60];     titleLabel.textAlignment = NSTextAlignmentLeft;     titleLabel.translatesAutoresizingMaskIntoConstraints = NO;     [self.topBarView addSubview:titleLabel];          // 创建分类标签     UIStackView *categoryStackView = [[UIStackView alloc] initWithFrame:CGRectZero];     categoryStackView.axis = UILayoutConstraintAxisHorizontal;     categoryStackView.alignment = UIStackViewAlignmentCenter;     categoryStackView.distribution = UIStackViewDistributionFillEqually;     categoryStackView.translatesAutoresizingMaskIntoConstraints = NO;     for (int i = 0; i < self.categories.count; i++) {         UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];         [button setTitle:self.categories[i] forState:UIControlStateNormal];         button.tag = i;         [button addTarget:self action:@selector(categoryButtonTapped:) forControlEvents:UIControlEventTouchUpInside];         button.titleLabel.font = [UIFont systemFontOfSize:16];         button.tintColor = [UIColor blackColor];         [categoryStackView addArrangedSubview:button];     }     [self.topBarView addSubview:categoryStackView];          [NSLayoutConstraint activateConstraints:@[         [self.topBarView.topAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.topAnchor constant:-30],         [self.topBarView.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],         [self.topBarView.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],         [self.topBarView.heightAnchor constraintEqualToConstant:150],                  [titleLabel.topAnchor constraintEqualToAnchor:self.topBarView.topAnchor],         [titleLabel.leadingAnchor constraintEqualToAnchor:self.topBarView.leadingAnchor],         [titleLabel.trailingAnchor constraintEqualToAnchor:self.topBarView.trailingAnchor],         [titleLabel.heightAnchor constraintEqualToConstant:100],                  [categoryStackView.topAnchor constraintEqualToAnchor:titleLabel.bottomAnchor],         [categoryStackView.leadingAnchor constraintEqualToAnchor:self.topBarView.leadingAnchor],         [categoryStackView.trailingAnchor constraintEqualToAnchor:self.topBarView.trailingAnchor]     ]]; } 

以上代码实现了，五个相关按钮的布局，按钮在点击之后会切换无限视图的图片种类为对应按钮名称。