UIStackView嵌套的Label多行文字动态高度

humiaor

于 2022-07-20 18:39:48 发布

阅读量959

点赞数

分类专栏： UIStackView 文章标签： UIStackView

本文链接：https://blog.csdn.net/humiaor/article/details/125898240

版权

UIStackView 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先我们了解下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];
            }