2017-01-04 2 views
1

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

enter image description here

Любая идея, как я могу сделать это, так что эти кнопки изменения размера правильно в соответствии с размером экрана? Благодаря!

+0

Какие ограничения вы пробовали? – Paulw11

+1

Два правила 1.Сгруппируйте текст и изображение в виде, так что у вас есть, наконец, четыре вида контейнера. 2. Добавьте пропорциональную высоту и ширину в один вид контейнера и соедините другие виды с одинаковой высотой и шириной. – iphonic

ответ

1

Сделайте группы из UIView, содержащие значок и текст. Назовём этот вид режимом контейнер

Поместите в нее все контейнер п сек в раскадровку, как вы хотели бы, чтобы они появились. Сейчас:

  • К крайнему левому зрения контейнера добавить ведущий и нижнее ограничение на супер зрение.
  • Теперь во второй вид контейнера добавьте ведущее пространство 0 (или что угодно). Control + перетащите вторую кнопку на первую кнопку. Удерживайте сдвиг и выберите равную ширину, равная высота и выровнять нижнее.

Теперь применит то же ограничение, как ваш второй взгляд контейнера всех ваших п - вид 1 контейнера. n - номер вид контейнера, который вы хотите добавить. Теперь к вашему последнему (nth) контейнеру добавьте одно дополнительное ограничение, которое будет занимать конечное место для superView. Теперь все ваши вид контейнера должны иметь равную ширину, которая будет определяться в зависимости от ширины экрана!

Если вы хотите иметь определенную высоту или соотношение сторон ко всем своим контейнерам. Просто добавьте высоту или соотношения сторон ограничение на ваше первыйзрения контейнера и все ваши последующие виды будут обновлены соответствующим образом.

ИЛИ

Если вы хотите, высота будет зависеть от размера экрана и не поддерживать определенное соотношение сторон, то вам придется сделать первый Просмотреть контейнер на равную высоту весь вид с определенным множителем, например 0.15.

Вы также должны добавить соответствующие ограничения на значок и этикетки присутствует внутри каждого UIView

Edit: Намного проще вещь для вас сделать бы добавить значок в виде изображения на UIButton и добавить текст, как обычно, на UIButton. UIButton появится очень похоже на скриншот, который вы опубликовали. А затем примените ограничения, упомянутые выше.

+0

Спасибо за ваш ответ! Я сделал вид контейнера. Как ограничить кнопки внутри каждого из представлений контейнера? –

+0

просто добавьте трейлинг, сверху и снизу к супервизу для кнопки и добавьте верхнюю и нижнюю части в верхнее меню для значка и горизонтальное расстояние между кнопкой и значком. – Rikh

+0

Спасибо, это сработало! –

0

Установите ширину и высоту как отношение к SuperView. Установите, если для одной кнопки и для остальных кнопок высота и ширина равны первой кнопке, для которой вы определили высоту и ширину с точки зрения высоты и размера супервизора. Используйте это SO Post, чтобы узнать, как установить высоту и ширину как отношение супервизора.

Надеюсь, что это поможет.

0

Это просто, потому что все кнопки находятся в одном направлении, поэтому вы можете использовать StackView. Просто просто первым применить равный Hight и одинаковую ширину для всех кнопок

Equal hight and Equal width

теперь выбрать все кнопки и добавить их в stackview

Stackview

будет в праве боковое дно. (с символом ограничения)

теперь просто Применить добавить отсутствующее ограничение. он выполнит работу самостоятельно и даст лучший результат. (Но будьте осторожны, здесь применять его от всех видов в разделе View Controller)

Missing Constraint

А теперь Бинго попробовать это каждый размер будет показывать то же самое.

iPhone 7 plus iPhone 7

iPhone SE

Это будет работать так же в симуляторе тоже.

+0

Спасибо за ваш ответ! Но я не хочу, чтобы все эти кнопки имели постоянные высоты и ширину, потому что они не будут помещаться на меньшие экраны. –

+0

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

0

Решение очень простое.

Смотрите изображение ниже (5 кнопок)

Autolayout 5 buttons

  • Кнопка первый (синий) прижат к левой и нижней части надтаблицы
  • Каждый из других 4 кнопки (красный , черный, зеленый, розовый) выровнены сверху с первой (синей) кнопкой
  • Каждая кнопка использует горизонтальное расстояние до предыдущей кнопки (с постоянной 0). Таким образом, красная кнопка имеет 0 горизонтальных интервалов до синего, черный имеет 0 горизонтальных интервалов до красного и т. Д.
  • . Последняя (розовая) кнопка также закреплена справа от супервизора.
  • Наконец, все 4 других кнопки имеют одинаковые ширина до первой (синей) кнопки

Вот и все!

Как для вас иконки, все, что вам нужно, чтобы установить их, чтобы иметь одинаковую ширину & высоту первого значка вы

Смежные вопросы