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

- Let Linux operating system more secure (Linux)

- Struts2 form of non-use component tags (Programming)

- Ubuntu mysql stop fail to solve the problem (Database)

- Installation Elementary OS Freya to do some settings (Linux)

- CentOS 6.5 start ActiveMQ being given to solve (Server)

- How Vim playing a mature IDE (Linux)

- Java rewrite the hashcode method (Programming)

- Ubuntu 14.04 installed VirtualBox 4.3 appears vboxdrv: Unknown symbol mcount (Linux)

- It is time to upgrade your gulp 4.0 (Programming)

- namespace mechanism Linux kernel analysis (Linux)

- Postmodern systems programming language (Programming)

- Cacti installation deployment under CentOS 6.6 (Server)

- Run two MySQL service on one server (Database)

- Installation and configuration of phpMyAdmin under CentOS (Database)

- Let OS X support NTFS write file (Linux)

- Use LVM partition on Ubuntu and easily adjust the snapshot (Linux)

- RedHat Linux 5.5 installation process SVN Service Notes (Server)

- How to install Virtualbox 4.3.20 in Ubuntu 14.04 (Linux)

- Implement Oracle dynamic registration of non-standard port 1521 (Database)

  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!
- IBM Data Studio to create objects using ---- double quotes / sensitive issues and the table / column renaming (Database)
- Iptables principle (Linux)
- The YUM package management under Linux (Linux)
- Spring inject a type of object to enumerate (Programming)
- Forwarding module with Apache reverse proxy server (Server)
- DRBD Principle and Features Overview (Server)
- Mass data storage application of MongoDB database (Database)
- Linux System Getting Started Learning: Disable HTTP forwarding wget in (Linux)
- Apache Spark1.1.0 deployment and development environment to build (Server)
- 22 Port weak passwords and SSH connection program of the Linux server (Linux)
- To change CentOS7 runlevel (Linux)
- Laravel 4 Expansion Pack (Server)
- Use GLOBK batch command network adjustment (Linux)
- Ubuntu users to install the system indicator SysPeek 0.3 (Linux)
- Graphing tool: Gnuplot (Linux)
- Nginx Installation and Configuration (Server)
- Linux device driver development small example --LED lights (Programming)
- CentOS Linux firewall configuration and Close (Linux)
- The method of MySQL two kinds of incomplete recovery (Database)
- Network Security Basics Linux command (Linux)
  CopyRight 2002-2022 newfreesoft.com, All Rights Reserved.