iOS如何根据UILabel在其中制作UIView的动态宽度/自动布局

Question

我正在努力解决一些菜鸟问题。 我有一个UIView ，我在其中显示一些价格。 我希望UIView根据价格具有动态宽度，如果是1欧元，那么它将是例如20pt ，如果它是2300欧元，那么它将是宽度为50pt 。

我试图使用故事板的约束但没有运气。 是否可以在故​​事板中进行，或者我是否必须计算UILabel的宽度，然后以编程方式设置UIView的宽度？

先感谢您。

Answer 1

是的，您可以在故事板中执行此操作。 在视图中添加标签并将其固定到左右边缘（如果需要，也可以将其固定在顶部和底部）。 在x和y方向上为其超视图提供视图约束，但不要给它一个宽度约束（如果没有将标签的顶部和底部固定到它，则需要高度约束）。 然后，视图应根据其内容随标签一起展开。

Answer 2

通常，自动布局以自上而下的方式执行。 换句话说，首先执行父视图布局，然后执行任何子视图布局。 所以要求系统基于孩子调整父母的大小有点像游泳上游，更难做，但仍然可以做一些工作。

一种解决方案是使用视图的固有大小 。

例如， UILabel具有基于标签中文本的内在大小。 如果UILabel具有前导约束和顶部约束，但没有其他约束，则其宽度和高度由其内在大小确定。

您可以使用包含UILabel的自定义视图类执行相同的操作。 通过基于UILabel的内在大小设置自定义视图类的内在大小，您将获得一个视图，该视图根据标签中的文本自动调整大小。

以下是自定义类的代码。 .h文件定义单个属性text 。 .m文件具有子标签的IBOutlet。 设置和获取text属性只是设置或获取标签中的文本。 但是有一个非常重要的转折，设置文本会使父级的内在大小无效。 这就是使系统调整父视图大小的原因。 在下面的示例代码中，父级的大小设置为在UILabel周围具有8像素边距。

SurroundView.h

@interface SurroundView : UIView
@property (strong, nonatomic) NSString *text;
@end

SurroundView.m

@interface SurroundView()
@property (weak, nonatomic) IBOutlet UILabel *childLabel;
@end

@implementation SurroundView

- (void)setText:(NSString *)text
{
    self.childLabel.text = text;
    [self invalidateIntrinsicContentSize];
}

- (NSString *)text
{
    return( self.childLabel.text );
}

- (CGSize)intrinsicContentSize
{
    CGSize size = self.childLabel.intrinsicContentSize;

    size.height += 16;
    size.width  += 16;

    return( size );
}

@end

创建IBOutlet到childLabel可能有点棘手，所以这是程序

• 将UIView拖入故事板
• 使用Identity检查器将类更改为SurroundView
• 拖出UILabel并将其添加为SurroundView的子视图
• 选择标签，然后打开助理编辑器
• 在助手中显示SurroundView.m
• 从空心圆拖到标签，如下所示

剩下的就是让约束正确。 标签的约束应如下所示

SurroundView的约束应如下所示。 关键点是应将内在大小设置为占位符以避免关于缺少约束的警告。

Answer 3

将标签放在视图内，并将其TOP，BOTTOM，TRAILING和LEADING边缘固定到标签superview。 请注意，您没有指定宽度约束。 现在为视图添加高度和宽度约束。 设置宽度约束的出口，并在价格更改时将视图的宽度约束常量设置为所需的值。 由于标签固定在视图上，它也会扩展。