如何在不拉伸的情况下将背景图像居中放置在UIView中

Question

I want to centre the background image in my UIView . The background image is smaller than the UIView itself, and I do not want to stretch it, ie I want it to have its original size. I wrote the following code

UIImage *backgroundImage=[[UIImage alloc] initWithContentsOfFile:@"analog_display_bgr.png"];

CGSize backgroundImageSize= CGSizeMake (backgroundImage.size.width,backgroundImage.size.height);
UIGraphicsBeginImageContext(backgroundImageSize);//self.frame.size
CGRect backgroundImagePosition = CGRectMake(self.bounds.origin.x+m_center.x-backgroundImage.size.width/2.0, self.bounds.origin.y+m_center.y-backgroundImage.size.height/2.0, backgroundImage.size.width, backgroundImage.size.height);
[[UIImage imageNamed:@"analog_display_bgr.png"] drawInRect:backgroundImagePosition];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

self.backgroundColor = [[UIColor alloc] initWithPatternImage:image];

I should do the job but does not work.

Any idea what is wrong? Thanks in advance.

Answer 1

I'm still not able to replicate the stretching effect you're talking about, but I believe most of your problem lies in this line UIGraphicsBeginImageContext(backgroundImageSize); . What you want is for the new image to be the size of your view, not the size it already is. Anyway, this code works for me. Let me know if it works for you as well.

UIImage *backgroundImage = [UIImage imageNamed:@"analog_display_bgr.png"];

UIGraphicsBeginImageContext(self.bounds.size);

CGRect imagePosition = CGRectMake((self.bounds.size.width / 2)  - (backgroundImage.size.width / 2),
                                  (self.bounds.size.height / 2) - (backgroundImage.size.height / 2),
                                  backgroundImage.size.width,
                                  backgroundImage.size.height);

[backgroundImage drawInRect:imagePosition];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

self.backgroundColor = [[UIColor alloc] initWithPatternImage:image];

Answer 2

I tried your code, and I don't get anything at all. Completely blank view. The way I would do what you're describing is like this:

UIImage *backgroundImage = [UIImage imageNamed:@"analog_display_bgr.png"];
UIImageView *imageView = [[UIImageView alloc]initWithImage:backgroundImage];
CGRect imageViewFrame = imageView.frame;
imageViewFrame.origin.x = (self.bounds.size.width / 2) - (imageView.bounds.size.width / 2);
imageViewFrame.origin.y = (self.bounds.size.height / 2) - (imageView.bounds.size.height / 2);
[imageView setFrame:imageViewFrame];
[self addSubview:imageView];

I tried it out in - (void)awakeFromNib in a UIView subclass and it works fine. Draws the image in the center of the view without stretching it.

If I understand you correctly you want the image to be the background of the view, so behind everything else. The code I provided above will do that, assuming you add the UIImageView behind all the other views. If you still want the image to be drawn as the backgroundColor, like me know and I'll see if I can make it work.

Answer 3

Sorry for posting yet another answer, but I was not able to add images to a comment, and I want to make sure I completely understand what you want.

So, from what I understand, this is what your code does

This is what my code does:

But what you want is something more like this:

Is that correct? If yes, which one? The one to the left or to the right?

Answer 4

You can add UIImageView to your UIView and set the image to it. You can also play with UIViewContentMode property, maybe UIViewContentModeCenter or UIViewContentModeScaleAspectFill with clipToBounds = YES :)