My question is next:
How to use pixel instead point for control?
For example I add to my project retina images (size 75, 45). In this case I create UIImage with a size 37pt, 22pt (and some pixel are lost)
I create puzzle game and very important that all the pixels match my mask.
How to resolve this problem?
Thanks!
If the UIImageView size is 37x22, the image#2x size must be 74x44.
CGRect is a struct composed of CGFloat elements... So just set the sizes as 37.5 and 22.5 and you're done. Why you would want to use odd-number sized retina images though is another question - are you not supporting non-retina devices?
Related
After trying hard to create screen which support multiple resolutions, I can't able to get success in deciding what resolution graphics I require to use for #1x, #2x and #3x sizes.
Because in Storyboard also device is not displaying in exact screen size resolution, may be half width and height is running.
So please clarify about this too.
Please check this reference image:
At present I have considered iPhoneSE as base view because my graphics #1x exist in this resolution. But when I load image into UIImageView its looking too bigger compare to requirements.
So what changes I require to do for this correction?
Also provide me some suggestion about resources, I require to use for handling multiple iPhone sizes.
EDIT:
When I try to resize UIImageView - it get cut from all sides:
You can get more clarity after read it:
There is something to understand. By creating 2x and 3x images, you can't expect exact same layout from each iPhone screen. The layout will be different from screen to screen. 1x, 2x and 3x image sizes dealing with only the pixel density of the screen.
Suppose you have an image which is 320 * 70 and you are creating
if the image size is 100 * 100
#1x -> 100 * 100
#2x -> 200 * 200
#3x -> 300 * 300
Reference: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/image-size-and-resolution/
You can also do like this:
The best way to achieve this is by using an "Asset Manager" as the other answers have pointed to, and by using a "Vector" image. A PDF image is Vector, and both "Adobe Photoshop" and "Adobe Illustrator" allow you to "Save as..." PDF. So:
Select your regular device and Apply proper constraint on it or use autoresizing option like this
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.
I have an icon area that I used an UIImageView to display it. If the imageview has the following frame:
CGRectMake(0, 0, 20, 20)
How big (in pixels) do I make my icon for all the different iPhone display types? I know I need x.png, 2x.png and 3x.png and want them to look good in iPhone 5, 6 and 6 plus.
iOS uses points instead of pixels. So, when you create a 20x20(points) image, it is actually 20x20 pixels for regular iPhone screens where 1px = 1point. For #2x, it is like 40x40 pixels and for #3x it is like 60x60 pixels. This sizes should be sufficient to make them look good basically, as far as I know.
I've been told not to scale down images, but always to use them in their original resolution.
I have a custom UITableViewCell that has a 'Respond Action' on the cell. The UIImageView in Storyboard is 16x16.
Now originally I was using a 256x256 image, and my UIImageView has an Aspect Ratio constraint, and a height constraint of 16.
Then it was suggested to me to not ever scale down images, but to use an image that fit the exact size I needed. So a 16x16 was designed for me, and I used that. It looks awfully blurry though.
The results are here (The font next to it is 11.0 point to give you an idea of it's size):
What is the correct way to go about this? Should you not scale down images? What is the reason? It looks much better than the 16x16.
Scale your image down before adding it to your project...
Take your 256x256 png image and scale it to 1x, 2x, and 3x size.
1x should equal the size that you need your image to display in the view.
2x and 3x will support retina and retina HD displays.
ex:
Name: image.png | Size: 16x16
Name: image#2x.png | Size: 32x32
Name: image#3x.png | Size: 48x48
Drop these images into your Images.xcassets
see: Specifying High-Resolution Images in iOS
also: Icon and Image Sizes
You don't need to scale down images, but it's a good idea. If you're cramming a 256x256 in a 16x16 means the user is downloading 65kb vs <1kb of data. Or if it's in your bundle, then your app is that much 'heavier'.
But it depends what screen resolution you're using. Even an iPhone 4 uses retina, which means your 16x16 image view should contain a 32x32 image. You should also supply a 48x48 for iPhone 6+ screens. This will make your images look great on each screen size.
Use Images.xcassets to manage your images.
You shouldn't scale down the images ideally, but you also need to cosier the screen resolution. Old devices are 1x, retina devices are 2x and he latest iPhone 6 devices use 3x images which means you should have 16x16, 32x32 and 48x48 images to be used by each device (preferably managed in an image asset). What you're seeing at the moment is a 1x image being scaled up to 2x or 3x so it's blurry. Previously you had a large image scaled down which is bad for memory usage but looks sharp.
If you are using an image from your asset catalog, provided to yourself during development. You don't want to scale down images at runtime as it will add unnecessary overhead to your app. Rather have the assets sized to the required dimensions and add them to your xcimage catalog for 1x, 2x and 3x displays. Think optimisation in terms of memory and bundle size, what's the minimum size required to make it work and look good? If your image is being displayed in a 20x20 square, the optimal sizes will always be 20x20, 40x40 and 60x60 for 1x, 2x and 3x displayed.
Now fetching images from the network is an entirely different ballgame. You will find that sometimes you might want to scale down the image, but only when the image you fetch is bigger than what you need to display, like when you're trying to fit in a 2000x2000px image in a 36x26px square. You want to do the scale down for three reasons:
it will reduce virtual memory usage.
it will reduce storage memory if you persist the image.
you will save yourself from image downsampling artifacts that appear when the system tries to render the image at runtime.
Best thing to do here is to scale down the image as soon as you download from the network and before using it anywhere within your app.
Hope this helps!
There is a purist answer for this and then the answer which saves you from spending your life converting images all day.
The following is a discussion on the topic of scaling.
iOS - Different images based on device OR scaling the same image?
If you want to avoid having to create too many images, then using x2 images with a resolution of x2 the expected point size usage is a reasonable compromise as that covers the majority of current devices. You would only then be scaling down for iPhone 3s and up for iPhone 6+. You only need large XxY images if you expect to use large images. Again I would go for x2 resolution for those. Often worth having an iPhone and iPad version of an image in case your expect usage on iPad is to use a bigger XxY point size.
As noted in the link, the impact of scaling depends on the image. I would only worry about the images you think look bad when scaled. So far I have not found scaling to be an issue and much easier than creating lots of bespoke PNGs.
Scale it down before set it:
Swift extension:
extension UIImage{
// returns a scaled version of the image
func imageScaledToSize(size : CGSize, isOpaque : Bool) -> UIImage{
// begin a context of the desired size
UIGraphicsBeginImageContextWithOptions(size, isOpaque, 0.0)
// draw image in the rect with zero origin and size of the context
let imageRect = CGRect(origin: CGPointZero, size: size)
self.drawInRect(imageRect)
// get the scaled image, close the context and return the image
let scaledImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return scaledImage
}
}
Example:
aUIImageView.image = aUIImage.imageScaledToSize(aUIImageView.bounds.size, isOpaque : false)
Set isOpaque to true if the image has no alpha: drawing will have better performance.
I often need to position and stack two UIImages into an UIView.
For example, placing a picture frame around (behind) a photo, and then displaying it. Specifying the position by modifying the image's frame will not work with both Retina and non-retina devices because the hardcoded frame values will not scale.
For example, if I have a photo frame who's image is 56x56 (retina) and the actual image is 52x52 (retina), it needs to be placed at CGRectMake(2, 2, 54, 54) on top of the photo frame. But if the user is on non-retina this will fail since those values will be incorrect (they're now CGRectMake(1, 1, 27, 27)).
What is the correct way for resolution-safe image processing? Is there a way to combine two images (each with regular and #2x.pngs) that will display correctly on either screen type?
You can use UIScreen scale property. It's a readonly property. In devices prior to iPhone 4 (non-retina displays) this value will be 1.0, but with retina displays the value is 2.0. So you can store this property to a local variable, say called CGFloat scaleFactor and multiply it with the values above:
CGFloat scaleFactor=[[UIScreen mainscreen] scale];
... = CGRectMake(1.0*scalefactor,1.0*scaleFactor,27.0*scaleFactor,27.0*scaleFactor);