【问题标题】:iOS how to make dynamic width / autolayout of UIView according to UILabel within itiOS如何根据其中的UILabel制作UIView的动态宽度/自动布局
【发布时间】:2014-08-17 18:00:32
【问题描述】:

我正在努力解决可能是一个新手问题。我有一个UIView,其中显示了一些价格。我希望UIView 根据价格具有动态宽度,如果它是 1 欧元,那么它将是例如20pt,如果是 2300 欧元,那么宽度会像 50pt。

我试图使用故事板的约束但没有运气。是否可以在情节提要中执行此操作,还是我必须计算 UILabel 的宽度,然后以编程方式设置 UIView 的宽度?

提前谢谢你。

【问题讨论】:

    标签: ios autolayout


    【解决方案1】:

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

    【讨论】:

    • 你好@rdelmar,你能帮我解决这个stackoverflow.com/questions/27103760/…
    • @Ranjit,NavinDev 已经回答了你的问题,尽管你不应该像我在他的回答中所说的那样添加领先的约束。
    • 当你说在 x 和 y 方向上给它的父视图施加约束时,你的意思是给它任何水平和任何垂直约束(相对于它的父视图)?谢谢@rdelmar!
    【解决方案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 拖到情节提要中
    • 使用身份检查器将类更改为SurroundView
    • 拖出一个UILabel并将其添加为SurroundView的子视图
    • 选择标签,打开助手编辑器
    • 在助手中显示SurroundView.m
    • 从空心圆圈拖到标签上,如下图所示

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

    SurroundView 的约束应如下所示。关键是 Intrinsic Size 应该设置为 Placeholder 以避免关于缺少约束的警告。

    【讨论】:

    • 这是关键——“一般来说,自动布局是以自上而下的方式执行的。换句话说,首先执行父视图布局,然后执行任何子视图布局。”
    • 我经常添加一个宽度约束,然后将约束从 = 更改为 >= 并为其分配较低的优先级。感谢答案;将固有大小设置为占位符对我来说是一个启示。
    【解决方案3】:

    将标签放置在视图内,并将其 TOP 、 BOTTOM 、 TRAILING 和 LEADING 边缘固定到标签超级视图。请注意,您没有指定宽度约束。现在向视图添加高度和宽度约束。为宽度约束设置一个出口,当价格发生变化时,将视图的宽度约束的常量设置为您想要的值。由于标签固定在视图上,因此它也会展开。

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-01-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-08-01
    • 2013-07-04
    • 1970-01-01
    相关资源
    最近更新 更多