I am having issues getting an image to scale properly to my UITableCell. I have a large copy of the image and want to scale by a variable height cell. It is a square image that is x by x.
UIImageView *pw = [[UIImageView alloc] initWithImage:img];
[pw setImage:img];
pw.contentMode = UIViewContentModeScaleAspectFill;
pw.frame = CGRectMake(cell.frame.size.width - img.size.width, cell.frame.origin.y,
?, cell.frame.size.height);
[cell.contentView addSubview:pw];
The issue is I am not sure what value to put for the ? parameter (the image width) since it can scale depending on the height of the cell its in.
If the width of your image depends on the height of the cell you could make it proportional to it. For example,
If the width is the same as the height, make "?" equal to cell.frame.size.height
If the width is 2X the height, make "?" equal to cell.frame.size.height * 2
If the width is half the height, make "?" equal to cell.frame.size.height/2
etc...
Hope this helps!
If it should be a square, put the same in the x direction as the y direction:
CGRectMake(cell.frame.size.width - img.size.width,
cell.frame.origin.y,
cell.frame.size.height,
cell.frame.size.height);
If you use Auto Layout it is easy to do this with height and width constraints on the image view.
One of them is equal to the other one.
Adjust the constant of the other one.
Set needsLayout. Maybe animate.
Related
I added a custom UIImageView to a storyboard and got the following dimensions:
I tried using CGRectMake(170, 115, 260, 200) in my code to crop an image but didn't get the same dimensions as the UIImageView, but a size considerably smaller than that used in the storyboard. How can I get the exact dimensions for a CGRect?
I think you are confused between what things look like in storyboard vs on the device. The storyboard only is a representation of a set of rules that will dictate how things will appear on actual devises.
If you want the UIImageView to be the same size on all devises you need to set constraints for height and width
If you want the same ratio to prevent your image from distorting you need to set ratio constraints
You should read this: ray auto layout tutorial
In case this does not help, this is how you get the size of a CGRect:
CGRect myFrame = [YOUR_VIEW frame];
NSLog(#"height = %f", myFrame.size.height);
NSLog(#"width = %f", myFrame.size.width);
NSLog(#"x = %f", myFrame.origin.x);
NSLog(#"y = %f", myFrame.origin.y);
I have a question in my app I have a number label (IBOutlet). And when I write self.numberLabel.backgroundColor = [UIColor redColor]; is showing a red color fit in the height of number, All I want is to make the background a little bit bigger. Thanks
self.numberLabel.frame = CGRectMake(self.numberLabel.frame.origin.x, self.numberLabel.frame.origin.y, widht, newHeight);
and to make sure font stay same size if needed
[self.numberLabel setFont:[UIFont systemFontOfSize:35]];
You have to set constraints in Interface Builder / Storyboard to fix your label height/width.
If your label's content changes in width, you can use this to calculate a new width with a bit of space left:
float labelWidth =
[self.myLabel.text
boundingRectWithSize:self.myLabel.frame.size
options:NSStringDrawingUsesLineFragmentOrigin
attributes:#{ NSFontAttributeName:self.myLabel.font }
context:nil]
.size.width;
CGRect rect = self.myLabel.bounds;
rect.size.width = labelWidth + 15.0f; //replace 15.0F with the value you want
[self.myLabel setBounds:rect];
There're many ways to skin a cat... in my case the content of the "uilabel" determines its size. I just want the background to be slightly bigger -- 5 points vertically, 7 points horizontally. So I use autolayout to solve it.
Add a uilabel as a subview to the background which is a uiview
Add constraints in IB between the uilabel and the uiview
Add constraints in IB between the uiview and its superview
I have a view where I need to place an UIImageView, and I was told to place it inside a rectangle that takes the screen width and its height is smaller than width (fixed size). However, the images I've been given are more or less square jpeg images, so the idea is to fill the width of the rectangle that should contain the image and set the height of the image in a way that its aspect ratio is kept. Then, I should be able to let the user scroll the image vertically to see the complete image.
How could I do this?
Thanks in advance
EDIT: I need to do this for several images that have different sizes, but that should fit the same rectangular area size within the view
You can set imageview content mode.
imageView.contentMode = UIViewContentModeScaleAspectFit;
This will make sure that the image is displayed by keeping original aspect ratio.
Edit:
I think this is what you wanted:
UIImage *originalImage = [UIImage imageNamed:[picArr objectAtIndex:a]];
double width = originalImage.size.width;
double height = originalImage.size.height;
double apect = width/height;
double nHeight = 320.f/ apect;
self.img.frame = CGRectMake(0, 0, 320, nHeight);
self.img.center = self.view.center;
self.img.image = originalImage;
Hope this helps.. :)
I have a UIImageView set up which will display an image determined by what the user selected in the previous table view.
This is how I am currently displaying my images:
if ([_TitleLabel.text isEqualToString:#"Dog"]) {
UIImage *image = [UIImage imageNamed:#"Dog.png"];
[imageView setImage:image];
}
Subsequent if statements follow displaying the different images for a different animal.
These images need to be of a different height, and I need to keep their proportionality. The width of all the images is 320 pts. The heights vary from anywhere between 1000pts to 2500pts. All images are located locally in the project. I want the height of the UIImageView to change to the height of image which corresponds to the animal selected by the user. Any ideas?
You can update the imageView's frame width and height using UIImage's width and height, like this:
if ([_TitleLabel.text isEqualToString:#"Dog"]) {
UIImage *image = [UIImage imageNamed:#"Dog.png"];
[imageView setImage:image];
// update image view frame width and height.
imageView.frame = CGRectMake(imageView.frame.origin.x, imageView.frame.origin.y, image.size.width, image.size.height);
}
Note:
Using UIViewContentModeScaleAspectFit will leave space between your image and the UIImageView boundary if the image is different aspect ratio to your UIImageView frame, which isn't likely what you want.
Nor will UIViewContentModeScaleAspectFill help, your image will become truncated within the frame of your imageView.
imageView.contentMode = UIViewContentModeCenter;
if (imageView.bounds.size.width > ((UIImage*)imagesArray[i]).size.width && imageView.bounds.size.height > ((UIImage*)imagesArray[i]).size.height) {
imageView.contentMode = UIViewContentModeScaleAspectFit;
}
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.