Автоотключение: происхождение и размер должны меняться в соответствии с коэффициентом ширины и высоты

Вот сценарий, в котором я нуждался.

Я положил UIButton на IB (размер iPhone4 дюйм), чей начальный кадр на IB равен x: 100, y: 100, w: 100, h: 100. Я хочу, чтобы происхождение и высота должны измениться в зависимости от размера устройства. например, ширина и высота iPhone6 ​​составляет 375X667, поэтому коэффициент ширины (375/320 = 1,1718) и коэффициент высоты (667/568 = 1,1742). В этой сцене я хочу изменить начальные значения X и ширину кнопок с умножением на коэффициент ширины (1.1718) и начало Y и высоту с умножением на коэффициент высоты (1.1782). В этом случае моя кнопка должна отображаться на x: 100X1.1718, y: 100X1.1742, w: 100X1.1718, h: 100X1.1742.

то же самое нужно для iPhone6 ​​+.

enter image description here

Я могу легко достичь этого, установив эту маску авторезистировки. Как я могу добиться этого, используя автозапуск? На каком этапе следует следовать, какие ограничения следует применять?

Мой предыдущий вопрос об этом

Я прилагаю скриншоты, которые мне нужны, используя Autolayout (Достигнуто с помощью маски авторезиста, показанной на изображении выше).

I am attaching some screenshots what i needed by using autoresizing.

enter image description here

enter image description here

enter image description here

Моя попытка: -

Шаг 1: - Возьмите кнопку размером 100X100 на IB. установите его X = 100 и y = 100. enter image description here Шаг 2: - применил эти ограничения. enter image description hereenter image description hereenter image description hereenter image description hereenter image description here

Ответы

Ответ 1

Как и прежде, вы можете установить эти ограничения для своего UIButton.

Вам не требуется изменять ограничение, которое вы установили для высоты и ширины UIButton.

1.) Вам нужно установить горизонтальное пространство в Button.Leading и Superview.Trailing.

Установите константа = 0, Приоритет = 1000 и Множитель = 100: 320, как я установил ниже.

enter image description here

2.) Вам нужно установить горизонтальное пространство в Button.Top и Superview.Bottom.

Установите константа = 0, Приоритет = 1000 и Множитель = 100: 568, как я установил ниже.

enter image description here

Результат

enter image description here

enter image description here

enter image description here

Надеюсь, что это решает вашу проблему.

Ответ 2

Используйте множитель ограничений. Таким образом, установите ограничение на то, что ширина кнопки равна ширине верхнего вида с коэффициентом 100: 320 (вы можете использовать эту форму отношения для выражения множителя). Установите константу ограничения равным 0. Сделайте то же самое для высоты кнопки, пропорциональной высоте верхнего вида (соотношение 100: 568). Для положения кнопки ограничьте кнопку, ведущую к ширине верхнего вида, с отношением 100: 320 и верхней частью кнопки к высоте верхнего вида с отношением 100: 568.

Ответ 3

Если вы хотите сделать это полностью в своем раскадровке (или XIB), вам нужно использовать спейсер.

Сначала поставьте спейсер в верхнем левом углу корневого представления. Ограничьте его верхний и левый края, чтобы получить нулевое расстояние от супервизора. Ограничьте его ширину до 100: 320 до ширины супервизора (и убедитесь, что первым элементом ограничения является разделитель). Ограничьте его высоту 100: 568 до высоты надзора. Эти ограничения ширины и высоты будут управлять положением кнопки.

Теперь привяжите верхний край кнопки к нижнему краю проставки и ограничьте левый край кнопки на правом краю проставки. Создайте пропорциональные ограничения ширины и высоты между кнопкой и надстройкой.

Установите спейсер на скрытый. Скрытые виды не видны и не получают штрихов, но все равно участвуют в макете.

... Если вы хотите сделать это в коде, просто используйте маску авторезистировки и установите translatesAutoresizingMaskIntoConstraints в YES.

Ответ 4

Для высоты и ширины создайте ограничение "пропорции" в Interface Builder, связав кнопку с надстройкой. Нет свойства для соотношения сторон; он будет использовать значения в момент его создания, чтобы установить множитель (если iPhone <= 5 ширина и привязка супервизора к ширине кнопок, это будет 320: 100). Добавьте второе ограничение для соотношения сторон, связывающего высоту кнопки с высотой надписи (если вы не хотите, чтобы высота растянулась с iPhone 5, вы могли бы связать соотношение сторон кнопок с самим собой).

Для начала, я не думаю, что есть способ связать происхождение взглядов и размер представлений. Чтобы установить источник на произвольную высоту или ширину в зависимости от размера экрана, вам нужно создать проставку. Неэлегантный, но необходимый. Добавьте представление и установите его скрытым (и назовите его в контуре объекта слева, что при работе с автозапуском в IB вы, вероятно, захотите сделать все, чтобы сделать ограничения доступными для чтения, но определенно здесь, чтобы вы могли легко найти его), Установите ограничения создания на нуль, привязывая их к кнопке и верхнему руководству по макете, и ноль к элементу superiew.leading и кнопке.

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

Ответ 5

Попробуйте это решение

  • Установить верхнее выравнивание представлений в центр наблюдения Y и установить множитель 84: 240
  • Установить выравнивание по левому краю в центр наблюдения X и установить множитель 100: 160
  • установить пропорциональную ширину с множителем 100: 320 и пропорциональная высота 100: 568

Image reflecting above propertyalign left to superview centerX

Align top to superview centerY

Надеюсь, что это решает вашу проблему.

Ответ 6

Вы можете сделать все это в IB, используя 2 вспомогательных представления. A Top helper и a Left Helper. Остальное просто устанавливает его так, чтобы каждая высота и ширина соответствовали размеру вида. Я устанавливаю пример. Вот несколько скриншотов и разных размеров.

enter image description hereenter image description here