it-roy-ru.com

Как добавить равный интервал и равную ширину для кнопки в iOS Auto layout

Я новичок в Авто ограничения макета в XCode. У меня есть один вид снизу, как UITabBar с 6 UIButtons. Без ограничений я выровнял эти кнопки с 5 пробелами для каждой кнопки, и каждая кнопка имеет ширину 50. Теперь я пытаюсь сделать это с помощью автоматического макета для поддержки всех размеров экрана. 

В ограничениях раскадровки я установил равную ширину для 6 кнопок и сделал 60 пробел между каждой кнопкой. Я установил первую кнопку 0 на начальный пробел и Я установил последнюю кнопку 0 для ограничения хвоста.

Я хочу buttons with equal width and flexible spaces между представлениями во всех размерах устройства. 

Кто-нибудь может мне помочь? Ищу помощь. Заранее спасибо.

 enter image description here

23
Yuvaraj.M

проверьте это изображение и сделайте ваши ограничения, как показано ниже ... 

 enter image description here

РЕЗУЛЬТАТ: - просмотр в разных размерах 

 enter image description here


С Stackview (для iOS 9.0 и выше)

 enter image description here

ПРИМЕЧАНИЕ. Если вам нужно создать приложение для iOS 9 и более поздних версий, тогда UIStackView - еще один вариант для вас.

56
EI Captain v2.0

С iOS 9 и Xcode 7 теперь вы можете получить ожидаемый результат с UIStackView и только с 3 или 4 автоматическими ограничениями макета.

Следующий шаг за шагом использует раскадровку.

  1. Создайте 6 UIButtons и 5 UIViews. Выровняйте их по горизонтали. Придайте цвет вашему взгляду.

 enter image description here

  1. Выберите все ваши представления и кнопки и нажмите кнопку Stack. Все ваши кнопки и цветные виды будут выровнены в UIStackView.

 enter image description here

  1. Выберите вид стека, перейдите на панель Utilities и выберите элемент Attributes Inspector. Там нажмите на кнопку Distribution и выберите «Заполнить одинаково».

 enter image description here

  1. На данный момент высота вашего стека зависит от размера содержимого ваших кнопок. Если у вас все в порядке, вы можете перейти к шагу 5. Однако при необходимости вы можете задать вашему стековому представлению ограничение высоты. Выберите вид стека, нажмите кнопку Pin, проверьте кнопку Height, добавьте требуемое значение и нажмите кнопку Add 1 Constraint.

 enter image description here

В качестве альтернативы, если вы хотите, чтобы каждый элемент вашего стекового представления имел высоту, соответствующую его ширине, выберите первую кнопку вашего стекового представления, нажмите кнопку Pin, выберите Aspect Ratio и нажмите кнопку Add 1 Constraint.

 enter image description here

Вы можете проверить правильность ограничения соотношения сторон в вашем Document outline (левая панель) и, если вам нужно, вы можете изменить его с помощью другого ограничения в Attribute inspector (правая панель).

 enter image description here

  1. Теперь пришло время дать некоторые внешние ограничения для вашего стека. Выберите ваш вид стека. Нажмите кнопку pin, убедитесь, что кнопка Constrain to margin не выбрана, и установите начальные, конечные и нижние ограничения на ноль. Убедитесь, что нижнее ограничение связано с представлением вашего контроллера представления. Затем измените кнопку Update Frames на «Все кадры в контейнере». Теперь вы можете нажать на кнопку Add 3 Constraints.

 enter image description here

Ваше представление стека теперь установлено.

 enter image description here

Дальнейшее замечание:

Если вам не нужна ширина ваших цветных видов, чтобы соответствовать ширине кнопок, вы можете создать вид стека с помощью только UIButtons и просто добавить интервал к вашему виду стека в Attribute inspector. Однако вам нужно будет найти способ добавить цвет фона позади вашего стека. Apple заявляет об этом в UIKit Framework Reference :

UIStackView является не рендерингом подкласса UIView. Это не предоставить любой пользовательский интерфейс самостоятельно. Вместо этого он просто управляет положение и размер его упорядоченных видов. В результате некоторые свойства (как backgroundColor) не влияет на представление стека.


Я построил проект Xcode с 4 различными видами стека:

  • один с цветными видами и полагающийся на встроенный размер UIButtons для его высоты,
  • один с цветными видами и с UIButton ограничением "равной ширины и высоты",
  • один с цветными видами и с собственным ограничением высоты,
  • один без цветных видов, но с интервалом и встроенным в цветной вид.

Вы можете найти этот проект на этом GitHub repo .

8
Imanou Petit

iOS 9 имеет новый класс UIKit под названием UIStackView. Это очень полезно при размещении видов по горизонтали или вертикали, как вы хотите. Вы должны проверить этот учебник: Raywenderlich: Учебник UIStackView

0
Anand V

Выберите все кнопки и в меню Pin Xcode 

  1. Создайте горизонтальное ограничение от верхнего левого вида до правого верхнего угла, выбрав красную линию для ближайшего соседа с правой стороны выбранного вида.
  2. Создайте горизонтальное ограничение от верхнего правого обзора до верхнего левого обзора, выделив красную линию на ближайший сосед левой стороны выбранного вида.
  3. Создайте вертикальное ограничение из вида сверху, выделив красную линию для ближайшего соседа верхней стороны выбранного вида.
  4. Установите флажок рядом с высотой, равной шириной и нажмите « Добавить 22 ограничения »
0
Manisha