So I have a button with a custom uiview that contain a uiimageview.
UIButton *myButton = [[UIButton alloc] init];
myButton.frame = CGRectMake(0, 0, 29, 29);
UIView *myView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 29, 29)];
UIImage *myImage = [UIImage imageNamed:#"sexy-pic-of-me"];
UIImageView *myImageView = [[UIImageView alloc] initWithImage:myImage];
myImageView.frame = CGRectMake(0,0,29,29);
[myView addSubview:myImageView];
[myButton addSubview:myView];
[self.view addSubview: myButton];
My image is blurry no matter how much in increase or decrease the size. What am i doing wrong here?
Try setting a content mode i.e.:
myImageView.contentMode = UIViewContentModeScaleAspectFit;
Read more about content modes:
https://developer.apple.com/library/ios/documentation/uikit/reference/UIView_Class/UIView/UIView.html#//apple_ref/c/tdef/UIViewContentMode
UIViewContentMode
Options to specify how a view adjusts its content when its size changes.
typedef enum {
UIViewContentModeScaleToFill,
UIViewContentModeScaleAspectFit,
UIViewContentModeScaleAspectFill,
UIViewContentModeRedraw,
UIViewContentModeCenter,
UIViewContentModeTop,
UIViewContentModeBottom,
UIViewContentModeLeft,
UIViewContentModeRight,
UIViewContentModeTopLeft,
UIViewContentModeTopRight,
UIViewContentModeBottomLeft,
UIViewContentModeBottomRight,
} UIViewContentMode;
The other folks have mentioned two of the possible causes of fuzziness
the image size doesn't match the frame size, resulting in scaling
the image aspect ratio is being adjusted due to the content mode
The third possible cause is the use of odd numbers in the frame. From my experience, if the center.x and/or center.y of a UIView is not a whole number, then fuzziness results. For example, if you set the frame as
someView.frame = CGRect( 100, 100, 29, 29 );
then things get fuzzy because the center point of said view will be CGPoint( 114.5, 114.5 ). This problem is mainly seen on the non-retina devices. Retina devices have two pixels per point, so half-a-point coordinates are ok, but other off-grid coordinates could still cause fuzziness.
Related
I have a UITextfield like so:
UITextfield *name = [[UITextField alloc] initWithFrame:CGRectMake(30, 210, 100, 34)];
name.borderStyle = UITextBorderStyleRoundedRect;
name.backgroundColor = [UIColor whiteColor];
name.font = [UIFont systemFontOfSize:12];
name.leftView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"icon.png"]];
If I have the following UITextfield setup, how many points is the UIImage suppossed to be? Is it 34 by 34 or a little smaller? I know, if it's 34 points by 34 points I will have to make .pngs 34x34, 68x68 and 92x92 for x, 2x, and 3x pixel displays.
From the documentation:
The left overlay view is placed in the rectangle returned by the
leftViewRectForBounds: method of the receiver. The image associated
with this property should fit the given rectangle. If it does not fit,
it is scaled to fit. If you specify a control for your view, the
control tracks and sends actions as usual.
It means that you can change size of leftView.
On iOS 8.3 "leftViewRectForBounds:" value is based on the size of the leftView. If I use the leftView with size: 300x300 then the frame will be (0, -125, 300, 300). If I use the view with size 30x30, then the frame will be (0, 10, 30, 30).
A frame of my textField is (0.0, 0.0, 300.0, 50.0).
[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"icon.png"]];
It's frame will be x=0, y=0, width = width of the image, height = height of the image
You can set any image of any resolution according to your requirement. Please also add the following line before the last line of your code for the image to be visible.
[name setLeftViewMode:UITextFieldViewModeAlways];
Say, I have a UIImageView or any object and I set it in a UIView as subView with CGRectMake like this:
UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 30)];
UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(266, 0, 30, 30)];
[imgView setImage:[UIImage imageNamed:[self.imageDicKey objectAtIndex:section]]];
[headerView addSubview:imgView];
Here I set the position of my imgView like CGRectMake(266, 0, 30, 30)]; and it counts it's position form the left x position (which is 266). What If I want to set my imgView's position from right side of the screen? So that,in different width of iPhone screen it shows in a same ratio position. But which will be counted it's position from right edge.
Thanks a lot in advanced.
I would recommend not hard coding the exact positions and instead calculating the x and y. That way it will help for different sized screens so it's not an exact position and rather it's based upon the views' size.
UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 30)];
CGFloat padding = 20; // amount for padding
CGSize size = CGSizeMake(30, 30); // size of imageView
CGPoint startPos = CGPointMake(headerView.frame.size.width - padding - size.width, 0); // starting position for imageView
UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(startPos.x, startPos.y, size.width, size.height)]; [imgView setImage:[UIImage imageNamed:[self.imageDicKey objectAtIndex:section]]]; [headerView addSubview:imgView];
Well, since the ImageView's width is 30 and the x coordinate is 266 from the left side, it makes the x coordinate from the right side 296.
I have an image inside of an iOS UIScrollView that only takes up about 1/3rd of the total screen space. The image is too large, so the scrollView is allowing panning around the image. I want the image to be small enough so that there is no panning necessary to see the entire image. How do I resize the image to make it fit inside of the scroll view?
This is the code I am using to set up the image view and the scroll view.
UIImage *image = [UIImage imageNamed:#"banner.png"];
self.imageView = [[UIImageView alloc] initWithImage:image];
self.imageView.frame = (CGRect){.origin=CGPointMake(0.0f, 0.0f), .size=image.size};
[self.scrollView addSubview:self.imageView];
self.scrollView.contentSize = image.size;
You need to set the ImageView's size equal to the scrollView's size. And set the imageView's content mode to scale to fill
Eg:
UIImage *image = [UIImage imageNamed:#"banner.png"];
self.imageView = [[UIImageView alloc] initWithImage:image]
self.imageView.frame = CGRectMake (0,0,self.scrollView.frame.size.width,self.scrollView.frame.size.height);
self.imageView.contentMode = UIViewContentModeScaleToFill;
[self.scrollView addSubview:self.imageView];
self.scrollView.contentSize = self.imageView.frame.size;
self.scrollView.bounces = NO;
You can't not make the frame of imageView as the size of image(since image is too large). Set the frame of imageview as you desired and set image contentmode.
You should probably need to pick right image content mode
self.imageView.contentMode = (Pick right content mode you need)
typedef NS_ENUM(NSInteger, 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,
};
I have a view that is set up nicely using autolayout. The view contains a series of labels stacked from top to bottom. I am allowing the intrinsic size of these labels to determine the size of the view.
The final step is to add a background from an image. I started by trying the colorWithPatternImage method on UIColor but this isn't quite what I am looking for. I do not want to tile the image, and I can not guarantee it will always be larger than the intrinsic size of the view.
Similarly, adding a uiImageView to the view itself doesn't quite work. The view will expand to accommodate the image when I want to keep the intrinsic size based on the labels.
I guess what I am looking for is the following.
1) The background should have no effect on the size of the view.
2) The image should be scaled to fill the view but in it's original aspect ration (so cropping edges if necessary).
Any ideas appreciated.
In my case, I needed it for a UIImageView inside a dynamically-sized view in a UITableViewCell, but the image refused to shrink below its instristic size and instead worked as a minimum-size constraint for the superview. The only way I could get it ignore the intristic size is by lowering the priority at which it is enforced, right after creating the cell:
[imageView setContentCompressionResistancePriority:UILayoutPriorityDefaultLow
forAxis:UILayoutConstraintAxisHorizontal];
[imageView setContentCompressionResistancePriority:UILayoutPriorityDefaultLow
forAxis:UILayoutConstraintAxisVertical];
After this, all my constraints magically started working. In the OP's case, setting UIViewContentModeScaleAspectFill is also required, as per Mundi's answer.
In Interface Builder, add a UIImageView as the first subview to the view. Make sure its size always matches the view.
Then, in Interface Builder or code, set the contentMode:
backgroundImageView.contentMode = UIViewContentModeScaleAspectFill;
Here's how I would approach this. Hopefully it helps. :)
CGRect contentFrame = CGRectMake(0, 0, self.view.frame.size.width, 0); // This will be the frame used to create the background image view.
UIEdgeInsets contentInsets = UIEdgeInsetsMake(20, 20, 20, 20); // The margins by which the labels will be inset from the edge of their parent view.
CGFloat labelHeight = 21;
CGFloat verticalGap = 8; // The vertical space between labels
CGFloat y = contentInsets.top;
int numberOfLabels = 10;
for (int i = 0; i < numberOfLabels; i++) {
CGRect frame = CGRectMake(contentInsets.left, y, self.view.frame.size.width - (contentInsets.left + contentInsets.right), labelHeight);
UILabel *label = [[[UILabel alloc] initWithFrame: frame] autorelease];
// customize the label here
[self.view addSubview: label];
contentFrame = CGRectUnion(contentFrame, label.frame);
y += labelHeight + verticalGap;
}
contentFrame.size.height += contentInsets.bottom;
UIImageView *backgroundImageView = [[[UIImageView alloc] initWithFrame: contentFrame] autorelease];
[backgroundImageView setClipsToBounds: YES];
[backgroundImageView setContentMode: UIViewContentModeScaleAspectFill];
[backgroundImageView setImage: [UIImage imageNamed: #"background_image.png"]];
[self.view insertSubview: backgroundImageView atIndex: 0];
I have the following code to create a scroll view with additional area at the beginning and the end of the images (50 points).
UIScrollView* scroll = [[UIScrollView alloc] initWithFrame: CGRectMake(0,0,200,100)];
scroll.contentSize = CGSizeMake(400,100);
UIImageView* img1 = [[UIImageView alloc] initWithFrame: CGRectMake(50,0,100,100);
UIImageView* img2 = [[UIImageView alloc] initWithFrame: CGRectMake(150,0,100,100);
UIImageView* img3 = [[UIImageView alloc] initWithFrame: CGRectMake(250,0,100,100);
//Adding images to ImageViews
scroll.pagingEnabled = YES;
[scroll addSubView:img1];
[scroll addSubView:img2];
[scroll addSubView:img3];
The first time I see the view, I will see the additional area on the left (0-50), then the first image (50-150) and then half of the second image (150-200).
When I swipe left, I want to see half of the first image on the right, the second image at the center, and half of the third image on the right.
When I swipe left again, I want to see the third image at center, with half of the second image on the left, and the additional area on the right.
Can it be possible?
It's possible as long as you define everything correctly. Make sure that the assigned content size is equal to the overall size that you wish to scroll through. Make sure that each page size is equal to the scroll view's frame. You can set the clipsToBounds to NO if the frame clips your subviews.
You can do this by adjusting the contentSize of UIScrollView
- (void)addImagesToScrollView{
//An offset from where imageViewStarts
CGFloat xOffset = 50.0f;
CGRect imageViewFrame = CGRectMake(xOffset, 0.0f, 100.0f, 100.0f);
for (NSString *imageName in #[#"image1.jpg",#"image2.jpg",#"image3.jpg"])
{
UIImageView *imageView = [[UIImageView alloc]initWithFrame:imageViewFrame];
UIImage *image = [UIImage imageNamed:imageName];
imageView.image = image;
[self.scrollView addSubview:imageView];
imageViewFrame.origin.x+=imageViewFrame.size.width;
}
CGSize contentSize = self.scrollView.frame.size;
//Content size is calculate from the imageViewFrame and an offset is added to it
contentSize.width = imageViewFrame.origin.x+xOffset;
[self.scrollView setContentSize:contentSize];
}
Source Code
You can scroll to a particular place in the scrollview using the following code
[YOURSCROLLVIEW setContentOffset:CGPointMake(x, y) animated:YES];