UIStackView

Question

我正在尝试在 iOS 中创建一个包含标签和相关图像的自定义 UITableViewCell。图像需要尽可能靠近标签的后缘。

下面是进度图 far.The 红色区域是水平 UIStackView，我在其中放置了 UILabel（绿色）和 UIImageView（青色）。

UILabel 已设置为 Lines = 0。

我玩过许多 UIStackView Distribution 和 Alignment 属性，并且在过去很好地利用了这篇文章 A UIStackView Hack for Stacking Child Views Compactly 中概述的方法。根据那篇文章中的技术，我有第三个透明视图，它具有较低的 ContentHuggingPriority，因此占据了大部分空间。这几乎可以工作，但有些东西导致标签在那个固定点换行，看起来它是总宽度的 1/3。

并非所有行都会显示图像。

有没有人对如何实现这种布局有任何其他建议？我已经尝试过普通的旧自动布局（没有 UIStackView）但是还有其他问题

Answer 1

这可能就是您想要的...

堆栈视图被限制为顶部和底部边距、前导边距 + 12 和尾随边距 >= 12，设置如下：

Axis: Horizontal
Alignment: Top
Distribution: Fill
Spacing: 0

图像视图的宽度和高度限制为 24

标签没有约束，但有：

Content Compression Resistance Priority
    Horizontal: Required (1000)

结果（顶部设置有图像视图，底部设置没有）：

Answer 2

虽然我已将此问题标记为，但我包含了我自己的答案，因为我以编程方式创建视图，因为这是我的最终解决方案。

首先为标签和图像创建 UIStackView 容器

this.drugNameStackView = new UIStackView()
{
    TranslatesAutoresizingMaskIntoConstraints = false,
    Axis = UILayoutConstraintAxis.Horizontal,
    Alignment = UIStackViewAlignment.Top,
    Distribution = UIStackViewDistribution.Fill,
    Spacing = 0
};

然后已经创建了 UILabel 将其添加到 StackView 并设置 Compression Resistance

this.drugNameStackView.AddArrangedSubview(this.drugNameLabel);
this.drugNameLabel.SetContentCompressionResistancePriority(1000.0f, UILayoutConstraintAxis.Horizontal);

解决方案的关键部分和我从 DonMag 的回答中学到的主要内容，其中我添加到 ContentView 的这两个约束

this.ContentView.AddConstraints(
    new[]
    {
        NSLayoutConstraint.Create(this.drugNameStackView, NSLayoutAttribute.Leading, NSLayoutRelation.Equal, this.ContentView, NSLayoutAttribute.LeadingMargin, 1.0f, 0),
        NSLayoutConstraint.Create(this.ContentView, NSLayoutAttribute.TrailingMargin, NSLayoutRelation.GreaterThanOrEqual, this.drugNameStackView, NSLayoutAttribute.Trailing, 1.0f, 0),
    });

请注意，ContentView 是约束中的第一项，UIStackView 是 NSLayoutRelation.GreaterThanOrEqual 约束中的第二项

UIStackView - 将图像定位在兄弟姐妹的边缘

UIStackView - Positioning Image up against edge of sibling

ios

autolayout

ios-autolayout