Создание макета iOS на основе процентов

Я пытаюсь реплицировать макет, который у меня есть в приложении для Android, но я не знаю, как это сделать в iOS, особенно из-за высоты iPhone 5.

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

Лучший способ объяснить это:

Я хочу два макета. Верхняя компоновка должна занимать 40%, а нижняя часть должна занимать 60%.
В верхнем макете они должны быть тремя кнопками, которые заполняют все возможное пространство (по существу, 1/3 пробела).
В нижней компоновке я хочу, чтобы изображениеView, а затем textView поверх этого.

Это макет краски. Это можно сделать в iOS? Я считаю, что макеты намного сложнее создать, чем андроид.

Ответ 1

Используя Xcode 6.0, теперь вы можете указать пропорциональную ширину или высоту в Interface Builder. Шаги для процентного роста от супервизора:

Если выбраны как дочерний вид, так и его супервизор, добавьте ограничение "равной высоты" (или "равную ширину", если вы хотите иметь пропорциональную ширину).

Затем измените "множитель" ограничения, которое вы только что добавили, в нужную пропорцию. Например, на 50% измените его на 2.

Если вы хотите указать внутренний вид в процентах от супервизора, вы можете отменить элементы в ограничении:

Теперь вы можете использовать множитель 0,5 (или любую другую пропорцию, которая вам нужна):

В вашем конкретном случае вы можете определить ограничение равной высоты между двумя дочерними представлениями и изменить множитель на 1,5 (нижний размер равен 1,5 на верх) или 0.6667, если элементы будут отменены.

Ответ 2

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

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

Вот хороший синтаксис визуального формата, который позволяет описывать ограничения как строки. Потратьте минутку, чтобы посмотреть на связанный документ - вам не потребуется намного больше времени, чтобы узнать, что вы можете читать строки. Например, ваш верхний макет может быть указан следующим образом:

V:[button1]-[button2(==button1)]-[button3(==button1)]

В скобках ==button1 указывается, что система макета делает button2 и button3 той же высотой, что и button1. - указывает, что между кнопками должен использоваться стандартный интервал; вы можете указать другой интервал, если хотите. Для 10-точечного интервала сделайте следующее:

V:|-10-[button1]-10-[button2(==button1)]-10-[button3(==button1)]-10-|

Как только у вас есть такая строка, вы можете превратить ее в ограничение с помощью метода: +[NSLayoutConstraint constraintsWithVisualFormat:options:metrics:views:]

Некоторые ограничения не могут быть указаны ни визуально, ни строками, описанными выше. Главными среди них являются те, где вы хотите установить постоянную (но неравную) взаимосвязь между двумя представлениями, как с вашими верхними и нижними макетами. Вы хотите, чтобы один из них занимал 40% доступного вертикального пространства, а другой - 60%. Сделайте это с помощью метода: +[NSLayoutConstraint constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:]. Например:

NSLayoutConstraint *c = [NSLayoutConstraint constraintWithItem:bottomView
                                                     attribute:NSLayoutAttributeHeight
                                                     relatedBy:NSLayoutRelationEqual
                                                        toItem:topView
                                                    multiplier:1.5
                                                      constant:0];

Это дает вам ограничение, которое устанавливает высоту bottomView в 1,5 раза больше высоты topView (это то, что вы хотите, так как 60/40 = 1,5).

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

Ответ 3

Я не знаю об использовании autolayout, поскольку я его не использую, но в коде без него вы можете создать два UIViews и установить их фреймы на:

CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height * 0.4f);
CGRectMake(0, self.view.frame.size.height * 0.4f, self.view.frame.size.width, self.view.frame.size.width * 0.6f);

И затем в верхнем виде вы можете добавить кнопки с кадрами (при условии, что представление называется view1):

CGRectmake(0, 0, self.view.frame.size.width, view1.frame.size.height * (1.0f/3.0f));
CGRectmake(0, view1.frame.size.height * (1.0f/3.0f), self.view.frame.size.width, view1.frame.size.height * (1.0f/3.0f));
CGRectmake(0, view1.frame.size.height * (2.0f/3.0f), self.view.frame.size.width, view1.frame.size.height * (1.0f/3.0f));

Ответ 4

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

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

Когда вы добавляете компоненты в свое представление, это создаст вам несколько ограничений. Добавив один верх, а другой снизу, он создаст как интервал между вершинами и между ними. Чтобы отредактировать их, просто перейдите к инспектору, пятая вкладка (линейка), и вы увидите список ограничений. Наконец, вы можете попробовать использовать меню ограничений (я не знаю, есть ли там известное имя). Он находится в нижнем правом углу холста Interface Builder. См. Изображение:

Пожалуйста, дайте мне знать, если вам нужна дополнительная помощь.

Ответ 5

Это можно сделать автоматически при использовании раскадровки (вам может потребоваться изменить параметр или два здесь и там). Когда вы создаете свой графический интерфейс, вы можете переключаться между размерами экрана (3,5 и 4 дюйма), чтобы убедиться, что он будет хорошо выглядеть на обоих. См. ответ на этот вопрос.

Вы также можете увидеть этот учебник. Это должно дать вам представление о том, как работать с макетами графического интерфейса.