UIStackView - расположение изображения вверх по краю родного брата - PullRequest
Новая
       80

UIStackView - расположение изображения вверх по краю родного брата

2 голосов
/ 18 июня 2019

Я пытаюсь создать пользовательский UITableViewCell в iOS, который содержит метку и связанное изображение. Изображение должно быть как можно ближе к задней кромке этикетки.

Ниже приведено изображение прогресса на данный момент. Красная область - это горизонтальный UIStackView, в который я поместил UILabel (зеленый) и UIImageView (голубой).

UILabel как было установлено в Lines = 0.

Я поэкспериментировал с некоторыми свойствами UIStackView Distribution и Alignment и в прошлом хорошо использовал подход, описанный в этой статье UIStackView Hack для компактного размещения дочерних представлений . В соответствии с техникой, описанной в этой статье, у меня есть третье прозрачное представление, которое имеет Lower ContentHugggingPriority, поэтому занимает большую часть пространства. Это почти работает, но что-то заставляет этикетку переноситься в эту точку исправления, похоже, что это 1/3 от общей ширины.

Не все строки будут отображать изображение.

У кого-нибудь есть другие предложения о том, как добиться этого макета? Я пробовал старый добрый Autolayout (без UIStackView), но у него были другие проблемы

Current layout

Ответы [ 2 ]

3 голосов
/ 18 июня 2019

Это может быть то, что вы после ...

enter image description here

Представление стека ограничено верхним и нижним полями, начальным полем + 12 и конечным полем >= 12 со следующими настройками: 

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

Вид изображения имеет ограничения по ширине и высоте 24

Метка не имеет ограничений, но имеет: 

Content Compression Resistance Priority
    Horizontal: Required (1000)

Результат (верхний набор с видом изображения, нижний набор без ):

enter image description here enter image description here

1 голос
/ 21 июня 2019

Хотя я пометил ответ DonMag как ответ на этот вопрос, я включаю свой собственный ответ, поскольку я создаю представления программно, поскольку это было мое окончательное решение.

Сначала создайте контейнер UISTackView для метки и изображения 

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

Затем, уже создав UILabel, добавьте его в StackView и установите сопротивление сжатию 

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

...