Autolayout: происхождение и размер должны меняться в зависимости от ширины и высоты
Вот сценарий, что мне нужно.
Я поместил 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 +.
Я могу легко добиться этого, установив Маски с автоматическим изменением размера. Как я могу добиться того же, используя autolayout? Какой шаг я должен следовать, какие ограничения я должен применять?
Мой предыдущий вопрос по этому
Я прилагаю некоторые скриншоты, что мне нужно, используя Autolayout (Достигается с помощью маски авторазмера, показанной на рисунке выше).
Моя попытка:-
Шаг 1:- Возьмите кнопку размером 100X100 на IB. установите его X=100 и y=100. Шаг 2:- применил эти ограничения.
6 ответов
В качестве предварительного вопроса вы можете установить эти ограничения на UIButton.
Вы не обязаны изменять ограничение, которое вы установили для высоты и ширины UIButton.
1.) Вам нужно установить горизонтальное пространство для Button.Leading и Superview.Trailing.
Установите константу = 0, приоритет =1000 и множитель =100:320, как я установил на изображении ниже.
2.) Вам нужно установить горизонтальное пространство для Button.Top и Superview.Bottom.
Установите константу = 0, приоритет =1000 и множитель =100:568, как я установил на изображении ниже.
Результат
Надеюсь, это решит вашу проблему.
Используйте множитель ограничений. Итак, установите ограничение, чтобы ширина кнопки равнялась ширине вида сверху с множителем 100:320 (вы можете использовать эту форму отношения для выражения множителя). Установите константу ограничения равной 0. Сделайте то же самое для высоты кнопки, пропорциональной высоте вида сверху (соотношение 100:568). Для положения кнопки ограничьте ведение кнопки к ширине вида сверху с соотношением 100: 320, а сверху кнопки к высоте вида сверху с соотношением 100:568.
Если вы хотите сделать это полностью в вашей раскадровке (или XIB), вам нужно использовать вид спейсера.
Сначала поместите вид спейсера в верхнем левом углу корневого вида. Заставьте его верхний и левый края быть нулевым расстоянием от суперпредставления. Ограничьте его ширину 100:320 до ширины суперпредставления (и убедитесь, что первым элементом ограничения является разделитель). Ограничьте его высоту 100:568 до высоты суперпредставления. Эти ограничения по ширине и высоте будут контролировать положение кнопки.
Теперь ограничьте верхний край кнопки нижним краем распорки и ограничьте левый край кнопки правым краем распорки. Создайте пропорциональные ограничения ширины и высоты между кнопкой и суперпредставлением.
Установите вид распорки скрытым. Скрытые виды не видны и не получают прикосновений, но все еще участвуют в макете.
… Если вы хотите сделать это в коде, просто используйте маску авторазмера и установите translatesAutoresizingMaskIntoConstraints
в YES
,
Для высоты и ширины создайте ограничение "Соотношение сторон" в Интерфейсном Разработчике, связывая кнопку с суперпредставлением. Там нет свойства для соотношения сторон; он будет использовать значения в то время, когда он был создан, чтобы установить множитель (если ширина iPhone <= 5 и привязка суперпредставления к ширине кнопок, это будет 320:100) . Добавьте второе ограничение для соотношения сторон, связывающего высоту кнопки с высотой суперпредставления (если вы не хотите, чтобы высота растягивалась с iPhone 5, вы можете связать соотношение сторон кнопки с самим собой.).
Для происхождения, я не думаю, что есть способ связать происхождение видов и их размер. Чтобы установить начало координат на произвольную высоту или ширину в зависимости от размера экрана, вам необходимо создать вид спейсера. Невыразительный, но необходимый. Добавьте представление и установите его скрытым (и назовите его в схеме объекта слева, что при работе с автопоставкой в IB вы, вероятно, захотите сделать со всем, чтобы сделать ограничения читабельными, но определенно здесь, чтобы вы могли легко найти его снова), Установите ограничения создания на ноль, связывая его с кнопкой и верхним руководством по макету, и ноль с superview.leading и button button.
Чтобы настроить интервал, вы можете создать ограничения соотношения сторон, как для ширины суперпредставления, так и для высоты суперпредставления, или просто установить его равным ширине и высоте кнопки.
Попробуйте это решение
- Установите выравнивание верхней части видов по центру superviews и установите множитель 84:240
- Установите выравнивание видов по левому краю супервизоров X и установите множитель 100:160
- установить пропорциональную ширину с множителем 100:320 и пропорциональную высоту 100:568
Надеюсь, что это решит вашу проблему
Вы можете сделать все это в IB, используя 2 вспомогательных представления. Top helper
и Left Helper
, Остальное просто настроить так, чтобы каждая высота и ширина были соответственно пропорциональны размеру вида. Я настроил пример. Вот пара скриншотов и разных размеров просмотра.