Image not resizing properly to fit the screen - ios

Im currently stylizing my login screen of my app, but I am running into a problem that i can't solve and is very odd... The image is not resizing properly and kind of starts to repeat itself, which i find very weird because i have the correct image sizes and have them correctly named, and i am calling them in my code correctly too, so i cannot find my problem. Below is the code.
self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"sl_login_default"]];

colorWithPattern is meant to create a pattern out of an image. If you want to have an image in the background, create a new UIImageView
UIImageView *backgroundImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:imageName];
backgroundImageView.frame = self.view.bounds;
[self.view addSubview:backgroundImageView];

Related

Parse Background image in loginView, not fitting to fit all iPhone device screen sizes

I am trying to get my background image to fit all screen sizes within Parse's logInView. Unfortunately this code isn't doing the trick I expect it to.
[self.logInView setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:#"Backgroundwithlogo.png"]]];
I have subclassed the PFLoginViewController to what I just called LoginViewController. I have tried resizing the image that i imported, but it either adjusts itself to be too big, or too small. The colorWithPatternImage will tile my image across the view if it's too small, and my background image seems to be stretched horizontally right now.
What I have tried:
I have tried implementing:
UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"Backgroundwithlogo.png"]];
[self.logInView addSubview:imgView];
[self.logInView sendSubviewToBack:imgView];
imgView.contentMode = UIViewContentModeScaleAspectFit;`
with no avail. I have read the Parse Guidelines Here. But they don't cover this issue with sizing problems inside the UI. Any help would be greatly appreciated.
UIImageView *imgView = [[UIImageView alloc] initWithFrame:[UIScreen mainScreen].bounds];
imgView.image = [UIImage imageNamed:#"Backgroundwithlogo.png"];
[self.logInView addSubview:imgView];
[self.logInView sendSubviewToBack:imgView];
Also, you may need a specific contentMode.

iOS app - Apply background image object to UIView

Can anyone help me understand how I apply a background image object to a UIView please?
I have created a background image which is a blurred version of a background and I would like to apply it to be the background of a uiView in the foreground which would ideally mask the background image.
I have the following code so far -
_blurImage = [source stackBlur:50];
[_HPBlurView.backgroundColor = [UIColor colorWithPatternImage:[_blurImage]]];
I would like to apply the image object(_blurImage) to be the background image of _hpBlurView but i'm struggling to get it working!
At first glance, you are using too many brackets. Here is a working version of your code :
_burImage = [source stackBlur:50];
_HPBlurImage.backgroundColor = [UIColor colorWithPatternImage:_blurImage];
I can't see what stackBlur:50 returns. So start from the beginning. colorWithPatternImag takes UIImage as a parameter. So Start by adding a picture, any picture, to your application. Lets imagine that the image is called image.png. This is one way to do it:
UIImage *image = [UIImage imageNamed:#"image.png"];
_HPBlurView.backgroundColor = [UIColor colorWithPatternImage:image];
This should help to get you going.
Create an image and add to the background.:
UIImage *image = [UIImage imageNamed:#"youimage"];
self.view.backgroundColor = [UIColor colorWithPatternImage:image];
It's that.
To make sure everything resizes properly, no matter rotation, device size and iOS version, I just set an UIImageView
//Create UIImageView
UIImageView *backgroundImageView = [[UIImageView alloc] initWithFrame:self.view.frame]; //or in your case you should use your _blurView
backgroundImageView.image = [UIImage imageNamed:#"image.png"];
//set it as a subview
[self.view addSubview:backgoundImageView]; //in your case, again, use _blurView
//just in case
[self.view sendSubviewToBack:backgroundImageView];

How to add large background image on the UIView in a full size?

I have a high resolution image and I want to use it as a background for a view. But when I add it either via an Interface Builder or programatically I see only its part.This doesn't help:
UIImage* _backGround = [UIImage imageNamed:#"background-clean#2x.png"];
CGRect _viewFrame = self.view.frame;
[_backGround drawInRect:_viewFrame];
UIImageView* _backGroundView = [[UIImageView alloc] initWithImage:_backGround];
[self.view addSubview:_backGroundView];
[self.view sendSubviewToBack:_backGroundView];
And this too:
_backGroundView.contentMode =UIViewContentModeScaleAspectFit;
So the question how can I scale this image in order it fits in the view in a full size in spite of its size?
P.S. Sorry for my bad English.
I agree with Ali, when creating retina-sized images you should also scale them and add their smaller version to your project. With both versions you can simply specify the full name of the image without the #2x.png or .png extension.
But, to fix your implementation you only need one extra line of code:
UIImage* _backGround = [UIImage imageNamed:#"background-clean"];
UIImageView* _backGroundView = [[UIImageView alloc] initWithImage:_backGround];
_backGroundView.frame = self.view.frame;
[self.view addSubview:_backGroundView];
[self.view sendSubviewToBack:_backGroundView];
Once you change the frame of the UIImageView, its contents (i.e. your image) will scale as well.
You must not include #2x in your code when referencing the name of the image!
You should:
Include both files Background.png and Background#2x.png in your Xcode projet resources, Background#2x.png being twice the size (in pixels) of Background.png
But always refer to this file (for example in imageNamed:) as #"Background.png" or even just #"Background": [UIImage imageNamed:#"Background"]
Then iOS will do its magic all by itself, choosing the right image between Background.png or Background#2x.png depending on if the device screen is Retina or not.
For more info see here in Apple documentation.
[self.view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:#"background-clean"]]];

Strange behaviour with UIImageView with camera pictures, all zoomed in

I have a strange behaviour which suggests I might just be missing something. I have the following code:
UIImage *anyImage = [UIImage imageWithContentsOfFile:path];
self.imageView = [[UIImageView alloc] initWithImage:newImage];
[self.imageView setImage:newImage];
self.imageView.center = self.view.center;
self.imageView.contentMode = UIViewContentModeScaleAspectFit;
self.imageView.userInteractionEnabled=YES;
self.imageView.clipsToBounds=YES;
[self.view addSubview:self.imageView];
When anyImage is a smaller size picture, downloaded from the internet, it displays correctly. However, when anyImage is a picture taken from my iPhone camera, it is zoomed-in and only shows a part of the picture enlarged, covering the entire window. I have tried different approaches to resize the imageView but it has no effect. So for example, a picture of a person might have the head or part of the body all zoomed in to cover the entire window and the rest of the body not shown. How can I resolve this problem?

Center [UIColor colorWithPatternImage]?

I couldn't find anything on how you can center the 'image' when you use (maybe you can't):
[self setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:#"background"]]];
Setting my [self setContentMode:UIContentModeCenter]; doesnt help.
Do I have to manually draw the image (either in drawRect or set the content of the CALayer? Which one if preferable?
I think you're on the wrong path here: you create a UIColor from a pattern (pattern already implies this is a repeating image). All in all- you can't have your pattern not repeat and centered.
If you just want simple image as background of your UIView, just add it as a subview and center it.
UIImage* img = [UIImage imageNamed:#"yourfile.png"];
UIImageView* imgView = [[UIImageView alloc]initWithImage: img];
[yourUIView addSubview: imgView];
imgView.center = CGPointMake(yourUIView.frame.size.width/2, yourUIView.frame.size.height/2);
Now - add more subviews to your "yourUIView" view and they'll show on top of the image - thus the image becoming the background.
So... no need to draw anything yourself.

Resources