ios fix布局失效 ios 布局方式

转载

mob64ca140ee96c 2024-05-17 12:42:48

文章标签 ios fix布局失效 swift 人工智能前端 ViewUI 文章分类 iOS 移动开发

作者： Xs·H

在沐灵洛线下分享iOS UIButton根据内容自动布局时，有和前端同学讨论到iOS的常用布局方式。讨论过程十分热闹，不容易记录，但作者认为讨论结果有必要记录一下，希望能帮助到一些同学。作者将iOS常用布局方式归纳为Frame、Autoresizing、Constraint、StackView和Masonry五种，并将逐一介绍。本篇文章介绍StackView。

UIStackView是UIKit在iOS9中新增的视图类。它可以被理解成一个容器，能够对添加到容器中的视图按照行或列进行布局。作者以之前文章中提到的4分图为例，结合storyboard，可以很快速地实现效果。如下图。

如上图，作者在没有编码的情况下使用UIStackView快速构建了一个4分图的布局效果，甚至没有对4分图添加Constraint。可见UIStackView在自动布局方便有着强大的能力和效率。当然UIStackView也允许开发者进行编码，使用相关属性实现需求效果。使用UIStackView实现4分图效果的代码如下。

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    UIView *subView1 = [[UIView alloc] initWithFrame:CGRectZero];
    subView1.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:.6];
    
    UIView *subView2 = [[UIView alloc] initWithFrame:CGRectZero];
    subView2.backgroundColor = [[UIColor greenColor] colorWithAlphaComponent:.6];
    
    UIView *subView3 = [[UIView alloc] initWithFrame:CGRectZero];
    subView3.backgroundColor = [[UIColor blueColor] colorWithAlphaComponent:.6];
    
    UIView *subView4 = [[UIView alloc] initWithFrame:CGRectZero];
    subView4.backgroundColor = [[UIColor yellowColor] colorWithAlphaComponent:.6];
    
    
    UIStackView *subStackView1 = [[UIStackView alloc] initWithFrame:CGRectZero];
    subStackView1.spacing = 10.0;
    subStackView1.alignment = UIStackViewAlignmentFill;
    subStackView1.axis = UILayoutConstraintAxisHorizontal;
    subStackView1.distribution = UIStackViewDistributionFillEqually;
    [subStackView1 addArrangedSubview:subView1];
    [subStackView1 addArrangedSubview:subView2];
    
    UIStackView *subStackView2 = [[UIStackView alloc] initWithFrame:CGRectZero];
    subStackView2.spacing = 10.0;
    subStackView2.alignment = UIStackViewAlignmentFill;
    subStackView2.axis = UILayoutConstraintAxisHorizontal;
    subStackView2.distribution = UIStackViewDistributionFillEqually;
    [subStackView2 addArrangedSubview:subView3];
    [subStackView2 addArrangedSubview:subView4];
    
    
    UIStackView *stackView = [[UIStackView alloc] initWithFrame:self.view.bounds];
    stackView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    stackView.spacing = 10.0;
    stackView.alignment = UIStackViewAlignmentFill;
    stackView.axis = UILayoutConstraintAxisVertical;
    stackView.distribution = UIStackViewDistributionFillEqually;
    [stackView addArrangedSubview:subStackView1];
    [stackView addArrangedSubview:subStackView2];
    [self.view addSubview:stackView];
}
复制代码

在上述代码中，作者将4个subView分别放到了两个subStackView中，并实现了subView在subStackView中横向等宽排列，然后将两个subStackView放到了stackView中，并实现了subStackView在stackView中竖向等高排列。这里，要重点介绍一下实现这些效果的属性。

axis

axis是UILayoutConstraintAxis类型的枚举变量，负责设置stackView排列方向。

/* A stack with a horizontal axis is a row of arrangedSubviews,
and a stack with a vertical axis is a column of arrangedSubviews.
 */
@property(nonatomic) UILayoutConstraintAxis axis;
复制代码

typedef NS_ENUM(NSInteger, UILayoutConstraintAxis) {
    UILayoutConstraintAxisHorizontal = 0,
    UILayoutConstraintAxisVertical = 1
};
复制代码

alignment

alignment是UIStackViewAlignment类型的枚举变量，负责设置stackView子视图的对齐方式。

/* The layout of the arrangedSubviews transverse to the axis;
 e.g., leading/trailing edges in a vertical stack
 */
@property(nonatomic) UIStackViewAlignment alignment;
复制代码

/* Alignment—the layout transverse to the stacking axis.
 */
