IOS9 new Uistackview Official document translation

　　I. Succession relationships, compliance agreements, affiliation frameworks and available platforms

The Uistackview class provides an efficient interface for tiling a single row or column of view combinations. The stack view allows you to rely on the ability to automatically layout, creating a user interface that allows you to dynamically adjust device orientation, screen size, and any available range of changes. The stack view manages the layout of all views in its arrangedsubviews properties. These views are arranged along the axis of the Stack view according to their order in the arrangedsubviews array. The exact layout variables are determined by the Stack view Axis, distribution, alignment, spacing, and other attributes.

　　

Using the Stack view, open a Storyboard you want to edit, drag a horizontal stack view or a Vertical stack view from the object library, and place it where you want it. Next, drag and drop the control or view into the stack, and if necessary you can continue adding the view or control to the specified stack. Interface Builder automatically adjusts the dimensions according to the contents of the stack. You can also adjust the appearance of the stack contents by modifying the properties of the stack view in the Properties panel.

Note: You need to be responsible for specifying the location and size of the stack view (optional). The stack view then manages the layout and dimensions of its content.

　　Second, Stack view and automatic layout

The Stack view uses automatic layout to locate and control the dimensions of the view that it manages. The stack view pieced together the first and last managed views along its axis, aligning its boundaries. For a horizontal stack view, this means that the left edge of the first managed view is flush with the left edge of the stack, and the last one is aligned to the right edge of the stack with the right edge of the managed view. For a vertical stack, the upper and lower bounds are aligned separately. If you set the layoutmarginsrelativearrangement property for the stack view to Yes,stack, the view will use the relevant margins to align with its content, rather than the boundary.

For distributions other than the uistackviewdistributionfillequally distribution, the stack view uses the intrinsiccontentsize property of the managed view to calculate the The view size of the stack axis. The uistackviewdistributionfillequally distribution adjusts all managed views to the same size on the stack axis to populate the stack view. If possible, the stack view stretches all managed views to match its existing dimensions up to the longest on the stack axis (the view is stretched according to the stack axis length in the case of guaranteed aspect ratios).

For an alignment other than Uistackviewalignmentfill alignment, the stack view uses the intrinsiccontentsize property of its managed view to calculate the view perpendicular to the stack The dimensions of the axial direction. Uistackviewalignmentfill All of its managed views so that these views populate the stack view perpendicular to its axial space. If possible, the stack view stretches all its managed views to match its maximum intrinsic dimensions perpendicular to the stack axis.

　　Iii. locating and adjusting the Stack view size

When the stack view allows you to lay out its contents without using automatic layout directly, you will still need to use automatic layout to locate the stack view. Typically, this means that you need to piece together a stack of at least two contiguous borders to define its location. Without additional constraints, the system calculates a size for the stack view to fit its contents:

· Along the stack view axis, its fit size equals the sum of its managed view size and spacing;
· Perpendicular to the stack view, which fits the dimensions equal to the largest view in its managed view;
· If the layoutmarginsrelativearrangement property of the stack view is set to the Yes,stack view, the Fit dimension includes the margin space.

You can provide additional constraints to specify the height, width, or both of the stack view. In these cases, the stack view adjusts the layout and dimensions of the view that it manages to fill the specified area. Exact layout variables are based on the properties of the stack view. You can see the uistackviewdistribution and uistackviewalignment enumerations to get a complete stack view of the processing description in which the content space is superfluous or under-space.

You can also position it based on the first or last baseline of the stack view, rather than using the top, bottom, or center y values. Similar to the fit dimensions of the stack view, these baselines are computed based on the contents of the Stack view.

· A horizontal stack view is called when the viewforfirstbaselinelayout method or the Viewforlastbaselinelayout method returns its highest view. If the highest view is also a stack view, it returns a call to the viewforfirstbaselinelayout method or Viewforlastbaselinelayout on a nested stack view The result of the method.

· A vertical stack view returns the first view of its management when the Viewforfirstbaselinelayout method is called, when calling Viewforlastbaselinelayout method returns the last view of its management. If one of the two views is also a stack view, it will return the corresponding call to the viewforfirstbaselinelayout method or Viewforlastbaselinelayout on the nested stack view. The result of the method.

