I'm new to iOS Development, I'm using a UIImageView to display an image. I've made a 320x480 and a 640x960 image called "red.png" and "red#2x.png".
No matter how I scale or align the UIImageView, the image always chops off half way at the top.
Is there something I'm meant to do to combat this, as I thought those resolutions were correct?
The UIImageView is sized at 320x568 to fill the storyboard.
Thanks :)
My comment above is hard to read, and it's probably an answer:
myImageView.contentMode = UIViewContentModeScaleAspectFit;
Try changing to image name as follows:
self.colourImage.image = [UIImage imageNamed: #"red.png"];
You should not directly specify '#2x' in image names.
It is automatically used if a device supports retina display.
That is why you need to create 2 sets of images; one for non-retina and one for retina (using #2x) and the OS selects the correct one for you.
Related
I am just confused about the image sizes that I need to use for buttons, image views etc.
I want to adjust images for all iphones.
What should be ratio between the screen height/width and different iphones.
Like i have a button. I have created in following way-
UIButton *takePicButton = [UIButton buttonWithType:UIButtonTypeCustom];
takePicButton.frame = CGRectMake(0, SCREEN_HEIGHT-UI_ITEM_HEIGHT, SCREEN_WIDTH, UI_ITEM_HEIGHT);
[takePicButton setBackgroundImage:[UIImage imageNamed:#"take_photo.png"] forState:UIControlStateNormal];
[self.view addSubview:takePicButton];
[takePicButton addTarget:self action:#selector(takePicture:) forControlEvents:UIControlEventTouchUpInside];
for this button what size of images I need to add on xcode to support iPhone 4 - iPhone 7.
Thanks in advance.
Here is description about how image can set in iPhone:
• 1x images are for the original iPhone through the 3GS - 'standard' resolution devices (3.5" screens)
• 2x images are for the iPhone 4 and 4S (3.5" Retina screens) and are also used for the iPhone 5, 5s,6,6s,7
• 3x images are for the new iPhone 6+,7+ (5.5" super-Retina [3x] screen)
You have to keep three different types of image into your Assets.xcassets and just provide image name at where you want to display it. It will automatically take relevant image and display it.
You can check attached screenshots. You just have to write “bgImag” and it will take relevant image from assist.
About image ration, just create image for highest resolution of iPhone (i.e iPhone 6+), and just use iConify to get rest of image assest.
Try this, u can ask for two sizes. One is SCREEN_WIDTH * 2, UI_ITEM_HEIGHT * 2, the other is SCREEN_WIDTH * 3, UI_ITEM_HEIGHT * 3.Then put two sizes pics in your Images.xcassets named xxx#2x, xxx#3x.
I want to adjust images for all iPhones.
The easy way to do that is to use layout constraints. Your code tries to do what the constraints system would, given an appropriate set of constraints, but it's less flexible because it doesn't provide for changing geometry such as when the user rotates the device.
What should be ratio between the screen height/width and different iphones[?]
Different devices have different aspect ratios. There are lots of web sites (like this one) that list the screen sizes. When possible, though, it's best not to make any assumptions about screen size. New devices may be introduced with different aspect ratios, and even a single device may appear to have different screen sizes depending on how the user chooses to use it -- things like rotation and split screen affect the size and shape of the screen real estate that your device gets to use.
for this button what size of images I need to add on xcode to support iPhone 4 - iPhone 7[?]
We can't say without knowing what your UI_ITEM_HEIGHT constant is or what relative proportions you want for your button, but you should be able to calculate that yourself if you know the various screen sizes. You can use the reference I linked above, or this one, or one of the many others out there.
Read guide line for 1x, 2x, 3x
You should simply use:
UIImage *imButton = [UIImage imageNamed:#"image.png"];
[YOURBUTTON setImage:imButton forState:UIControlStateNormal];
Xcode will automatically use the available image with scales ex: #2x or #3x
From my example your images would be:
image.png (20x20 px),
image#2x.png, (40x40 px)
image#3x.png, (60x60 px)
respectively.
Quoting from apple:
Image Size and Resolution
iOS uses a coordinate system to place content onscreen. This
coordinate system is based on measurements in points, which map to
pixels in the display. On a standard-resolution screen, one point
(1/72 of an inch) is equal to one pixel. High-resolution screens have
a higher pixel density. Because there are more pixels in the same
amount of physical space, there are more pixels per point. As a
result, high-resolution displays require images with more pixels.
Refer here
Guys
You can try below code:
if (IS_IPHONE4) {
imgHeight.constant = 150;
}
else if (IS_IPAD) {
imgHeight.constant = 300;
}
else if (IS_IPHONE5) {
imgHeight.constant = 170;
}
else {
imgHeight.constant = 200;
}
Thanks.
So I've done lots of reading on how to achieve perfect image quality on UIButton's .imageView property in iOS. Here's my example ->
I've got an UIButton 24x24 points as per the following line:
myButton = [UIButton buttonWithType:UIButtonTypeCustom];
myButton.frame = CGRectMake(82, 8, 24, 24);
myButton.contentMode = UIViewContentModeCenter;
buttonImage = [UIImage imageNamed:#"myImage.png"];
ogImage = [buttonImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
I then have the original image sized to 46x46 pixels (twice 23x23, 24x24 on button for even size to prevent iOS auto-aliasing), then the image#2x at 92x92 pixels. Im testing on an iPhone 6s (obviously retina display) and am still seeing some jaggedness on my UIButton's image. What am I doing wrong here? Am I still not understanding how to achieve perfect retina quality?
Here's an image, Im hoping it displays well for example:
Not sure if this is going to help, but this is my personal preference. If for example, I have a UIButoon of size 24x24, I always generate 24x24, 48x48, and 72x72 images. I rely on my Adobe Illustrator to creat pixel perfect images. Always check your images in pixel preview mode and make sure edges are aligned with the pixels. If not, it can produce artifacts that you see in xCode.
If it's what you want in Illustrator then it's what you get in xCode.
I'm developing a game in Swift (but not sprite kit), and i'm having a lot of trouble to make a background image that look great in every device. I recently understand the concept of the #1x, #2x and #3x images and it's pixels, but i can't find any place that say what size (width and height) an background image must have to look good both in canvas mode, preview mode and in action.
Anyone can help me?
For help, i'm attaching two print screens of a test that i made.
Thanks for the help :)
Image on Xcode 7 canvas
image in preview mode. Notice how he cut the edges
Size Icon For Devices:
UIImageView *imageView = [UIImageView alloc]init];
imageView.frame = CGRectMake(0,0,widthInt,heightInt);
imageView.image = [UIImage ImageWithName:#"nameImage.png"];
i want to set an image to a custom UIView. I created the Image in Photoshop with 100 by 100 pixels.
Then I did:
self.customView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"Image.png"]];
And it worked just fine, except that i could see the pixels on my Retina display. Don't get me wrong i saw that coming, because i set the image in Photoshop to 100x100 and the UIView to 100x100. So due to the "false" pixel definition in xcode it is displayed with the double size pixels.
But how can i create a image, say an image with 200x200 and then set it to the background of the 100x100 View so it is displayed with native resolution. I tried to search for something like "scale to fit"-function for the backgroundPattern for the UIView but couldn't find anything.
So my question is, how do i set an image as "Retina 2x" Image?
And how do i get it into my UIView?
Thanks in advance!
This is your answer.
Basically put two images in your project. "Image.png" and "Image#2x.png". The code inside [UIImage imageNamed:#"Image.png"] will pull from the correct image based on the screen hardware.
Is it possible to target users that only have retina displays/have a particular version of iOS? If not, do I need to include non-retina images in my project? I know that for the application icon it needs a non-retina version, but for all of my custom graphics, such as UIBarButton icons, etc. do they all need to have both a retain (test#2x.png) and a regular (test.png) version?
Also, how should I go about scaling? Currently I'm creating say a larger image, like 100x100px and then scaling it down with the following code:
// grab the original image
UIImage *originalImage = [UIImage imageNamed:#"test.png"];
// scaling set to 2.0 makes the image 1/2 the size.
UIImage *scaledImage =
[UIImage imageWithCGImage:[originalImage CGImage]
scale:(originalImage.scale * 2.0)
orientation:(originalImage.imageOrientation)];
Does this maintain a higher resolution than if I re-sized it to 50x50 pixels in photoshop and then added the file into my project as is?
You cannot specify users device.
You'd better add two versions for all images into your app.
Because you could not know whether the device is retina or not.