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。请注意，您没有指定宽度约束。现在为视图添加高度和宽度约束。设置宽度约束的出口，当价格变化时，将视图的宽度约束设置为所需的值。由于标签固定在视图上，它也会扩展。