Home PC Games Linux Windows Database Network Programming Server Mobile  
  Home \ Programming \ iOS9 new feature - stacked view UIStackView     - Systemd on RHEL7 (Linux)

- AngularJS achieve picture upload feature (Programming)

- Eclipse, Tomcat configuration JNDI connection Oracle data source example (Server)

- Iptables command in detail (Linux)

- See Linux kernel, CPU, memory, and various versions of the command module and means (Linux)

- Linux Mint 17 set up the Ruby environment (Linux)

- cp: omitting directory error solutions under Linux (Linux)

- Linux System Getting Started Learning: Repair fatal error openssl aes h no such file or directory (Linux)

- Ruby and Python simple comparison (Programming)

- DRBD + Heartbeat solve NFS single point of failure (Server)

- Eclipse distributed management using GitHub project development (Linux)

- Linux basic introductory tutorial ---- regex basis (Linux)

- shell script: MySQL monitoring service is normal (Database)

- Ubuntu will be written in a command file, executable file, source command (Linux)

- Source MongoDB 3.2.1 installed on CentOS6.5 (Database)

- SaltStack installation and testing (Server)

- Nodejs complete installation instructions for Express (Linux)

- VMware Workstation + Ubuntu 10.04 Download the Android 2.2 source code (Linux)

- 20+ Best Practices article MySQL Performance Optimization (Database)

- Spring Data study notes -Helloworld (Programming)

  iOS9 new feature - stacked view UIStackView
  Add Date : 2018-11-21      
  IOS9 in, Apple also provided a new layout view for developers, UIStackView can help developers more simple to use layout without having to manually add too much layout constraints.

I. Introduction

With autolayout promotion of open, more app start to build your own UI system use automatic layout, autolayout with storyBoard and some third-party framework to create constraints, it has been very convenient, but for some dynamic linear layout view, we need to manually add the constraint is not only very much, and if we need to insert or remove some of the UI elements of the time, we do a lot of work to modify the constraints, UIStackView just to solve this problem.
Second, the storyBoard acquaintance StackView

UIStackView management is a set of stacked view controller class view, when a so-called stack view of a tiled layout of linear, non-overlapping, staggered layout direction can not be, if you did watchOS development, you will find, in fact, StackView and watchOS the group can be very similar.

For example, if we need a layout of an effect, placed in the middle of the screen a few patches of the same size, regardless of how the screen orientation, its position will not change, and you can add and remove patches to which the number of

First, we pulled into a stackView in the ViewController

Some properties are set as follows

Axis is to set the direction of the layout, horizontal and vertical two ways, a StackView can select only one layout mode.

Alignment is aligned to choose their mode of management view, we here choose full.

Distribution is set its arrangement management view, we chose full-width.

Spacing to set the spacing between views is set to 10.

After One thing to note, stackView layout for its internal management view for itself, we also need to add some constraints, it will be constrained in the middle of the screen.

To which we drag any number of view, set a different color, to achieve our desired effect, and can freely add and delete dynamic in which the number of view, without changing constraints.
Third, learn from the code UIStackView

