How do I alter the position of a UIImage inside a UIImageView

Question

I have a UIImage called image I want to change the position of it inside the imageView so it can be dragged down slightly, roughly 30px. Can some one tell me how to do it? This is where I am up to but its not coming out correct.

var image = UIImage()
var imageView = UIImageView(frame: CGRectMake(0, 0, view.frame.size.height * 0.22, view.frame.size.height * 0.22))
        imageView.center = CGPointMake(self.view.center.x, view.frame.size.height * 0.414)
        imageView.image = self.image
            imageView.layer.cornerRadius = imageView.frame.size.width / 2
            imageView.layer.borderWidth = 2.0
            imageView.layer.borderColor = UIColor(red: 254.0/255, green: 216.0/255, blue: 0/255, alpha: 1.0).CGColor
            imageView.clipsToBounds = true
            imageView.layer.contentsRect = CGRectMake(0, 20, imageView.frame.size.width, imageView.frame.size.height) //This is where I have being trying to do it but no success.
        imageView.contentMode = .ScaleAspectFill
        view.addSubview(imageView)

Answer 1

Short answer: You don't.

What you would do is add the image view as a subview of another view. The trivial way to do this would be to put the image view in a scroll view, constrained so that the only place it can scroll is down, and only slightly. Then you could achieve the scrolling with zero code.

EDIT:

This isn't really a coding problem - it's more of an Interface Builder problem. You need to set up a scroll view. A scroll view is a view that lets you look at a portion of a larger view.

You can think of a scroll view like a piece of paper with a rectangular hole in it. You put a bigger piece of paper under it (The scroll view's content view) and you can slide the bigger piece of paper around and view different parts of it through the hole.

Here's how you would set it up.

Drag a scroll view onto your view controller. Size it and add constraints to it to position it where you want. If you want your image view to be 300x300 points in size, for example, and want to be able to drag it up or down by 20 points, then make the scroll view 20 points taller. (w: 300, h: 320)

Select the view inside the scrollview and set it's width to the same width as it's scrollview, but 20 points taller than the scroll view. (w: 300, h: 340). Add constraints to lock it's height and width.

Now you have a scroll view that's big enough for a 300x300 point image, with 20 points of total white space at the top and bottom.

You've created a content view that's 20 points bigger than that, so it can slide up or down by 20 points in the scroll view.

Drag your 300x300 point image view into the view inside the scroll view, assign an image to it, and add constraints to lock it's size and center it horizontally and vertically in it's superview.

The final step is to set the content size of the scroll view. Normally you just set a scroll view's content size to the size of it's content view. You can do that by adding this bit of code to your view controller's viewDidLoad:

(Assuming you've connected an outlet to your scrollview that's called theScrollView)

//Get the first (and only) subview of the scrollView.
let subview = theScrollView.subviews[0] as! UIView;

//Make the scroll view's contentSize the same size as the content view.
theScrollView!.contentSize = subview.bounds.size;

It's also possible to set the content size of the scroll view without any code at all. You'd use a feature of IB (Interface Builder) called "User Defined Runtime Attributes". Here's how you'd do that: (If you use this approach don't add the code above to viewDidLoad)

Select the scroll view in IB. Press command-option 3 to select the "identity inspector". In the section headed "User Defined Runtime Attributes", tap the plus sign on the left. Edit the Key Path to "contentSize" (all lower case except the "S" in "Size". That's very important.) Press enter to change the key path. Then tap on the "type" column and select "size". The value field will show "{0,0}". Enter your desired content size: ("{300,340}" in the example above.)

What this does is tell IB "At runtime, look for a property called "contentSize" in the selected object (the scroll view.) Set that property to the specified value of type CGSize.

Once you're done your IB "identity inspector" should look like this:

Note that if you get a key name wrong when using "User Defined Runtime Attributes" then the app crashes when you display that view controller, with a very cryptic message.

By default scrollviews let you "overshoot" when dragging their contents around, and then bounce back into place when you let go. You can turn that feature off by unchecking the "Bounce" checkbox in the IB "Attributes Inspector" (command option 4)