Note: The baseline alignment works only on views that are highly matched to their original content height. If the view is stretched or compressed, the baseline will appear in the wrong position.

　　Iv. General Stack View layout

　　Here are some common methods for stack views. This checklist is to highlight some useful examples to show the flexibility of the stack view. This is not yet a complete list.

· just define the location. You can define the location of a stack view by fixing two boundaries adjacent to its parent view. Here, the size of the stack view expands freely in two dimensions based on the view it manages. It is especially useful when you want the contents of a stack view to show its original content size, and you want to manage other user interface elements that are associated with the stack view.

For example, in Figure 1, the left and upper bounds of the stack view are already relatively fixed to their parent view. These labels will be calibrated as a first baseline based on the space between the two with 8 points. This is valid for stack view content that is left-aligned relative to itself.

Figure 1. Define a location

· defines the dimensions that are axially along the stack view. here, you fixed the two boundaries along the stack view axis relative to its parent view, defining the dimensions of the stack view along its axis. You will need to fix one of the other boundaries to define the location of the stack view. The stack view will change dimensions and positions along its axis to fill the defined space, however, the unbound boundaries will move freely based on the dimensions of the largest view they manage.

For example, figure 2,stack the left, upper, and right bounds of the view have been fixed relative to their parent view. Use the uistackviewdistributionfill distribution to resize its content to fill its width, and start with a compact priority for content that is lower than the label, and it will be stretched when necessary.

Figure 2. Define the dimensions along the stack view axis

· defines the dimensions perpendicular to the stack view axis. This is similar to the previous example, but you fixed two boundaries perpendicular to the stack view axis and one boundary along the axis. This allows the stack view to expand or retract along its axis as you add or remove its managed views. Unless you use the uistackviewdistributionfillequally distribution, the managed view adjusts the dimensions according to their original dimensions. A view perpendicular to its axis is tiled according to its pattern within its definition, based on its stack view.

For example, Figure 3 shows a vertical stack view with four labels and a button. This stack view uses 8-point clearance and uistackviewalignmentcenter alignment. The height of the stack view increases or shrinks based on the increment or decrease of elements inside the stack.

Figure 3. Define dimensions perpendicular to the stack view axis

· define the location and dimensions of the stack view at the same time. Here you have fixed all four boundaries of the stack view. The stack view will tile its contents within the scope provided. For example, Figure 4 shows a vertical stack view in which all four boundaries are fixed relative to their parent view. By using uistackviewalignmentcenter alignment and uistackviewdistributionfill distribution, the stack view ensures that its contents are centered horizontally and vertically on the screen. However, there are two additional steps required to get the layout you want. By default, the stack view stretches the label vertically instead of the picture. To scale a picture control, reduce its content to a compact priority to below the label. For extra, in order to maintain the aspect ratio of the picture zoom, you must set the picture view mode to Aspect Fit. Increasing the width equality constraint between a picture view and the stack view will help ensure that the picture is scaled to fill the available range.

Figure 4. Define the position and dimensions of the stack view at the same time

　　V. Managing the presentation of Stack views

Uistackview is a non-rendered subclass of UIView. It does not provide any user interface of its own. Instead, it only manages the location and size of the views that it manages. Therefore, some properties, such as backgroundcolor, are not valid on the stack view. Similarly, you cannot rewrite layerclass,drawrect: or Drawlayer:incontext: Method.

Here is a series of properties that define how the stack view tiles its contents.

· Axis The (axial) attribute determines the orientation of the stack, only vertical or horizontal;
· Distribution The (distribution) attribute determines the layout of its managed view along its axis;
· Alignment The (Align) property determines the layout in which the view is managed perpendicular to its axis;
· spacing The (void) attribute determines the minimum gap between the views it manages;
· The baselinerelativearrangement property determines whether the vertical gap between its views is measured by the baseline;
· The layoutmarginsrelativearrangement property determines whether the stack sees its layout margins when it tiling its managed view

Typically, you will use a stack view to lay out a small number of views. You can create a more complex view hierarchy by nesting multiple stack views in other stack views. For example, Figure 5 shows a vertical stack view with two horizontal stack views. Each horizontal stack view contains a label and a text box.

Figure Nesting of 5.Stack views

