Как сделать выравнивание по центру элементов UIStackView - PullRequest
Новая
       54

Как сделать выравнивание по центру элементов UIStackView

0 голосов
/ 12 февраля 2020

Чего я хочу достичь

Как сделать элементы в центре UIStackview при следующих условиях?

  • Использование раскадровки

  • Горизонтальная ось

  • Выравнивание заполнено

  • Распределение заполнено

  • Интервал 0

  • UIStackView имеет три метки UILabels с разной длиной строки

  • Ограничения начального и конечного элементов равны суперпредставлению (одинаковые в качестве ширины экрана)

enter image description here

Проблема

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

То, что я пробовал

У меня есть уже пытался изменить выравнивание UIStackView 、 Распределение 、 Интервал, но это не помогло. Кроме того, я не смог найти ни одного решения, ни лучшей практики от Google.

Ответы [ 3 ]

0 голосов
/ 12 февраля 2020

Вы можете добавить два спейсера в вашем стеке, которые покроют оставшееся пространство

рабочий пример

enter image description here

0 голосов
/ 13 февраля 2020

Как сказал PatPatchPatrick , вы можете ограничить представление стека горизонтально центрированным.

Но вы должны учитывать, что произойдет, если ваши строки слишком длинные.

В качестве примера можно привести следующие строки: 

    leftStr = "Hi, there"
    midStr = "HEY"
    rightStr = "Hi"

, а при просмотре по центру стека вы получите:

enter image description here

Предположим, однако, что ваш строки: 

    // Set A
    leftStr = "Hi, there from the Left"
    midStr = "HEY MIDDLE"
    rightStr = "Hi from the Right"

или: 

    // Set B
    leftStr = "Hi, there from the Left"
    midStr = "HEY"
    rightStr = "Hi"

Теперь вы получаете:

enter image description here

2 - К сожалению ... представление стека выходит за границы представления.

3 - поэтому мы добавим '> = 8 leading and trailing (so we have a little padding on each side). Whoops, the text gets truncated... and which label(s) get ... `в зависимости от настроек Приоритета сжатия содержимого.

4 - чтобы избежать усечения, мы установим метки на Number of Lines: 0, чтобы текст был перенесен. Может быть, выглядит хорошо, а может и нет.

5 - Давайте установим выравнивание текста меток по центру. Может быть, то, что мы хотим?

6 - Однако, со строками «Set B» вместо «Set A» - может быть, не так хорошо?

Лучшим вариантом может быть использование одного , центрированная метка (с >=8 начальными и конечными ограничениями):

enter image description here

и использование Атрибутивный текст :

enter image description here

Вот как вы можете определить и установить атрибутный текст: 

    let leftStr = "Hi, there"
    let midStr = "HEY"
    let rightStr = "Hi"

    let font1 = UIFont.systemFont(ofSize: 17.0)
    let font2 = UIFont.boldSystemFont(ofSize: 26.0)
    let offset = (font1.xHeight - font2.xHeight) * 0.5

    let attributedStr = NSMutableAttributedString(string: leftStr + " ", attributes: [NSAttributedString.Key.font: font1])
    attributedStr.append(NSAttributedString(string: midStr, attributes: [NSAttributedString.Key.font: font2, NSAttributedString.Key.foregroundColor: UIColor.red, NSAttributedString.Key.baselineOffset: offset]))
    attributedStr.append(NSMutableAttributedString(string: " " + rightStr, attributes: [NSAttributedString.Key.font: font1]))

    theLabel.attributedText = attributedStr

В качестве примечания и для вашего будущего ссылка ...

Это помогает полностью определить ваш вопрос. Предположительно, в вашем настоящем приложении вы не будете отображать:

«Привет, есть ЭЙ Привет»

, поэтому вполне возможно, что ни один из этих подходов не даст вам желаемых результатов.

Было бы намного лучше, если бы вы включили real примеров того, что Ваше приложение будет отображаться, и как вы хотите, чтобы оно выглядело.

0 голосов
/ 12 февраля 2020

Вы имеете в виду, как это?

Установите «выравнивание = заполнить», распределение = «равный интервал». И убедитесь, что для всех ваших надписей Layout установлено значение "automati c", а не "Перевести маску в ограничения".

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

Установите лидирующие и конечные ограничения> = 0, поэтому, если размер стека становится слишком большим, он все равно будет ограничен.

enter image description here

...