Clever Geek Handbook

Displaying a scrolling image with specific restrictions (auto-positioning)

I would like to display the title and image below in my controller. My limitations:

  • the label can be 50 pixels at the top of the screen.
  • the label can contain one or more lines
  • the image can be 50px of my label
  • the image must have the width of the screen
  • the scroll view should scroll depending on the size of all these elements.

I have a view controller with a scroll list:

-view controller

--- view

------ scroll view

--------- container type

------------ label

------------ Images

I want to use storyboard and automaton.

I was able to align the label correctly, but I cannot display the 50px image of the label and keep its ratio.

If I use "aspect fit" or "scale to fill" on the image, in that case the label and the image are 50px as I want.

With an aspect approach:

aspectFit

With filling the scale:

scaleToFill

But if I use "fill fill" I don't understand how the image is displayed.

With filling aspect:

aspectFill

It's been about 3 days now and I'm at this question, it makes me crazy. I've also tried using invisible "spacer" views ... I haven't found a solution.

I am developing fast with Xcode 6.

EDIT 1: Image positioning allowed with vacawama recommendation

Add @IBOutlet to your imageView and your view controller properties to keep track of the constraint:

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

Then add a new image:

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: But after that I no longer have scrolling

Limitations of my container view:

constraints

I removed the bottom constraint to make the container's view height adapt to the content, but I get the error:

error

+2


source to share


1 answer


The problem is that the height of the image doesn't change, so the image is just centered over the old frame. The view mode setting (Aspect Fit, Scale To Fit, or Aspect Fill) does not change the height of your image. You need to limit the height of your image, but this limit will vary depending on your image.

I was able to make this work by following these steps.

  • I have limited the width of the image to the width of the view.

  • I added an AspectRatio image constraint. This sets the width to height ratio, and since I specified the width of the image, the height will now be fully specified. I was hoping I could update this limitation in code when I upload a new image (because different images have different aspect ratios), but I could only change constant

    from code, not multiplier

    . So to get around this I made this Placeholder constraint by checking the Placeholder in the Attributes inspector. This means that this limitation will be removed at build time.

  • In the code, when I set the image for the imageView, I add a constraint that sets the width of the image as a heightView with a multiplier. This replaces the aspect ratio limitation that was set in Interface Builder.

    First, add @IBOutlet

    for your image and properties for your view controller to keep track of the constraint:

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

    Then add a new image:

    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!)

    When it's time to change the image, remove the previous aspectRatio constraint before adding a new one:

    imageView.removeConstraint(aspectRatio!)


I have implemented something similar to your layout. My project has a button instead of your label, but otherwise it is similar. When the user clicks a button, my app replaces the image with one with a completely different aspect ratio. Here is the document outline and all the constraints from my project.



enter image description here

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
+1


source






More articles:


All Articles