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

Question

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

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

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

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

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

Answer 1

Я не знаю об использовании 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)); 

Answer 2

Это может быть сделана АВТОМАТИКА при использовании раскадровки (возможно, вам придется изменить настройки или два здесь и там). Когда вы создаете свой графический интерфейс, вы можете переключаться между размерами экрана (3,5 и 4 дюйма), чтобы убедиться, что он будет хорошо выглядеть на обоих. See the answer to this question.

You could also see this tutorial. Это должно дать вам представление о том, как работать с макетами GUI.

Answer 3

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

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

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

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

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

Answer 4

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

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

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

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 контроллера вашего вида - прекрасное место для этого.

Answer 5

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

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

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

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

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

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