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

我正在努力也许有一个菜鸟问题。 我有一个UIView ,我显示一些价格。 我想要UIView根据价格是一个dynamic宽度,如果是1欧元,那么它将是20pt ,如果是2300欧元,那么它将是50pt宽度。

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

先谢谢你。

是的,你可以在故事板上做到这一点。 添加一个标签到你的视图,并将其固定到左边和右边(如果你还想要的话,顶部和底部)。 在x和y方向给它的superview赋予视图约束,但是不要给它一个宽度约束(如果你没有将标签的顶部和底部固定到它,它将需要一个高度约束)。 然后视图应该根据其内容随标签扩展。

一般来说,自动布局是以自顶向下的方式进行的。 换句话说,首先执行父视图布局,然后执行任何子视图布局。 所以要求系统根据孩子的大小来设置父母的大小,有点像向上游游泳,很难做到,但仍然可以做一些工作。

一个解决scheme是使用视图的固有大小

例如, UILabel具有基于标签中文本的固有尺寸。 如果UILabel具有前导约束和顶端约束,但没有其他约束,则其宽度和高度由其固有尺寸确定。

你可以用一个包含UILabel的自定义视图类来做同样的事情。 通过基于UILabel的固有尺寸设置自定义视图类的内在大小,您将获得一个基于标签中的文本自动resize的视图。

这是自定义类的代码的样子。 .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 

创buildIBOutlet到childLabel可能有点棘手,所以这里是过程

  • 拖出一个UIView到故事板
  • 使用身份检查器将类更改为SurroundView
  • 拖出一个UILabel并将其添加为SurroundView的子视图
  • select标签,然后打开助理编辑器
  • 在助理中显示SurroundView.m
  • 如下所示,从开放的圆圈拖到标签上

在这里输入图像说明

剩下的就是正确的限制条件。 标签的约束应该是这样的

在这里输入图像说明

SurroundView的约束应该如下所示。 关键是内部大小应该设置为占位符,以避免关于缺less约束的警告。

在这里输入图像说明

将标签放在视图中,并将其TOP,BOTTOM,TRAILING和LEADING边缘固定到标签超视图。 请注意,您不指定宽度约束。 现在给视图添加一个高度和宽度约束。 创build一个宽度约束的出口,当价格变化时,将视图的宽度约束的常量设置为你想要的值。 由于标签固定在视图上,它也会展开。