AutoLayout, чтобы сохранить размеры просмотра пропорционально

Я пытаюсь добиться следующего:

У меня есть 2 вида в моем xib, которые должны оставаться на расстоянии 20 пикселей от края (с обеих сторон и сверху).
2 вида, которые необходимо изменить размер, не имеют одинакового размера.
Они должны быть на расстоянии 20 пикселей.
Их ширина должна оставаться относительно ширины родительского представления

Я прочитал учебник о том, как это сделать, и он работает, но проблема заключается в том, что он требует, чтобы оба представления имели одинаковую ширину и вывод Widths equally, чего я не хочу.

Вот что я пробовал:

Добавить ограничение ведущего пространства влево до 20 пикселей.
Добавить ограничение верхнего пространства для просмотра влево до 20 пикселей.
Добавить ограничение верхнего пространства в правый вид до 20 пикселей.
Добавить ограничение хвостового пространства в правый вид до 20 пикселей.
Добавить ограничение горизонтального расстояния для обоих представлений до 20 пикселей.

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

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

Вот скриншоты моего макета и ограничений:

Спасибо!

ИЗМЕНИТЬ

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

2012-10-11 08:59:00.435 AutolayoutTest[35672:c07] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want.
    Try this: (1) look at each constraint and try to figure out which you don't expect;
    (2) find the code that added the unwanted constraint or constraints and fix it. (Note:  
    If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSLayoutConstraint:0x8a6b2b0 H:[UIView:0x8a6b1d0(170)]>",
    "<NSLayoutConstraint:0x8a68ad0 H:[UIView:0x8a69430(90)]>",
    "<NSLayoutConstraint:0x8a6ba40 H:[UIView:0x8a69430]-(20)-[UIView:0x8a6b1d0]>",
    "<NSLayoutConstraint:0x8a6ba00 H:[UIView:0x8a6b1d0]-(20)-|   (Names: '|':UIView:0x8a6b7e0 )>",
    "<NSLayoutConstraint:0x8a6b940 H:|-(20)-[UIView:0x8a69430]   (Names: '|':UIView:0x8a6b7e0 )>",
    "<NSAutoresizingMaskLayoutConstraint:0x7199aa0 h=--& v=--& V:[UIView:0x8a6b7e0(568)]>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x8a6b2b0 H:[UIView:0x8a6b1d0(170)]>

Ответ 1

Это можно решить, добавив еще один фиктивный вид (dummyView) с его ограничениями, установленными на Fixed width, height и aligned to centerX of Superview. Затем добавьте вид слева и правый вид. Ограничение горизонтального расстояния до dummyView.

Ответ 2

Возможно, мне скоро придет решение, но это действительно можно сделать очень легко в IB.

Сначала добавьте UIView и вставьте все четыре ребра супервизора.

Затем добавьте ваш первый subview и расположите его соответствующим образом (ig: x = 0, y = 0, height = fixed height, width = Ширина, которую вы хотели бы относить к UIView мы привязали все четыре края).

Выберите UIView и первое подвью и добавьте ограничение Равные ширины. Конечно, это покажет вам ошибку в позиционировании в автозапуске, но это нормально, потому что это еще не все, что вы хотите.

Теперь приходит трюк: выберите ограничение Equal Widths и отредактируйте коэффициент Multiplier как нужный вам коэффициент (например: 1: 4, если вы хотите, чтобы первый subview был 1/4 UIView). Повторите шаги для второго подзапроса и Tadaaaaaa!

Ответ 3

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

Вам нужно будет добавить ограничения ширины в коде. Я достиг этого, сначала добавив два вида в NIB без ограничений ширины. Это ограничения для первого (левого) вида:

Это ограничения, которые у меня были для второго (правого) вида:

Это оставляет дополнительное ограничение, которое вы не хотите на втором представлении - ведущее пространство между супервизором и вторым представлением, как показано ниже:

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

@property (nonatomic, strong) IBOutlet NSLayoutConstraint *view2superviewLeadingConstraint;

Затем в вашем контроллере viewDidLoad вы можете удалить его, используя:

[self.view removeConstraint:self.view2superviewLeadingConstraint];

Наконец, добавьте ограничения ширины. Ключевым моментом здесь является параметр множителя для определения того, какой процент вы хотите, чтобы ширина была основана на ширине супервизора. Также обратите внимание, что вы должны установить постоянные параметры равными начальным/конечным итоговым значениям, установленным в IB:

NSLayoutConstraint *constraint1 = [NSLayoutConstraint constraintWithItem:self.view1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:0.3 constant:-20];
[self.view addConstraint:constraint1];

NSLayoutConstraint *constraint2 = [NSLayoutConstraint constraintWithItem:self.view2 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:0.7 constant:-40];
[self.view addConstraint:constraint2];

Ответ 4

Просто выберите соотношение сторон:

Ответ 5

Как уже упоминалось, клавиша устанавливает множитель на ограничение "Ширина штырей равно", так что ширина представлений оказывается кратной друг другу. XCode 5.1 должен добавить возможность установить это в Interface Builder, но до этого у вас есть еще один вариант, помимо установки его в коде. Если вы создаете ограничение "Ширина контактов равно", перейдите в "Идентификационный инспектор" в панели "Утилиты" справа, а затем найдите "Атрибуты, определенные пользователем". Добавьте новый атрибут с ключом "множитель", введите "число" и значение, равное желаемому соотношению.

Это не будет отражено в Interface Builder, но будет применяться при использовании вашего представления.

Ответ 6

Удалите два ограничения ширины в коде или уменьшите их приоритеты в IB, иначе вы слишком ограничены.

Добавьте ограничение для описания отношения ширины между зеленым и синим представлениями в коде:

// Assuming the ratio you want is green_view_width : blue_view_width = 1 : 2
NSLayoutConstraint *c = [NSLayoutConstraint constraintWithItem:greenView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5f constant:0.f];
[commonSuperview addConstraint:c];

Ответ 7

Теперь это возможно в XCode 6 с свойством соотношения сторон

Ответ 8

Я не уверен, насколько вы знакомы с авто-макетом, поэтому извиняйтесь, если это то, что вы уже знаете:

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

Из экрана, который вы опубликовали, видно, что вы задали несколько ограничений, например, ваш зеленый вид слева имеет ограничение, обозначающее "Ширина (90)", что означает, что ширина должна быть ровно на 90 пунктов.

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

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

Ответ 9

В интерфейсе Builder перетащите представление с правой кнопкой (всего лишь немного, чтобы отобразить черное всплывающее окно).
Во всплывающем меню выберите Aspect Ratio.