You can also perfectly adjust the presentation of a managed view by adding additional constraints to the managed view. For example, you can use a constraint class to set the minimum or maximum height or width of a view. Or you can define a aspect ratio. When you tile its contents, the Stack view uses these constraints. For example, in Figure 4, when the picture is scaled, a aspect ratio constraint on the picture view is forcibly assigned a aspect ratio constant.

NOTE: When adding constraints to a view within a stack view, pay special attention to avoiding incoming collisions. As a rule, if a view's size defaults back to its original content size on a specified dimension, you can safely add constraints to that dimension.

Vi. Maintaining consistency between views and sub-views of their administration

The Stack view ensures that its arrangedsubviews property will always be a subset of its subviews properties. Specifically, the stack view enforces the following provisions:

· Whenever the stack view adds a view to its arrangedsubviews array, it will also increase the view as a child view if it has not yet been added.

· Whenever a child view is removed from the stack view, the stack view also removes it from the arrangedsubviews array.

· Removing a view from arrangedsubviews does not remove it as a child view. The stack view will no longer manage the dimensions and location of the view, but the view will still be part of the view structure and will be rendered to the screen when it is visible.

When the Arrangedsubviews array always contains a subset of the subviews array, the order between the arrays is still independent.

· The order of the Arrangedsubviews array defines the order in which the views are presented in the stack. For a horizontal stack view, these views are tiled in reading order, that is, the smaller indexed view is on the left side of the larger indexed view. For a vertical stack view, these views are tiled from top to bottom, and the smaller indexed view is above the larger indexed view.

· The order in the Subviews array defines the order in which the child views are on the z-axis. If the view overlaps, a child view with a smaller index will appear behind a child view with a larger index.

Seven, dynamic change Stack view content

The stack view automatically updates its layout when the view is added, moved out, or inserted into the arrangedsubviews array, or when the hidden property of a managed child view changes.

The OC code is as follows:

// appears to remove the first arranged view from the stack. // The view is still inside the stack, it's just no longer visible, and no longer contributes to the layout. UIView * Firstview = self.stackview.arrangedsubviews[0= YES;

The SWIFT code is as follows:

// appears to remove the first arranged view from the stack. // The view is still inside the stack, it's just no longer visible, and no longer contributes to the layout. Let Firstview = stackview.arrangedsubviews[0true

The stack view will also automatically respond to any changes to its properties. For example, you can update the axis properties of the stack view to dynamically change the orientation.

The OC code is as follows:

// Toggle between a vertical and horizontal stack if (Self.stackView.axis = = uilayoutconstraintaxishorizontal)    {= uilayoutconstraintaxisvertical;} Else {    = uilayoutconstraintaxishorizontal;}

The SWIFT code is as follows:

// Toggle between a vertical and horizontal stack if Stackview.axis = = . Horizontal {    = . Vertical}else  {    = . Horizontal}

You can animate the changes in the hidden properties of the managed sub-views and the Stack view properties by animating them in a way that is built into an animated block of code.

The OC code is as follows:

// Animates removing the first item in the stack. [UIView animatewithduration:0.25 animations:^{    * Firstview = self.stackview.arrangedsubviews[ 0 ];     = YES;}];

The SWIFT code is as follows:

// Animates removing the first item in the stack. Uiview.animatewithduration (0.25    in = stackview.arrangedsubviews[0]     true }

Finally, you can define a specific "dimension class" type value directly in Interface Builder for many of the stack view properties. The system will animate these changes as the size class of the stack view changes.

　　

　　Eight, the common method

Create a Stack view

-Initwitharrangedsubviews: (New in IOS 9.0)

Sub-view of administrative arrangements

-in9.0)  in9.0)-in9.0  )-in9.0)

Set layout

Alignment (  9.0) axis  property in9.0)  baselinerelativearrangement9.0)Distribution Property   inch 9.0 ) layoutmarginsrelativearrangement  property in9.0) Spacing Property   inch 9.0)

Constant

Uistackviewdistributionuistackviewalignment

The original text and picture source: Https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIStackView_Class_ reference/index.html#//apple_ref/doc/uid/tp40015256

If the above content has different views, welcome to reply to the message, I will reply as soon as possible!

IOS9 new Uistackview Official document translation