typedef NS_ENUM(NSInteger, UIStackViewAlignment) {
    /* Align the leading and trailing edges of vertically stacked items
     or the top and bottom edges of horizontally stacked items tightly to the container.
     */
    UIStackViewAlignmentFill,//!< 子视图填充
    
    /* Align the leading edges of vertically stacked items
     or the top edges of horizontally stacked items tightly to the relevant edge
     of the container
     */
    UIStackViewAlignmentLeading,//!< 竖直排列时，子视图左对齐
    UIStackViewAlignmentTop = UIStackViewAlignmentLeading,//!< 水平排列时，子视图上对齐
    UIStackViewAlignmentFirstBaseline, // Valid for horizontal axis only //!< 水平排列时，子视图按照首个子视图的首行文字对齐
    
    /* Center the items in a vertical stack horizontally
     or the items in a horizontal stack vertically
     */
    UIStackViewAlignmentCenter,//!< 居中对齐
    
    /* Align the trailing edges of vertically stacked items
     or the bottom edges of horizontally stacked items tightly to the relevant
     edge of the container
     */
    UIStackViewAlignmentTrailing,//!< 竖直排列时，子视图右对齐
    UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing,//!< 水平排列时，子视图下对齐
    UIStackViewAlignmentLastBaseline, // Valid for horizontal axis only //!< 水平排列时，子视图按照最后一个子视图的末行文字对齐
} NS_ENUM_AVAILABLE_IOS(9_0);
复制代码

distribution

distribution是UIStackViewDistribution类型的枚举变量，负责设置stackView子视图的宽度或高度布局。

/* The layout of the arrangedSubviews along the axis
 */
@property(nonatomic) UIStackViewDistribution distribution;
复制代码

/* Distribution—the layout along the stacking axis.
 
 All UIStackViewDistribution enum values fit first and last arranged subviews tightly to the container,
 and except for UIStackViewDistributionFillEqually, fit all items to intrinsicContentSize when possible.
 */
typedef NS_ENUM(NSInteger, UIStackViewDistribution) {
    
    /* When items do not fit (overflow) or fill (underflow) the space available
     adjustments occur according to compressionResistance or hugging
     priorities of items, or when that is ambiguous, according to arrangement
     order.
     */
    UIStackViewDistributionFill = 0, //!< 子视图填充，多个视图时以最后一个视图填充
    
    /* Items are all the same size.
     When space allows, this will be the size of the item with the largest
     intrinsicContentSize (along the axis of the stack).
     Overflow or underflow adjustments are distributed equally among the items.
     */
    UIStackViewDistributionFillEqually,//!< 子视图等宽或等高填充
    
    /* Overflow or underflow adjustments are distributed among the items proportional
     to their intrinsicContentSizes.
     */
    UIStackViewDistributionFillProportionally,//!< 子视图按比例填充
    
    /* Additional underflow spacing is divided equally in the spaces between the items.
     Overflow squeezing is controlled by compressionResistance priorities followed by
     arrangement order.
     */
    UIStackViewDistributionEqualSpacing,//!< 子视图等间距填充
    
    /* Equal center-to-center spacing of the items is maintained as much
     as possible while still maintaining a minimum edge-to-edge spacing within the
     allowed area.
        Additional underflow spacing is divided equally in the spacing. Overflow 
     squeezing is distributed first according to compressionResistance priorities 
     of items, then according to subview order while maintaining the configured 
     (edge-to-edge) spacing as a minimum.
     */
    UIStackViewDistributionEqualCentering,//!< 子视图等中点填充
} NS_ENUM_AVAILABLE_IOS(9_0);
复制代码

spacing

spacing是CGFloat类型的变量，负责设置stackView子视图之间的间距。

/* Spacing between adjacent edges of arrangedSubviews.
 Used as a strict spacing for the Fill distributions, and
 as a minimum spacing for the EqualCentering and EqualSpacing
 distributions. Use negative values to allow overlap.
 
 On iOS 11.0 or later, use UIStackViewSpacingUseSystem (Swift: UIStackView.spacingUseSystem) 
 to get a system standard spacing value. Setting spacing to UIStackViewSpacingUseDefault 
 (Swift: UIStackView.spacingUseDefault) will result in a spacing of 0.
 
 System spacing between views depends on the views involved, and may vary across the 
 stack view.
 
 In vertical stack views with baselineRelativeArrangement == YES, the spacing between 
 text-containing views (such as UILabels) will depend on the fonts involved.
 */
@property(nonatomic) CGFloat spacing;
复制代码

综上，UIStackView可谓是iOS的布局神器，在cell等多见布局需求的场景中能起到重要的作用。关于本篇文章中的代码部分，可以从QiLayoutDemo中获取。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。