因为之前项目支持最低版本是iOS8,所以没考虑使用stackView,有类似的场景也都使用tableView或collectionView解决了,现在项目最低支持iOS9+,再加上最近要封装一个组件,所以有些场景使用这个stackView更便捷一些。
这个类是干嘛的?
别着急,往下看,看完了还不明白是干嘛的,电话联系!!!
目前UIStackView只支持在大于等于iOS9+的系统上使用,如果想要在iOS9以下的系统上使用,sunnyxx团队的新作FDStackView了解一下
首先,我们先看一下这个类的初始化API
@interface UIStackView : UIView
- (instancetype)initWithFrame:(CGRect)frame NS_DESIGNATED_INITIALIZER;
- (instancetype)initWithCoder:(NSCoder *)coder NS_DESIGNATED_INITIALIZER;
/* UIStackView enforces that all views in the arrangedSubviews list
must be subviews of the UIStackView.
Thus, when a view is added to the arrangedSubviews, UIStackView
adds it as a subview if it isn't already. And when a view in a
UIStackView's arrangedSubviews list receives -removeFromSuperview
it is also removed from the arrangedSubviews.
Please note that this is a convenience initializer and cannot be overridden in Swift.
*/
- (instancetype)initWithArrangedSubviews:(NSArray<__kindof UIView *> *)views; // Adds views as subviews of the receiver.
乍一看 没什么特别的,不要着急,接着往下看
/* Add a view to the end of the arrangedSubviews list.
Maintains the rule that the arrangedSubviews list is a subset of the
subviews list by adding the view as a subview of the receiver if
necessary.
Does not affect the subview ordering if view is already a subview
of the receiver.
*/
- (void)addArrangedSubview:(UIView *)view;
/* Removes a subview from the list of arranged subviews without removing it as
a subview of the receiver.
To remove the view as a subview, send it -removeFromSuperview as usual;
the relevant UIStackView will remove it from its arrangedSubviews list
automatically.
*/
- (void)removeArrangedSubview:(UIView *)view;
/*
Adds the view as a subview of the container if it isn't already.
Updates the stack index (but not the subview index) of the
arranged subview if it's already in the arrangedSubviews list.
*/
- (void)insertArrangedSubview:(UIView *)view atIndex:(NSUInteger)stackIndex;
是不是有点熟悉了?好像类似的API在哪见过,可变容器的API跟这个很像!
其实我们可以把UIStackView当成是一个容器视图,他继承于UIView,当然他父级API他也都支持可用,完全可以当成UIView来使用,不对,因为它不做渲染,所以你不能够设置它的背景色和重构它的Draw方法,为什么不做渲染?个人猜测是因为苹果官方推出这个stackView的目的是用于简化布局,并不是让你针对stackView本身来进行视图渲染操作,你可以把stackView当成一个排兵布阵的演练场,当然这不是我们这篇的主题。
*注意这里如果同时调用addArrangedSubview和insertArrangedSubview:atIndex:类似这种
[self.stackView insertArrangedSubview:view atIndex:0];
[self.stackView addArrangedSubview:view];
那么他只显示后执行的函数效果,当然显示的顺序也就不一样!
还有一点需要注意的是,假如你调用removeArrangedSubview :
这里的remove并不是视图从stackView上移除掉,其实视图还是存在的,为了避免出问题,在你的子view确定不需要显示了的时候可以removeFromSuperview或hidden掉!
UIView *tempView = self.stackView.arrangedSubviews.lastObject;
[self.stackView removeArrangedSubview:tempView];
[tempView removeFromSuperview];
注意千万不要这样写
[self.stackView removeArrangedSubview:self.stackView.arrangedSubviews.lastObject];
[tempView removeFromSuperview];
这样是remove不掉的。
UIStackView 类提供了一个高效的接口用于平铺一行或一列的视图组合,UIStackView提供了高效的单行单列自动布局的手段,一般情况下,我们不需要对stackView.subviews做任何约束,增删插入视图的操作只要调用上边的API即可实现,然后再通过对stackView的axis, distribution, alignment, spacing属性进行修改;
另外,stackview的一个特点是,当把其中的一个子view去掉后,会重新布局,省去了以前大把大把的代码。那么这个所谓的去掉是什么操作呢?一般来说,是设置子view的hidden = true,并且调用 stackview 的函数,removeArrangedSubview。在当前ios版本,如果仅仅设置hidden属性,在有些时候,可能无法对剩下的子view进行自动布局。当需要重新显示的时候,设置hidden属性,并调用insertArrangedSubview: atIndex:方法就可以了。
接下来我们来看看几个抽象属性的设置
/* A stack with a horizontal axis is a row of arrangedSubviews,
and a stack with a vertical axis is a column of arrangedSubviews.
*/
@property(nonatomic) UILayoutConstraintAxis axis;
/* The layout of the arrangedSubviews along the axis
*/
@property(nonatomic) UIStackViewDistribution distribution;
/* The layout of the arrangedSubviews transverse to the axis;
e.g., leading/trailing edges in a vertical stack
*/
@property(nonatomic) UIStackViewAlignment alignment;
/* Spacing between adjacent edges of arrangedSubviews.
Used as a strict spacing for the Fill distributions, and
as a minimum spacing for the EqualCentering and EqualSpacing
distributions. Use negative values to allow overlap.
On iOS 11.0 or later, use UIStackViewSpacingUseSystem (Swift: UIStackView.spacingUseSystem)
to get a system standard spacing value. Setting spacing to UIStackViewSpacingUseDefault
(Swift: UIStackView.spacingUseDefault) will result in a spacing of 0.
System spacing between views depends on the views involved, and may vary across the
stack view.
In vertical stack views with baselineRelativeArrangement == YES, the spacing between
text-containing views (such as UILabels) will depend on the fonts involved.
*/
@property(nonatomic) CGFloat spacing;
axis
枚举了一个布局方向
//
// UIView Constraint-based Layout Support
//
typedef NS_ENUM(NSInteger, UILayoutConstraintAxis) {
UILayoutConstraintAxisHorizontal = 0,
UILayoutConstraintAxisVertical = 1
};
UILayoutConstraintAxisHorizontal
水平布局
UILayoutConstraintAxisVertical
垂直布局
这里没啥好说的,基本都知道
distribution
这个稍微抽象一些,你可以理解成视图分布的样式规则
/* Distribution—the layout along the stacking axis.
All UIStackViewDistribution enum values fit first and last arranged subviews tightly to the container,
and except for UIStackViewDistributionFillEqually, fit all items to intrinsicContentSize when possible.
*/
typedef NS_ENUM(NSInteger, UIStackViewDistribution) {
/* When items do not fit (overflow) or fill (underflow) the space available
adjustments occur according to compressionResistance or hugging
priorities of items, or when that is ambiguous, according to arrangement
order.
*/
UIStackViewDistributionFill = 0,
/* Items are all the same size.
When space allows, this will be the size of the item with the largest
intrinsicContentSize (along the axis of the stack).
Overflow or underflow adjustments are distributed equally among the items.
*/
UIStackViewDistributionFillEqually,
/* Overflow or underflow adjustments are distributed among the items proportional
to their intrinsicContentSizes.
*/
UIStackViewDistributionFillProportionally,
/* Additional underflow spacing is divided equally in the spaces between the items.
Overflow squeezing is controlled by compressionResistance priorities followed by
arrangement order.
*/
UIStackViewDistributionEqualSpacing,
/* Equal center-to-center spacing of the items is maintained as much
as possible while still maintaining a minimum edge-to-edge spacing within the
allowed area.
Additional underflow spacing is divided equally in the spacing. Overflow
squeezing is distributed first according to compressionResistance priorities
of items, then according to subview order while maintaining the configured
(edge-to-edge) spacing as a minimum.
*/
UIStackViewDistributionEqualCentering,
} NS_ENUM_AVAILABLE_IOS(9_0);
UIStackViewDistributionFill
铺满
UIStackViewDistributionFillEqually
等宽铺满
UIStackViewDistributionFillProportionally
等比例铺满
UIStackViewDistributionEqualSpacing
等距离放置
UIStackViewDistributionEqualCentering
各个试图的中心距离保持一致,不够放置则压缩后面的试图距离
alignment
对齐方式
/* Alignment—the layout transverse to the stacking axis.
*/
typedef NS_ENUM(NSInteger, UIStackViewAlignment) {
/* Align the leading and trailing edges of vertically stacked items
or the top and bottom edges of horizontally stacked items tightly to the container.
*/
UIStackViewAlignmentFill,
/* Align the leading edges of vertically stacked items
or the top edges of horizontally stacked items tightly to the relevant edge
of the container
*/
UIStackViewAlignmentLeading,
UIStackViewAlignmentTop = UIStackViewAlignmentLeading,
UIStackViewAlignmentFirstBaseline, // Valid for horizontal axis only
/* Center the items in a vertical stack horizontally
or the items in a horizontal stack vertically
*/
UIStackViewAlignmentCenter,
/* Align the trailing edges of vertically stacked items
or the bottom edges of horizontally stacked items tightly to the relevant
edge of the container
*/
UIStackViewAlignmentTrailing,
UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing,
UIStackViewAlignmentLastBaseline, // Valid for horizontal axis only
} NS_ENUM_AVAILABLE_IOS(9_0);
UIStackViewAlignmentFill
垂直方向上铺满
UIStackViewAlignmentTop
和UIStackViewAlignmentLeading
沿顶端对齐
UIStackViewAlignmentCenter
沿中心线对齐
UIStackViewAlignmentBottom
和UIStackViewAlignmentTrailing
沿底部对齐
UIStackViewAlignmentFirstBaseline
按照第一个子视图的文字的第一行对齐,同时保证高度最大的子视图底部对齐(只在axis为水平方向有效)
UIStackViewAlignmentLastBaseline
按照最后一个子视图的文字的最后一行对齐,同时保证高度最大的子视图顶部对齐(只在axis为水平方向有效)
spacing
属性决定了其管理的视图间的最小间隙,为什么这里说是最小间距,因为stackView根据你设置的分布规则来布局的时候发现放不下所有的视图,那么就会压缩约束优先级较低的,如果优先级相同,则会按顺序来压缩.
举个栗子:假设你给stackView的约束宽度为100,这时候你添加了俩子view,其宽度都是50,然后间距是10,这时候明显按照布局是放不下的,那么stackView会根据俩view的约束优先级来约束,如果优先级相同,则按照索引来压缩,再假如第二个view先一步addArrangedSubview 那么就会压缩第一个view,反之亦然。
baselineRelativeArrangement
属性决定了其视图间的垂直间隙是否根据基线测量得到,选中 Baseline Relative 将根据subview的基线调整垂直间距
layoutMarginsRelativeArrangement
属性决定了 stack 视图平铺其管理的视图时是否要参照它的布局边距,选中 Layout Margins Relative 将相对于标准边界空白来调整subview位置
今天先写到这 要下班了 需要demo的话 等我写一个上传到github
你们要的demo