| |
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
UIStackViewAlignmentFill,
// In front of it
UIStackViewAlignmentLeading,
// Its top
UIStackViewAlignmentTop = UIStackViewAlignmentLeading,
// First control text layout on its baseline level of effective
UIStackViewAlignmentFirstBaseline,
// Its center
UIStackViewAlignmentCenter,
// Behind them
UIStackViewAlignmentTrailing,
// Its bottom
UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing,
// Its baseline, effective horizontal layout
UIStackViewAlignmentLastBaseline,
} NS_ENUM_AVAILABLE_IOS (9_0);
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
UIStackViewDistributionFillEqually,
// Priority in accordance with the size constraints arranged, if not full, it will draw a final arrangement of full control
UIStackViewDistributionFillProportionally,
// Equally spaced
UIStackViewDistributionEqualSpacing,
// Equidistant from the center
UIStackViewDistributionEqualCentering,
} NS_ENUM_AVAILABLE_IOS (9_0);
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! |
|
|
|