iOS实战之从左往右自动填充布局页面

iOS动态布局：从左往右自动填充

最新推荐文章于 2025-09-25 16:30:01 发布

原创

最新推荐文章于 2025-09-25 16:30:01 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了两种方法实现iOS界面中控件从左往右自动填充布局。方法一是通过计算文本尺寸和设置宽度限制，确保按钮标题长度适应屏幕。方法二是利用AutoLayout的约束优先级和Content Compression Resistance，调整控件显示优先级，保证右侧内容完整显示。文中提供了详细代码示例和最终效果展示。

这里主要讲的就是控件宽度可变时的计算：

方法一：
这里使用一个宽度可变的Button，宽度不变的两个Label从左往右依次排布来测试。这里使用三组组合，每一组都用一个UIView包裹。

首先为了测试，Button的标题，依次为：

NSArray *btnTitle = @[@"我是一个长标题，很长很长很长很长的标题",@"我是短标题",@"标题"];

titleLB的文本：

titleLB.text = @"我是固定的标题";

flagLB的文本：

flagLB.text = @"立个flag";

接下来就是计算：
首先flagLB和titleLB的Size我们可以确定，可以给一个固定的值，也可以自动计算，由于button的title是可变的，所以我们采用自动计算

这里计算，我们需要使用一个系统方法：

CGSize constrainedSize = CGSizeMake(0, MAXFLOAT);
CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
CGRect textRect = [title boundingRectWithSize:constrainedSize options:NSStringDrawingUsesLineFragmentOrigin 
  attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:15]} context:nil];

这样就能计算一个文本的size，类似于iOS7以前使用的sizeWithFont，从这个Size可以获取文本的宽高。

由于这三者的Size都确定了，布局写起来也就简单了：

CGSize constrainedSize = CGSizeMake(0, MAXFLOAT);
CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
CGRect textRect = [title boundingRectWithSize:constrainedSize options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:15]} context:nil];

CGRect textRect2 = [titleLB.text boundingRectWithSize:constrainedSize options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:titleLB.font} context:nil];

[button mas_remakeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(bgView.mas_left).offset(5);
    make.centerY

最低0.47元/天解锁文章