Create a UIStackView by code is very simple, first of all, let's realize the above effect through the code:

 NSMutableArray * array = [[NSMutableArray alloc] init];
    for (int i = 0; i <5; i ++) {
        UIView * view = [[UIView alloc] init];
        view.backgroundColor = [UIColor colorWithRed: arc4random ()% 255 / 255.0 green: arc4random ()% 255 / 255.0 blue: arc4random ()% 255 / 255.0 alpha: 1];
        [Array addObject: view];
    UIStackView * stackView = [[UIStackView alloc] initWithArrangedSubviews: array];
    [Self.view addSubview: stackView];
    [StackView mas_makeConstraints: ^ (MASConstraintMaker * make) {
        make.centerX.equalTo (self.view.mas_centerX);
        make.centerY.equalTo (self.view.mas_centerY);
        make.leading.equalTo (self.view.mas_leading) .offset (20);
        make.trailing.equalTo (self.view.mas_trailing) .offset (-20);
        make.size.height.equalTo (@ 100);
    stackView.axis = UILayoutConstraintAxisHorizontal;
    stackView.distribution = UIStackViewDistributionFillEqually;
    stackView.alignment = UIStackViewAlignmentFill;

Our layout is no problem, and can dynamically change the number of which view, use the following method to add a view:

    UIView * newView = [[UIView alloc] init];
    newView.backgroundColor = [UIColor colorWithRed: arc4random ()% 255 / 255.0 green: arc4random ()% 255 / 255.0 blue: arc4random ()% 255 / 255.0 alpha: 1];
    [StackView addArrangedSubview: newView];

In contrast, we can use the following method to remove a view:

    UIView * view = [stackView arrangedSubviews] .lastObject;
    [StackView removeArrangedSubview: view];

Special Note: addArrangedSubview and addSubview a big difference, using the former is trying to add StackView layout manager, which is just trying to add on a simple hierarchy, does not accept StackView layout manager.

Tip: Because StackView inherited from UIView, so the layout is changed, we can use the animation UIView layers, as follows:

        // Add view when there will be animation, when not removed
        [StackView addArrangedSubview: newView];
        [UIView animateWithDuration: 1 animations: ^ {
            [StackView layoutIfNeeded];

Fourth, in-depth understanding come under UIStackView

Through the above description, we have a basic understanding of the use and characteristics of StackView, let's take a closer look at the use of presentation associated properties and methods so that we can more handy.

Add and remove about a managed view:

// Initialize method, passing an array of managed view
- (Instancetype) initWithArrangedSubviews: (NSArray <__ kindof UIView *> *) views;
// Get all views to be managed
@property (nonatomic, readonly, copy) NSArray <__ kindof UIView *> * arrangedSubviews;
// Add a managed view
- (Void) addArrangedSubview: (UIView *) view;
// Remove a managed view
- (Void) removeArrangedSubview: (UIView *) view;
// In the specified location to insert a managed view
- (Void) insertArrangedSubview: (UIView *) view atIndex: (NSUInteger) stackIndex;

And StackView layout settings related:

1. Layout mode:

@property (nonatomic) UILayoutConstraintAxis axis;

This property is used to set the model above layout, enumerated as follows:

// StackView only two horizontal and vertical layout mode
typedef NS_ENUM (NSInteger, UILayoutConstraintAxis) {
    // Horizontal layout
    UILayoutConstraintAxisHorizontal = 0,
    // Vertical layout
    UILayoutConstraintAxisVertical = 1

2. Align the mode:

@property (nonatomic) UIStackViewAlignment alignment;

This property is used to set the pattern for its control, enumerated as follows:

typedef NS_ENUM (NSInteger, UIStackViewAlignment) {
  // Horizontal layout for the full height, full width at a vertical layout
    // In front of it
    // Its top
    UIStackViewAlignmentTop = UIStackViewAlignmentLeading,
    // First control text layout on its baseline level of effective
    // Its center
    // Behind them
    // Its bottom
    UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing,
    // Its baseline, effective horizontal layout

In the above example, we set up the way it is full, so, we do not need to do too much control the size constraints, if we managed controls the height or width varies, we can set its center, in this case, we also need to add a width or height constraint for each control, as follows:

    NSMutableArray * array = [[NSMutableArray alloc] init];
    for (int i = 0; i <5; i ++) {
        UIView * view = [[UIView alloc] init];
        view.backgroundColor = [UIColor colorWithRed: arc4random ()% 255 / 255.0 green: arc4random ()% 255 / 255.0 blue: arc4random ()% 255 / 255.0 alpha: 1];
        float height = arc4random ()% 90 + 10;
        [View mas_makeConstraints: ^ (MASConstraintMaker * make) {
            make.height.equalTo ([NSNumber numberWithFloat: height]);
        [Array addObject: view];
    stackView = [[UIStackView alloc] initWithArrangedSubviews: array];
    [Self.view addSubview: stackView];
    [StackView mas_makeConstraints: ^ (MASConstraintMaker * make) {
        make.centerX.equalTo (self.view.mas_centerX);
        make.centerY.equalTo (self.view.mas_centerY);
        make.leading.equalTo (self.view.mas_leading) .offset (20);
        make.trailing.equalTo (self.view.mas_trailing) .offset (-20);
        make.size.height.equalTo (@ 100);
    stackView.axis = UILayoutConstraintAxisHorizontal;
    stackView.distribution = UIStackViewDistributionFillEqually;
    stackView.alignment = UIStackViewAlignmentCenter;

Thus, the uneven layout of the control we can do so easily.

3. The arrangement

@property (nonatomic) UIStackViewDistribution distribution;

Enumeration arrangement is as follows:

typedef NS_ENUM (NSInteger, UIStackViewDistribution) {
    // Full, when only one control can use
    UIStackViewDistributionFill = 0,
    // Equally full, each occupying the same size arranged in full control
    // Priority in accordance with the size constraints arranged, if not full, it will draw a final arrangement of full control
    // Equally spaced
    // Equidistant from the center

Note that, except when we choose to fill the size of property without constraint control view, others need to be constrained, for example, if we select equally spaced, and I've changed the following code:

    [View mas_makeConstraints: ^ (MASConstraintMaker * make) {
            make.height.equalTo ([NSNumber numberWithFloat: height]);
            make.width.equalTo (@ 50);
    stackView.distribution = UIStackViewDistributionEqualSpacing;

4. Other

// Set the minimum spacing
@property (nonatomic) CGFloat spacing;
Whether the reference baseline // set the layout
@property (nonatomic, getter = isBaselineRelativeArrangement) BOOL baselineRelativeArrangement;
Whether LayoutMargins control when // set the standard layout, the default is NO, control is the bounds of the standard
@property (nonatomic, getter = isLayoutMarginsRelativeArrangement) BOOL layoutMarginsRelativeArrangement;
Five, UIStackView nesting

A StackView not allow us to carry out the horizontal and vertical cross layout, but we can be nested way to achieve complex layout effects, such as we achieve a film-like sheet tabs, you can use the horizontal layout of a nested vertical StackView StackView layout

See, by StackView, we do not add too many constraints, it makes us more relaxed layout. If you often use storyBoard development, there is a little trick can easily be integrated into a StackView two controls, hold down the command, select both controls, then click the bottom right corner following icon, the system will automatically help us generate a StackView, selected two controls integrated into it, cool it!
- Linux Kernel 4.2.2 compiler installation tutorial (Linux)
- The principle Httpclient4.4 (HttpClient Interface) (Programming)
- How to add two-factor authentication for Linux systems SSH (Linux)
- MongoDB polymerization being given (Database)
- Implement firewall function on a closed Linux machine (Linux)
- crontab task scheduling Health Check (Linux)
- Use Makeself Create installation file (Linux)
- Linux source code analysis tool (Linux)
- CentOS modify yum update source (Linux)
- MySQL Parameter Tuning Best Practices (Database)
- Virtual Judge structures under Ubuntu 14.04 (Server)
- Linux System Tutorial: Ubuntu on the desktop is disabled by default keyring to unlock tips (Linux)
- Android webView URL redirects affect goBack () (Programming)
- Valgrind * not * leak check tool (Linux)
- MySQL5.6 based GTID master-slave replication (Database)
- Linux common network tools: hping Advanced Host Scan (Linux)
- Java reflection Introduction (Programming)
- Linux file and directory management - ls, cp, mv (Linux)
- Configuring a Linux operating system security management services (Linux)
- Through Oracle to help restore MySQL data problems (Database)
  CopyRight 2002-2022 newfreesoft.com, All Rights Reserved.