preface

First of all, I wish you a happy weekend before writing this article, and then I would like to introduce myself. My name is Wu Haichao (WHC) and I have rich experience in iOS development architecture. After Github, I will also share articles with practical significance to you in the form of articles.

The theme

This time I want to tell you about linear layout in iOS, I think Android friends are familiar with linear layout, very easy to use, fast and powerful, and our iOS9 official also launched a similar linear layout framework UIStackView, ok, let’s introduce this UIStackView in detail.

UIStackView introduction

I’m sure a lot of you who do iOS haven’t really started using it yet, because it supports iOS9 at the very least, and obviously a lot of our apps need to support iOS7 or even iOS6. UIStackView is a fast UI layout framework (horizontal/vertical) that automatically constrainssubviews based on parameters, greatly improving our development efficiency. With UIStackView you don’t need to impose constraints on the subviews you add to it. Instead, you need to set more descriptive attributes such as Axis, Spacing, Alignment, and Distribution. Naturally, you can configure it in the Properties panel so that you can easily create a user interface that works well on all iOS devices with a mouse.



- (void)viewDidLoad {
    [super viewDidLoad];
    // Create StackView instance
    UIStackView * containerView = UIStackView.new;
    [self.view addSubview: containerView];
    // Add constraints to StackView
    containerView.whc_LeftSpace(0)
                .whc_TopSpace(100)
                .whc_RightSpace(0)
                .whc_Height(200);
    /// Set the layout orientation level
    containerView.axis = UILayoutConstraintAxisHorizontal;
    /// Set the subview distribution StackView ratio equal
    containerView.distribution = UIStackViewDistributionFillEqually;
    /// Set the gap between subviews to 10
    containerView.spacing = 10;
    /// Set the subview to populate StackView
    containerView.alignment = UIStackViewAlignmentFill;
    // add 4 subviews to StackView
    for (NSInteger i = 0; i < 4; i++) {
        UIView *view = [[UIView alloc] init];
        view.backgroundColor = [UIColor colorWithRed:random()%256/255.0 green:random()%256/255.0 blue:random()%256/255.0 alpha:1]; [containerView addArrangedSubview:view]; }}Copy the code

The constraint layout library WHC_AutoLayout is used above

UIStackView summary

Now we can see that UIStackView does bring us a lot of convenience, but it also has two disadvantages: (1) because it only supports iOS9 and above systems, it makes us very difficult to compatibility. (2) Only support horizontal and vertical direction, sometimes we need to like the layout of the nine grid (both horizontal and vertical direction layout), which is a little inconvenient. (3) Layout parameters are difficult to understand, not clear expression (may be my problem, hehe…)

WHC_StackView introduction

Based on the above three points, I started my own project to build a similar UIStackView called WHC_StackView. First, WHC_StackView is completely based on the automatic layout library WHC_AutoLayout and developed as a sub-module, so WHC_StackView has Swift, OC versions.

advantages

(1) Support iOS6 or higher (2) support horizontal/vertical and simultaneous horizontal vertical layout (similar to the nine grid) (3) support automatic dividing line Settings (3) simple and clear parameter configuration

example

- (void)viewDidLoad {
    [super viewDidLoad];
    WHC_StackView * stackView = [WHC_StackView new];
    [self.view addSubview: stackView];

    /// a line of code to add constraints
    stackView.whc_LeftSpace(10)
             .whc_TopSpace(10)
             .whc_RightSpace(10)
             .whc_Height(100);

    / / / configure StackView
    stackView.whc_Edge = UIEdgeInsetsMake(10.10.10.10); / / padding
    stackView.whc_Orientation = All;                  // Automatically mix horizontal and vertical layouts
    stackView.whc_HSpace = 10;                             // Subview horizontal clearance
    stackView.whc_VSpace = 10;                             // Subview vertical clearance
    stackView.whc_Column = 2;// Set the horizontal subview to 2 columns

    /// Add four subviews to StackView
    for (int i = 0; i < 4; i++) {
       UIView * view = UIView.new;
       [stackView addSubview:view];
    }
    /// start layout
    [stackView whc_StartLayout];
}Copy the code

Demo

WHC_StackView supports split line Settings (horizontal, vertical, horizontal vertical)

Automatic wide height WHC_StackView

The end of the

WHC_StackView: github.com/netyouli/WH…

  • If you have any problems in using it, please feel free to issue me!
  • Happy to answer any questions you may have!
  • Instead of giving me a star, throw me a BUG!
  • If you want more interfaces from definitions or suggestions/comments, please welcome issue Me! I will provide more interfaces according to your needs!

1. Store high-performance model object database: github.com/netyouli/WH… 2.Json to Model Mac tools: github.com/netyouli/WH… 3. Local monitoring VC automatic management keyboard: github.com/netyouli/WH… 4. Scan iOS/Android projects without using picture MAC tool: github.com/netyouli/WH…

Thank you very much for reading. Thank you!