Ограничения автомакета для представления из XIB

Я загружаю вид (в форме круга) из круга. Я хочу убедиться, что размер круга адаптируется к разным размерам экрана. До сих пор я пытался разместить представление внутри другого представления, прикрепив поля к супервиду, а затем установив соотношение сторон супервида на 1: 1. Это дает мне круг. Однако теперь я хочу изменить его размер. В настоящее время размер суперпредставления определяется другим подпредставлением в нем, меткой. В зависимости от содержимого метки размер суперпредставления изменяется (я установил размер шрифта метки на Autoshrink). Если я попытаюсь добавить константу к ограничениям полей, это сработает, но выглядит одинаково на разных размерах экрана. Кроме того, я попытался добавить множитель, в то время как множитель работает для конечных и нижних полей, верхние и ведущие поля не зависят от установки множителя. Ниже приведен скриншот IB (Today View — это фигура в вопросе). введите здесь описание изображения


person c00der    schedule 17.03.2017    source источник


Ответы (1)


У вас хорошее начало - выравнивание по центру X и Y, соотношение 1: 1. Все, что вам нужно добавить, — это два набора верхних/нижних и ведущих/конечных ограничений с разными приоритетами. Вот пример, который в сочетании с тремя ограничениями, которые у вас есть, будет центрировать вид во всех ориентациях с 10-точечной границей вдоль более узкой оси:

Приоритет == 750

  • Топ == 10 баллов
  • Внизу == 10 баллов
  • Ведущий == 10 баллов
  • Трейлинг == 10 баллов

Приоритет == 1000

  • Топ >= 10 баллов
  • Внизу >= 10 баллов
  • Ведущий >= 10 баллов
  • Трейлинг >= 10 баллов

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

ИЗМЕНИТЬ:

По памяти есть точки и пиксели. Когда и где это возможно, старайтесь думать с точки зрения очков. Единственный раз, когда вы можете захотеть думать с точки зрения пикселей, это изображения. (Могут быть и другие замеры графики, но опять же, пишу по памяти.)

Точки должны быть одинаковыми для разных размеров устройства — поэтому, если у вас есть квадрат 100x100 на 4-дюймовом экране iPhone, он будет такого же размера на 12,9-дюймовом iPad Pro.

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

В прошлом году я углубился в размеры экрана, и вот текущие размеры экрана:

//iPad Pro        1366x1024
//iPad            1024x768
//iPad Mini       1024x468
//iPhone 6 Plus   736x414
//iPhone 6        677x375
//iPhone 5        568x320
//iPhone 4        480x320

Таким образом, исходя из этого, вышеуказанные ограничения дадут квадрат 300x300 на iPhone 4 (также iPhone SE), поскольку самая узкая ось будет 320 минус два поля по 10 пунктов. А на iPad Pro 12,9 дюйма это будет квадрат 1004х1004.

При создании ограничений в коде вы также можете создать layoutMarginGuide с помощью следующего кода:

    let margins = view.layoutMarginsGuide

Это должно быть то же самое, что поставить флажок «содержать на полях» в IB. По сути, это рекомендуемый размер полей для каждого устройства. (Я считаю, что это также должно включать строку состояния, вкладки и панели навигации и даже «верхний баннер телефонного звонка» iPhone (sic). Но у меня были некоторые проблемы с этим, так что YMMV.)

РЕДАКТИРОВАТЬ 2:

Собрав все это вместе, то, что вы определяете с помощью «автоматического макета», является очень плавным способом максимизации размера квадрата (или, в вашем случае, квадрата, превращенного в круг). Установив два набора полей, один из которых равен, но с высоким приоритетом, вы сообщаете автомакету, что он может нарушить это ограничение. Второй набор со значениями больше или равен является обязательным.

Таким образом, в устройстве с разрешением 480x320 ограничения верхнего/нижнего поля, которые не могут быть соблюдены («равно»), могут быть нарушены, а в горизонтальном положении будут нарушены ограничения начального/конечного поля, которые не могут быть соблюдены. Помните, вы уже установили центр X/Y, поэтому вид будет центрирован, и вы установили соотношение 1:1, чтобы оно было квадратным. (Пока вы не трогали приоритеты - требуется значение по умолчанию.

person dfd    schedule 17.03.2017
comment
Спасибо дфд. Когда я добавлю ограничения в точках, они будут увеличиваться или уменьшаться в зависимости от размера экрана устройства? Я не совсем уверен, что понимаю пункты. Думал, что точка имеет фиксированный размер для разных размеров экрана. Отличается ли точка от экрана к экрану? - person c00der; 17.03.2017
comment
Я добавлю к своему ответу. - person dfd; 17.03.2017
comment
Спасибо за разъяснение dfd. Это действительно помогает. Я добавил ограничения, которые вы упомянули. Однако мне кажется, что я делаю что-то не так (изображение здесь: drive.google.com/open ?id=0B9uT5jilt-3AVkU0M1R5UFhRVFU). Что я здесь делаю неправильно? - person c00der; 17.03.2017
comment
Тяжело сказать. Я хотел убедиться, что даю вам ответ, который работает (он работает), поэтому я создал пример проекта в Swift 3. Это квадратный вид, но на самом деле ваш тоже. :-) Вот, может быть, вы заметили, какое ограничение отключено: github.com/justdfd/soSquare. гит - person dfd; 17.03.2017
comment
Это большая помощь dfd. Действительно ценю это. Да, мой тоже квадратный. - person c00der; 17.03.2017