Отображение изображения в прокрутке с конкретными ограничениями (с автоматическим расположением)

Question

Я хотел бы отобразить заголовок и изображение ниже в моем контроллере. Мои ограничения:

• метка может быть 50px в верхней части экрана
• метка может иметь один или несколько рядов
• изображение может быть 50px моего лейбла
• в изображение должно иметь ширину экрана
вид
• свиток должен прокручивать в зависимости от размера всех этих элементов

у меня есть VI Контроллер EW с целью прокрутки:

-view Контроллер

--- вид

------ вид прокрутки

вид --------- контейнера

------------ ярлык

------------ изображение

Я хочу U se раскадровку и автомат.

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

Если я использую «aspect fit» или «scale to fill» для изображения, в этом случае ярлык и изображение находятся на 50 пикселей, как я хочу.

С аспект приступе:

с масштабом для заполнения:

Но если я использую "аспект заливку", я не понимаю, как изображение отображается.

С аспект заливки:

Это было около 3 дней, что я по этому вопросу, это меня с ума. Я попытался использовать невидимые «проставки» ... Я не нашел решение.

Я развиваюсь быстро, используя Xcode 6.

EDIT 1: Положение изображения решается с vacawama советом

Добавить @IBOutlet для вашего ImageView и свойство вашего контроллера представления, чтобы следить за ограничением:

@IBOutlet weak var imageView: UIImageView! 
var aspectRatio:NSLayoutConstraint? 

Затем добавьте новый образ:

let tree = UIImage(named: "WinterTree.jpg")! 

imageView.image = tree 
aspectRatio = NSLayoutConstraint(item: imageView, attribute: .Height, relatedBy: .Equal, toItem: imageView, attribute: .Width, multiplier: tree.size.height/tree.size.width, constant: 1) 
imageView.addConstraint(aspectRatio!) 

EDIT 2: Но после того, как, на мой взгляд не ло nger прокручивать

Ограничения моего зрения контейнера:

я удалил нижнее ограничение, чтобы на высоту зрения контейнера приспосабливается к содержанию, но я получаю сообщение об ошибке:

Answer 1

Проблема заключается в том, что высота изображения не изменяется, поэтому изображение просто центрируется по старому кадру. Настройка режима просмотра (Aspect Fit, Scale To Fit или Aspect Fill) не изменяет высоту вашего изображения. Вам нужно ограничение для высоты вашего изображения, но это ограничение изменится в зависимости от вашего изображения.

Я смог выполнить эту работу, выполнив следующие действия.

1. Я ограничил ширину изображения по ширине вида.

2. Я добавил ограничение AspectRatio к изображению. Это устанавливает отношение ширины к высоте, и поскольку я указал ширину изображения, высота будет теперь полностью указана. Я надеялся, что смогу обновить это ограничение в коде, когда загружу новое изображение (потому что разные изображения имеют разные пропорции), но я мог только изменить код constant из кода, а не multiplier. Поэтому, чтобы обойти это, я сделал это Ограничением Заместителя, проверив Заместитель в Атрибут Inspector. Это означает, что это ограничение будет удалено во время сборки.

3. В коде, когда я устанавливаю изображение для изображения, я добавляю ограничение, которое устанавливает ширину изображенияView на высоту изображенияView с мультипликатором. Это заменяет ограничение соотношения сторон, которое было установлено в Interface Builder.

   Во-первых, добавьте @IBOutlet для вашего ImageView и свойство вашего контроллера представления, чтобы следить за ограничением:

   @IBOutlet weak var imageView: UIImageView! 
   var aspectRatio:NSLayoutConstraint? 
   

   Затем добавьте новый образ:

   let tree = UIImage(named: "WinterTree.jpg")! 
   
   imageView.image = tree 
   aspectRatio = NSLayoutConstraint(item: imageView, attribute: .Height, relatedBy: .Equal, toItem: imageView, attribute: .Width, multiplier: tree.size.height/tree.size.width, constant: 1) 
   imageView.addConstraint(aspectRatio!) 
   

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

   imageView.removeConstraint(aspectRatio!) 
   

---

Я реализовал нечто похожее на ваш макет. У моего проекта есть кнопка вместо вашей метки, но в остальном она похожа. Когда пользователь нажимает кнопку, мое приложение заменяет изображение одним с совершенно другим соотношением сторон. Вот схема документа и все ограничения из моего проекта.

---

First Item:  WinterTree1.jpg.Width 
Relation:   Equal 
Second Item:  WinterTree1.jgp.Height 
Constant:   1 
Priority:   1000 
Multiplier:  0.68 

First Item:  WinterTree1.jpg.Leading 
Relation:   Equal 
Second Item:  ContentView.Leading 
Constant:   8 

First Item:  ContentView.Bottom 
Relation:   Equal 
Second Item:  WinterTree1.jpg.Bottom 
Constant:   8 

First Item:  ContentView.Trailing 
Relation:   Equal 
Second Item:  WinterTree1.jpg.Trailing 
Constant:   8 

First Item:  WinterTree1.jpg.Top 
Relation:   Equal 
Second Item:  Button.Bottom 
Constant:   20 

First Item:  Button.Top 
Relation:   Equal 
Second Item:  ContentView.Top 
Constant:   20 

First Item:  ContentView.Center X 
Relation:   Equal 
Second Item:  Button.Center X 
Constant:   0 

First Item:  Superview.Trailing 
Relation:   Equal 
Second Item:  ContentView.Trailing 
Constant:   0 

First Item:  ContentView.Leading 
Relation:   Equal 
Second Item:  Superview.Leading 
Constant:   0 

First Item:  Superview.Bottom 
Relation:   Equal 
Second Item:  ContentView.Bottom 
Constant:   0 

First Item:  ContentView.Top 
Relation:   Equal 
Second Item:  Superview.Top 
Constant:   0 

First Item:  ContentView.Width 
Relation:   Equal 
Second Item:  Superview.Width 
Constant:   0 

First Item:  Scroll View.Leading 
Relation:   Equal 
Second Item:  Superview.Leading 
Constant:   0 

First Item:  Scroll View.Top 
Relation:   Equal 
Second Item:  Superview.Top 
Constant:   0 

First Item:  Superview.Trailing 
Relation:   Equal 
Second Item:  Scroll View.Trailing 
Constant:   0 

First Item:  Bottom Layout Guide.Top 
Relation:   Equal 
Second Item:  Scroll View.Bottom 
Constant:   0