Is it possible to set the position of an UIImageView's image?

Question

I have a UIImageView that displays a bigger image. It appears to be centered, but I would like to move that image inside that UIImageView. I looked at the MoveMe sample from Apple, but I couldn't figure out how they do it. It seems that they don't even have an UIImageView for that. Any ideas?

Burge

Answer 1

Original Answer has been superseded by CoreAnimation in iOS4.

So as Gold Thumb says: you can do this by accessing the UIView's CALayer. Specifically its contentRect:

From the Apple Docs: The rectangle, in the unit coordinate space, that defines the portion of the layer’s contents that should be used. Animatable.

Defeat

Wrong. See @GoldThumb's answer. – Slotter

Right at the time of posting (2009!) I have updated the answer to point to CALayer – Defeat

Answer 2

What you need is something like (e.g. showing the 30% by 30% of the top left corner of the original image):

imageView.layer.contentsRect = CGRectMake(0.0, 0.0, 0.3, 0.3);

Description of "contentsRect": The rectangle, in the unit coordinate space, that defines the portion of the layer’s contents that should be used.

Reo

Why the downvote? This works perfectly if you set the imageView's contentMode to UIViewContentModeScaleAspectFill. Be sure to also enable clipsToBounds. – Slotter

Answer 3

Do you want to display the image so that it is contained within the UIImageView? In that case just change the contectMode of UIImageView to UIViewContentModeScaleToFill (if aspect ratio is inconsequential) or UIViewContentModeScaleAspectFit (if you want to maintain the aspect ratio)

In IB, this can be done by setting the Mode in Inspector.

In code, it can be done as

yourImageView.contentMode = UIViewContentModeScaleToFill;

In case you want to display the large image as is inside a UIImageView, the best and easiest way to do this would be to have the image view inside a UIScrollView. That ways you will be able to zoom in and out in the image and also move it around.

Hope that helps.

Forcier

Answer 4

It doesn't sound like the MoveMe sample does anything like what you want. The PlacardView in it is the same size as the image used. The only size change done to it is a view transform, which doesn't effect the viewport of the image. As I understand it, you have a large picture, and want to show a small viewport into it. There isn't a simple class method to do this, but there is a function that you can use to get the desired results: CGImageCreateWithImageInRect(CGImageRef, CGRect) will help you out.

Here's a short example using it:

CGImageRef imageRef = CGImageCreateWithImageInRect([largeImage CGImage], cropRect);
[UIImageView setImage:[UIImage imageWithCGImage:imageRef]];
CGImageRelease(imageRef);

Sardius

Answer 5

Thanks a lot. I have found a pretty simple solution that looks like this:

CGRect frameRect = myImage.frame;
CGPoint rectPoint = frameRect.origin;
CGFloat newXPos = rectPoint.x - 0.5f;
myImage.frame = CGRectMake(newXPos, 0.0f, myImage.frame.size.width, myImage.frame.size.height);

I just move the frame around. It happens that portions of that frame go out of the iPhone's view port, but I hope that this won't matter much. There is a mask over it, so it doesn't look weird. The user doesn't totice how it's done.

Burge

Answer 6

You can accomplish the same by:

UIImageView *imgVw=[[UIImageView alloc]initwithFrame:CGRectMake(x,y,height,width)];     
imgVw.image=[UIImage imageNamed:@""];
[self.view addSubView imgVw];
imgVw.contentMode = UIViewContentModeScaleToFill;

Nester

Answer 7

You can use NSLayoutConstraint to set the position of UIImageView , it can be relative to other elements or with respect to the frame. Here's an example snippet:

let logo = UIImage(imageLiteralResourceName: "img")
        let logoImage = UIImageView(image: logo)
        logoImage.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(logoImage)
        NSLayoutConstraint.activate([logoImage.topAnchor.constraint(equalTo: view.topAnchor,constant: 30),
                                     logoImage.centerXAnchor.constraint(equalTo: view.centerXAnchor),logoImage.widthAnchor.constraint(equalToConstant: 100),logoImage.heightAnchor.constraint(equalToConstant: 100)
                                     ])

This way you can also resize the image easily. The constant parameter represents, how far should a certain anchor be positioned relative to the specified anchor.
Consider this,
logoImage.topAnchor.constraint(equalTo: view.topAnchor,constant: 30) The above line is setting the top anchor of the instance logoImage to be 30 (constant) below the parent view. A negative value would mean opposite direction.

Cachexia