2015-01-04 2 views
1

Итак, вот сложная задача. Я работаю над портретом, которое должно быть совместимо с iPhone 4s, 5/5s/5c и 6/6 Plus. К сожалению, у меня возникли проблемы с автоматической компоновкой, чтобы пользовательский интерфейс полностью совместим с предыдущими перечисленными устройствами.Использование автоматической компоновки в построителе интерфейса со сложными видами

Вот скриншот того, как пользовательский интерфейс должен выглядеть (это из iPhone 6 Plus, который я использую в качестве справочного материала для других размеров экрана):

У меня есть 338x338 точки blueCircle, 180x180 redCircle, 118x118 greenCircle, 84x84 purpleCircle и, наконец, рекламный баннер размером 50 точек. Результатом, который я хотел бы достичь, является наличие интерфейса iPhone 6 Plus, который учитывает эти размеры просмотров и правильно уменьшает пользовательский интерфейс для всех остальных; в дополнение к этому я разрешу пользователям платить, чтобы удалить рекламный баннер внизу, так что мне тоже нужно изменить размер интерфейса (установить круговое вертикальное расстояние до баннера и установить его высоту на 0, может быть?). Я возился с Interface Builder, и я вышел с достойным - не очень точным результатом. Посмотрите на UI на экране iPhone 4s:

Это выглядит прилично, но есть большая проблема. В Interface Builder я работаю над Freeform ViewController с той же шириной iPhone 6 Plus (414 балла), на которой я добавил все эти виды кругов с ранее указанными размерами кадров. Чтобы привести пример, давайте временно проигнорируем все остальные ограничения, чтобы сосредоточиться на соотношении сторон: на 338x338 blueCircle я добавил ограничение соотношения сторон, то же самое на 180x180 redCircle. Затем я управляю, перетаскивая из красного цикла в синий цикл и снова щелкнув по размерному соотношению, чтобы он изменялся в соответствии с синим цветом. Как я уже сказал, результат не был точным, так как, если я напечатаю рамку redCircle, то консоль скажет, что ее ширина равна 175.666666666667 (вместо 180) точек.

Here's проект, чтобы вы могли проверить это самостоятельно. Я считаю, что его стоит больше тысячи слов. Я не очень хорошо разбираюсь в Auto Layout, и я уверен, что создаю слишком много бесполезных ограничений. Что я могу сделать, чтобы улучшить макет?

+0

Должно ли быть автоматическое размещение? Такие вещи кажутся намного проще, когда выкладываются через код .. но, возможно, это только мое мнение. - К сожалению, я тоже не очень хорошо знаком с авто-макетом. – Cabus

+0

Думаю, вам понадобится немного больше логики, чем позволяет автомакет в IB. Я бы определил, какие простейшие ограничения вы можете использовать, а затем скорректируйте их в коде при загрузке представления. Возможно иметь ссылку на ограничение в вашем коде, так же, как вы можете самим видом (перетаскивание в ваш код). Я сделал это, чтобы умерить некоторые ограничения, чтобы все было в порядке. Например, если вы недовольны шириной, равной 175.66667, тогда в коде вы можете настроить ограничение после выполнения округления. –

+0

В настоящее время я не использую Автомакет в моем фактическом проекте. Я просто проверяю рамку просмотра, чтобы узнать, на каком устройстве работает приложение. У меня были некоторые проблемы с этим подходом, когда интерфейс меняет свою высоту, когда высота строки состояния увеличивается из-за фонового вызова/навигации/звука. – lucamegh

ответ

0

вам необходимо установить высоту и ширину всех видов кругов пропорционально их родительскому виду. Я установил высоту синего представления как 0,5 пропорционально его родительскому виду, и его ширина будет в аспекте с самим собой, так как 1: 1 повторите то же самое для всех других видов и примените вертикальное расстояние и горизонтальное расстояние по мере необходимости между видами

это, как это выглядит на Iphone 4

enter image description here

это, как это выглядит на Iphone 6 плюс

enter image description here

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