首先我们了解下UIStackView , UIStackView 其实是提供了一个接口用于平铺一行或一列的视图组合,继承自UIView。就相当于一个盒子,里面可以装任何东西。我们只需要通过对stackView的axis
, distribution
, alignment
, spacing
属性进行修改,就可以得到这个盒子的弹性伸缩。
- axis(轴向) 属性决定了 stack 的朝向,只有垂直或水平
- distribution(分布) 属性决定了其管理的视图在沿着其轴向上的布局
- alignment(对齐) 属性决定了其管理的视图在垂直于其轴向上的布局;
- spacing(空隙) 属性决定了其管理的视图间的最小间隙;
其中 alignment(对齐)
:
Fill : 垂直方向上铺满
Top : 沿顶端对齐
Center : 沿中心线对其
Bottom : 沿底部对齐
First Baseline : 按照第一个子视图的文字的第一行对齐,同时保证高度最大的子视图底部对齐(只在axis为水平方向有效)
Last Baseline : 按照最后一个子视图的文字的最后一行对齐,同时保证高度最大的子视图顶部对齐(只在axis为水平方向有效)
其中distribution(分布)
:
Fill : 铺满
Fill Equal : 等宽铺满
Fill Proportionally : 等比例铺满,需要给各子视图设定一个宽度比或高度比
Equal Spacing :等距离放置
Equal Centering :各个试图的中心距离保持一致,不够放置则压缩后面的试图距离;
例如要实现下图的效果
- for (NSInteger i = 0; i < model.details.count; i++) {
- HDGoodsModel * goods = model.details[i];
- NSString * key = @"商品SKU";
- NSString * count = [NSString stringWithFormat:@"x%ld",(long)goods.count];
- SPLabel * leftLabel = [SPLabel label].sFont([UIFont systemFontOfSize:14]).sText(key).sTextColor([UIColor dk_colorWithHexString:@"#777C90"]).sNumberOfLines(1);
- if (i != 0) {
- leftLabel.textColor = [UIColor clearColor];
- }
- SPLabel * middleLabel = [SPLabel label].sFont([UIFont systemFontOfSize:14]).sTextAlignment(NSTextAlignmentCenter).sTextColor([UIColor dk_colorWithHexString:@"#20284A"]).sText(goods.specifications).sNumberOfLines(0);
- SPLabel * rightLabel = [SPLabel label].sFont([UIFont systemFontOfSize:14]).sTextAlignment(NSTextAlignmentRight).sTextColor([UIColor dk_colorWithHexString:@"#20284A"]).sText(count).sNumberOfLines(1);
-
- UIStackView * stackView = [[UIStackView alloc] initWithArrangedSubviews:@[leftLabel,middleLabel,rightLabel]];
- //竖直方向以第一行文字为基准线
- stackView.axis = UILayoutConstraintAxisHorizontal;
- stackView.alignment = UIStackViewAlignmentFirstBaseline;
- //横向按等宽度排列
- stackView.distribution = UIStackViewDistributionFillProportionally;
- stackView.spacing = 0.0;
- stackView.backgroundColor = [UIColor clearColor];
- //设置中间的文字是左侧文字的宽度的3.3倍
- [middleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
- make.width.equalTo(leftLabel.mas_width).multipliedBy(3.3);
- }];
- //设置右侧的文字是中间文字宽度的0.2
- [rightLabel mas_makeConstraints:^(MASConstraintMaker *make) {
- make.width.equalTo(middleLabel.mas_width).multipliedBy(0.2);
- }];
- [self.stackView addArrangedSubview:stackView];
- }