I'm building an iphone app.
I have a tableview and i set a background image like so:
UIImageView * bg = [[UIImageView alloc] initWithImage:somebackgroundimage];
CGRect framebg = bg.frame;
framebg.origin.y = -64;
framebg.origin.x = 0;
framebg.size.width = 320;
framebg.size.height = 480;
[bg setFrame:framebg];
[_tblview setBackgroundView:bg];
no matter what framebg.size.width or framebg.size.height I set, the image always appears distorted or compressed with a size of maybe 320 width and 400 height. It is almost as if the app will forcefully resize the image to fit between the top navigation bar and my bottom tab bar.
How do I force tableview background image to be of 320px width by 480px height?
Also it seems the origin.y and origin.x aren't being respected either.
I know this question is a bit old, but I thought i would share what I was able to use to get around a similar issue (using setContentMode for the image view):
UIImageView *bg = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"background.png"]];
[bg setContentMode:UIViewContentModeScaleAspectFit];
self.tableView.backgroundView = bg;
Hope this helps.
Related
I have a UIImageView which is sized to 366 x 375 (confirmed by NSLog statement) and a UIImage which is is sized to 400 x 600 (again confirmed with a log statement). I have tried setting the contentMode to preserve the image's aspect ratio, but when I run my app, the image is always distorted.
I tried setting the UIView's content mode to both UIViewContentModeScaleAspectFit and UIViewContentModeScaleAspectFill in turn. In both cases, the photo is still distorted in the same way. I also tried, just for kicks, UIContentModeLeft, which also resulted in the same distort presentation. My understanding is that these 3 modes should have presented very different images.
I've done a ctrl-f through the view controller code, but there is only once occurrence of contentMode and it is where I am setting the property. Are there other properties I should look at that could be interfering?
Here is the code that sets up the image view and accompanying image. This is the only code in the whole project that refers to the image view. Also I am not using any sort of auto layout features, though I don't see why that should affect aspect ratio and content mode anyhow.
NSData *imageData = [NSData dataWithContentsOfURL:filePath];
self.imageView.contentMode = UIViewContentModeScaleAspectFit;
self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, self.height*.11, self.width, self.height*.55)];
self.imageView.image = [UIImage imageWithData:imageData];
NSLog(#"Image height and width are %f and %f", self.imageView.image.size.height, self.imageView.image.size.width);
NSLog(#"imageview height and width are %f and %f", self.imageView.frame.size.height, self.imageView.frame.size.width);
[self.view addSubview: self.imageView];
Why doesn't the contentMode affect how my image is displayed, and how can I fix this? Ultimately I want to use the scale aspect fill option so there is no empty space within the image view but so that the aspect is also preserved.
Try this
self.imageView.contentMode = UIViewContentModeScaleAspectFill
EDIT
self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, self.height*.11, self.width, self.height*.55)];
self.imageView.contentMode = UIViewContentModeScaleAspectFit;
self.imageView.image = [UIImage imageWithData:imageData];
NSLog(#"Image height and width are %f and %f", self.imageView.image.size.height, self.imageView.image.size.width);
NSLog(#"imageview height and width are %f and %f", self.imageView.frame.size.height, self.imageView.frame.size.width);
[self.view addSubview: self.imageView];
Set the content mode after u allocate the imageview
I am using the UIImageView in my xib. App is designed for multi device without auto layout. It means I am using autoresizing.What I want to do is, only my UIImageView should autoresize not my Image inside the UIImageView, but unfortunately my image also getting stretched with UIImageView. I have tried the different ways but could not get success. Changed the content mode also but didn't work for me.
Try this...
//set content mode
self.imageView.contentMode = UIViewContentModeScaleAspectFit;
//clear background color
self.imageView.backgroundColor=[UIColor clearColor];
UIViewContentMode
UIViewContentModeScaleToFill,
UIViewContentModeScaleAspectFit, // contents scaled to fit with fixed aspect. remainder is transparent
UIViewContentModeScaleAspectFill, // contents scaled to fill with fixed aspect. some portion of content may be clipped.
UIViewContentModeRedraw, // redraw on bounds change (calls -setNeedsDisplay)
UIViewContentModeCenter, // contents remain same size. positioned adjusted.
UIViewContentModeTop,
UIViewContentModeBottom,
UIViewContentModeLeft,
UIViewContentModeRight,
UIViewContentModeTopLeft,
UIViewContentModeTopRight,
UIViewContentModeBottomLeft,
UIViewContentModeBottomRight,
Don't add the UIImage to the UIImageView whose size is going to change. Add it to another UIImageView and make this second UIImageView a subview of the first UIImageView.
UIImage *exampleImage = [UIImage imageWithContentsOfFile:filePath];
UIImageView *variableImageView = [[UIImageView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
CGFloat imageX = (variableImageView.bounds.size.width - exampleImage.size.width) / 2;
CGFLoat imageY = (variableImageView.bounds.size.height - exampleImage.size.height) / 2;
UIImageView *helperImageView = [[UIImageView alloc] initWithFrame:CGRectMake(imageX, imageY, exampleImage.size.width, exampleImage.size.height)];
helperImageView.image = exampleImage;
helperImageView.contentMode = UIViewContentModeScaleAspectFit;
[self.view addSubview:variableImageView];
[variableImageView addSubview:helperImageView];
I hope this helps.
I have a small problem with a UIImageView, I try to place an image dynamically so I start like this
self.picture_view = UIImageView.alloc.initWithFrame (CGRectMake (0, 16,45, 46))
but I want to take my frame size of each image I passed him.
So I do like this.
picture_frame = picture_view.frame;
picture_frame.size = picture_view.size;
picture_view.frame = picture_frame;
but when I do this
NSLog (picture_frame.size.inspect)
it gives me 45, 46 for each image,
So how recovered the image size and frame overrider for me that shows the correct size
thank you in advance.
PS: I done well picture_view.image = UIImage.imageNamed (my_picture)
You are actually setting the ImageViews frame to the frame of itself. You need to be doing it based on the actual UIImage. You can do this automatically by initing the view with the image.
Ex.
UIImageView *pictureView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"whatever.png"]];
//The size is already set correctly, but if you want to change the x or y origin do like so
pictureView.frame = CGRectMake(0, 16, pictureView.frame.size.width, pictureView.frame.size.height);
Edit: This answer is written in Objective-C, but the core idea should translate to rubymotion very easily.
If you are trying to create a UIImageView and then resize it to fit the UIImage you assign to it, you should try something like this:
Create an imageView with an image:
UIImage *image = [UIImage imageNamed:#"myPicture.png"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
Change the image, and resize the imageView to fit:
UIImage *anotherImage = [UIImage imageNamed:#"anotherPicture.png"];
imageView.image = anotherImage;
CGRect imageViewFrame = imageView.frame;
imageViewFrame.size = anotherImage.size;
imageView.frame = imageViewFrame;
I set the image of a UIImageView to an image that is 1024x1024, and as a result a lot of the image is not visible, especially width wise, and cut off the edges of the screen.
I tried using clipsToBounds:
UIImageView *imageFromLink = [[UIImageView alloc] initWithImage:responseObject];
imageFromLink.clipsToBounds = YES;
[darkOverlayView addSubview:imageFromLink];
But it doesn't seem to do anything, and the image is still too big for the view.
You're going to want to change the contentMode property for the desired effect. UIViewContentModeScaleAspectFill is most likely what you'll want.
You have the set the image view's frame to the size you want. By default it will be the size of the image.
UIImageView *imageFromLink = [[UIImageView alloc] initWithImage:responseObject];
imageFromLink.contentMode = UIViewContentModeScaleAspectFit;
imageFromLink.frame = CGRectMake(0, 0, desiredWidth, desiredHeight);
[darkOverlayView addSubview:imageFromLink];
Also set the contentMode so the image is scaled properly in the smaller image view.
You should set the imageview's frame equal to the container's bounds.
UIImageView *imageFromLink = [[UIImageView alloc]initWithImage:responseObject];
imageFromLink.contentMode = UIViewContentModeScaleAspectFit;
imageFromLink.frame = darkOverlayView.bounds;
[darkOverlayView addSubview:imageFromLink];
I have an UIView that contains a UIImageView. The UIImageViews works like the branding logo of the app. When I rotate the device, the containing UIView resizes itself to correspond to the landscape or portrait proportions of the screen.
What I'm trying to achieve is to have the UIImageView scaled accordingly, keeping proportions also on the left margin.
This is the actual code for the top white "banner":
UIView *topBanner = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, height_topBanner)];
[topBanner setAutoresizingMask:(UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleBottomMargin)];
[topBanner setBackgroundColor:[UIColor whiteColor]];
topBanner.autoresizesSubviews = YES;
// the logo
UIImage *topBanner_logo = [UIImage imageNamed:#"logo.png"];
float logoAspectRatio = topBanner_logo.size.width/topBanner_logo.size.height;
topBanner_logoView = [[UIImageView alloc] initWithFrame:CGRectMake(topBanner.frame.size.width/100*3, topBanner.frame.size.height/100*7, (topBanner.frame.size.height/100*86)*logoAspectRatio, topBanner.frame.size.height/100*86)];
[topBanner_logoView setImage:topBanner_logo];
topBanner_logoView.backgroundColor = [UIColor blueColor];
topBanner_logoView.contentMode = UIViewContentModeScaleAspectFit;
[topBanner_logoView setAutoresizingMask:(UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleLeftMargin|UIViewAutoresizingFlexibleBottomMargin|UIViewAutoresizingFlexibleRightMargin)];
[topBanner addSubview:topBanner_logoView];
[self.view addSubview:topBanner];
This is my starting point: portrait iPad on startup:
This is what happens when I rotate it in landscape:
As you can see, the proportions of the UIImage are ok, but I'm getting extra borders (I set the background color of the UIImageView to highlight it) because the UIImageView stretches itself to follow the change of the size of its container, and the UIImage is fit into the UIImageView and put on its center.
The same - reversed - happens when I start the app directly in landscape mode:
Then I rotate it:
... and I get the logo with extra borders on top and bottom.
I do see that I can write a function to recalculate every size on each rotation change, but I'm asking to myself if is there a way to set the UIImageView and the UIImage to make it works without hacking the autorotate/resize procedures of iOS. It sounds so simple!
You can solve this by not using UIViewContentModeScaleAspectFit, and instead calculating the aspect ratio of the image and using that to explicitly the width or height based on the other (width or height).
e.g. I rotate to landscape, and so I want the height to be 80% of the view.
CGFloat w = logo.image.size.width;
CGFloat h = logo.image.size.height;
CGFloat a = w / h;
CGFloat h_use = self.view.height *0.8;
CGFloat w_use = h_use*a;
Furthermore, set the content mode to UIViewContentModeScaleAspectFill instead now that you've explicitly set the aspect ratio.
You have set the auto resizing mask to flexible height and width:
[topBanner_logoView setAutoresizingMask:(UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleLeftMargin|UIViewAutoresizingFlexibleBottomMargin|UIViewAutoresizingFlexibleRightMargin)];
If you do not do that, the default is that the view will not chance size, and therefore, the image will not either.
I think it is because of topBanner_logoView.contentMode = UIViewContentModeScaleAspectFit;
Try topBanner_logoView.contentMode = UIViewContentModeCenter or topBanner_logoView.contentMode = UIViewContentModeLeft to prevent the UIImageView's image from resizing (and getting padding).
If the UIImageView is resizing, remove the autoresizing mask.