Дизайн UIView, чтобы он мог динамически изменять свою высоту в зависимости от высоты содержимого

Question

В файле XIB у меня есть CustomView, относящийся к классу с тем же именем.

Просмотр содержимого довольно прост.

Существует вертикальный вид стека , а внутри вид стека есть две метки . Стек выровнен по вертикали с представлением, которое его содержит:

Первая метка (заголовок) содержит статический текст (всегда несколько символов).Вторая метка (подзаголовок) может иметь текст переменной длины.

Я добавляю это CustomView с другими похожими представлениями в качестве подпредставления Content View, поскольку это была «строка».

for i in 0...aViews.count {

   var v = CustomView(frame: CGRect(x: 0, y: _y, width: 320, height: 100))
   v.labelText = "my long label text ..."
   contentView.addSubview(v)
   // ...
}

Как вы можете себе представить, метка заголовка должна иметь фиксированную позицию (вверху и слева), то есть не может быть строки с названием, начинающимся с 10 баллов, а другим с 14.

Должен признать, я наивно полагал, что положение метки будет автоматическиуправляется тем же фактом, что я выровнял вертикально stackview .Я был не прав и не заметил никаких проблем, пока мне не сказали, что вторая метка, субтитр, может содержать более одной строки.

Я добавил строки к метке прямо в storyboard и нашелиз этого:

1. контейнер стека не меняет height в зависимости от height его содержимого;

2. положение «фиксированных» элементов может быть вертикально отцентрировано, но не фиксировано;

ЧтоМне нужно следующее:

• этикетки должны быть «сгруппированы» и выровнены по вертикали: должно быть одинаковое количество места от верхней части первой этикетки до верхней границы контейнера и отот нижней части второй метки до нижней границы;
• , когда вторая метка должна отображать более одной строки, вид контейнера должен соответственно изменить свою высоту;

Возможно ли это?Как мне оформить мой взгляд?

Answer 1

ОК - глядя на ваш проект, вы не за горами ... просто пара ключевых элементов.

1. В вашем CustomView.xib у вас не было ограничений между Fixed Label и Date Label.В результате Date Label увеличивается вверх из нижней части представления, и ничто не может его остановить.

2. Также в вашем CustomView.xib вы имелиFixed Label ограничен задним краем ... Я предполагаю, что вы хотите, чтобы он был выровнен по левому краю с Date Label

3. При создании пользовательских представлений вы устанавливали ограничение высоты 100 -- что противоречит цели, позволяющей контенту определять размер.

4. В классе CustomView вы contentView.autoresizingMask = [.flexibleWidth, .flexibleHeight] закомментировали.Эта строка должна быть там.

5. В вашем контроллере представления вы добавили ограничение высоты к contentView с низким приоритетом.Наилучший вариант - установить ограничение Placeholder (дважды щелкните ограничение и установите флажок Placeholder).Таким образом, ограничение устраняется во время выполнения, но оно присутствует во время проектирования (и раскадровка не жалуется).

6. Вы делали несколько других ненужных вещей - вероятно, выпробовали разные вещи, чтобы заставить его работать.

7. Настройка вида (добавление ваших представлений) лучше всего делать в viewDidLoad() - определенно не в viewDidLayoutSubviews()

8. Я предполагаю, что в вашем CustomView вместо явной ширины 200 вы , вероятно, хотите ограничить Date Label в начале и в конце, что позволяетон растягивается по горизонтали в зависимости от ширины устройства ... но я оставил его равным 200.

Если вы сможете следить за этой информацией, вы сможете исправить проблему (и).Но я представляю проект в качестве репозитория GitHub для вас, чтобы вы могли получить его в «рабочем» состоянии и увидеть изменения.

Вот ссылка на репо: https://github.com/DonMag/ATester2

Вот результат:

И прокручиваем немного вверх:

Answer 2

Я думаю, что вы смешиваете абсолютное позиционирование внешних видов (т. Е. Вручную устанавливаете фреймы) и используете ограничения автоматического размещения для своих внутренних компонентов, и ошибочно ожидаете, что динамическая часть автоматического размещения каким-то образом "достигнет" всех внешних видов.Чтобы сделать это с помощью autolayout, вам нужно будет использовать autolayout до конца, включая способ позиционирования CustomViews в вашем contentView.

Если по какой-либо причине вы не хотите использовать TableViewили CollectionView для этого, вы также можете, например, попытаться добавить свои CustomView s как упорядоченные подпредставления к вертикальному стековому виду, имеющему ограничения сверху / снизу / вперед / сзади, к contentView, а затем заменить ограничение «Выровнять центр Y»ваш CustomView с ограничениями «Align Top» и «Align Bottom», чтобы фактически позволить вашим меткам «выталкивать» изнутри, если им нужно больше вертикального пространства.

Редактировать вот быстрыйэскиз, чтобы проиллюстрировать эту настройку:

Редактировать 2 Вот несколько скриншотов, чтобы прояснить это далее.При такой базовой компоновке:

результат будет выглядеть так во время выполнения:

Обратите внимание, что UIStackViewsиспользуйте распределение «Равный интервал» в этом примере.Если вы хотите создавать и добавлять свои CustomView программно, используйте StackView func addArrangedSubview(_ view: UIView).

Удачи!