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

Question

我正在努力解决一些菜鸟问题.我有一个UIView显示一些价格.我想要UIView根据价格的动态宽度,如果是1欧元,那么它将是例如20pt,如果它是2300欧元,那么它将像50pt宽度一样.

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

先感谢您.

Answer 1

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

Answer 2

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

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

例如,a UILabel具有基于标签中文本的内在大小.如果a 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应如下所示.关键点是应将内在大小设置为占位符以避免关于缺少约束的警告.