Currently I am designing the UITabbar of my App. I created a Photoshop layout for the Tabbar, it is 84px high and 640px wide. Is it the right way to create one image with the size of 84x640 and one with the size 320x42. And then name the larger image #2x.png.
I am struggling at this point, because when I log the width of the UITabbar it says 320.00, but I am using the Iphone 3.5inch retina simulator.
Any tips for me to realize the tabbar?
Yes. You should have two images. One for normal displays and one for retina.
Xcode works with point, not pixels, so the width will always be 320.
In the case of retina display one point is 2x2 pixels and in normal mode it is 1x1.
by the way, I think the height for the tab bar should be 320x49 for normal and 640x98 for retina.
the retina image should have the same name as the normal one with the #2x at the end
Example:
normal: image.png
retina: image#2x.png
You confused "Points" with "Pixels". The Points are resolution independent. You can normally check your scale factor by calling contentScaleFactor on your UIView.
It should say 2.0 for retina, and 1.0 for non retina.
Related
I am a bit confused on managing the different sized images with retina and non-retina displays.
I add a custom button in Storyboard and add some text and then add the backgroundimage, which is a vector done in Illustrator (Width: 630 / Height:130):
UIImage *img = [UIImage imageNamed:#"iPad1_orange_button.png"];
[myButton setBackgroundImage:img forState:UIControlStateNormal];
the button shows up:
...the button comes out very small.
I have another image with the #2x for retina but that comes out the same size.
My question is how to manage the sizes of the buttons in regards to image size. DO i need to set the size of the button manually?
Also, when i create a button in Illustrator with the same pixel size as the button i use in XCODE and export it as .png, add it to XCODE and drag it into Storyboard it comes out very large.
Just a quick clarification:
The storyboard dimensions are NOT in pixels.
An iPhone 4S has 640x960(x,y) # 326ppi. xCode dimensions are 320by460(x,y). Just take the numbers and convert em to get the appropriate pixel sizes.
IE: If you want a button that that is 100 wide and 100 tall in storyboard you'd to create an image 100*(640/320) px wide and 100*(960/460) px tall (I believe my math is right...).
Depending on what you're building for you'd need different images to cater to the different devices.
On another note, the term retina display doesn't designate a clear-cut standard of px by px. If I recall correctly it's a term Apple coined that basically means that a screen has enough px that the human eye (hence retina) would not be able to see the jaggies.
Similar to Intel's coining of the term Ultrabook; no REAL spec floor/ceiling just a marketing ploy.
Think of dimensions and what you would consider a pixel to be a "density independent pixel". You are always working in the original size when it comes to position and size but it is up to the operating system to handle the different resolutions for you. For now we have the original size and Retina which is X2 the density but this could change. You never need to manually change the resolution for the given device.
This is simple:
make the button frame the size of the normal res image
when you load the image with UIImage imageNamed: do it like this
UIImage *img = [UIImage imageNamed:#"iPad1_orange_button"];
*Note I removed the file extension (.png) - this instructs UIImage to select the resolution appropriate version, the regular or the #2x. iOS will show the 2x version of the image in the same frame size as the normal res image. Pretty simple.
I am using CIDetector to find faces in a picture.
The coordinates of faces it returns are the absolute coordinates in the image file (The image dimensions are much larger than the screen size obviously).
I tried to use the converRect:toView command. The image itself is not a UIView so the command doesn't work, also I have a few views embedded inside each other where finally the image is being shown.
I want to convert the bounds of the found faces in the image to the exact location of the face being shown on the screen in the embedded image.
How can this be accomplished?
Thanks!
The image being shown on the phone - the image is scaled to fit the screen with aspect fit
The coordinates from CIDetecter (CoreImage) are flipped relative to UIKit coordinates. There are a bunch of tutorials out there on iOS Face Detection but most of them are either incomplete or mess up the coordinates. Here's one that is correct: http://nacho4d-nacho4d.blogspot.com/2012/03/coreimage-and-uikit-coordinates.html
One thing to note: the tutorial uses a small image so the resulting coordinates do not have to be scaled to the on-screen (UIImageView) representation of the image. Assuming you use a photo taken with the iPad camera, you will have to scale the coordinates by the amount the source image is scaled (unless you reduce its size before running the face detection routine -maybe not a bad idea). You may also need to rotate the image for the correct orientation.
There is a routine in one of the answers here for rotating/scaling: UIImagePickerController camera preview is portrait in landscape app
And this answer has a good routine for finding the scale of an image when presented by a UIImageView using 'aspect fit': How to get the size of a scaled UIImage in UIImageView?
You will need to use the scale in order to map the CIDetector coordinates from the full size image to the scaled down image shown in a UIImageView.
I let the user select a photo from the iPhone library, and I grab the UIImage.
I output the size of the image, and it says 320x480, but it doesn't seem to be, because when I draw the image on the screen using CGRectMake(0,0,320,480), it only shows the upper left portion of the image. Aren't the images much bigger than 320x480 because of the high resolution?
I'd like to scale the image to force it to be 320x480. If it is less than 320x480, it should not be rescaled at all. If the width is greater than 320 or the height is greater than 480, it should scale in a way so that it becomes as close to 320x480 as possible, but by keeping the proper proportion of width to height. So, for instance, if it scales to 320x420, that is fine, or 280x480.
How can I do this in Objective-C?
Setting the image view's content mode like this:
myView.contentMode = UIViewContentModeScaleAspectFit;
will preserve the aspect ratio.
I am fairly new in iOS programming and I am creating my first app.
I have been trying to use the following code to change the navigation bar background image (this is using the new iOS 5 method):
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:#"gradientBackgroundPlain.png"] forBarMetrics: UIBarMetricsDefault];
It works fine, but my image is 640 x 88 and it looks too big for the bar. It's like the system doesn't want to scale it, or do I need to do it manually? If I scale the image and create a smaller one it looks pixelated in the retina display.
Any thoughts on this?
Any help or response will be appreciated.
Thanks,
Jorge.-
Your image gradientBackgroundPlain.png should be 320x44, and create a second image named gradientBackgroundPlain#2x.png with a size of 640x88. Include the #2x image in your bundle, but continue to specify gradientBackgroundPlain.png for the name of the image. The platform automatically chooses the correct size image for use depending on whether there is a retina display present or not.
I have a PNG picture which I should use in my iPhone application, but first of all, I have to give it the dimensions of an iPhone 4 retina screen. Does any one know what could it be its dimensions or how to do that?
The retina display on the iPhone 4 has the double amount of pixels than that of an older iPhone. So the complete size of an iPhone 4 screen in pixels is 640x960.
In photoshop you can quickly resize any image by changing the image size property from the Image menu. If you don't want to lose quality I suggest you start with all retina images and halve them for the non retina displays. Doing it the opposite way will decrease your quality.
If you want to use an image designed for the iPhone 4 retina display you'll want to have both pictures, one for the normal iPhone screen (320x480) and one for the retina images, in your resource's folder of your Xcode project. Use the same name for those images but append "#2x" at the end of the retina images.
So if you have a "background.png" it will become "background#2x.png" and iOS will be smart enough to use the correct image for the correct type of screen.
At 72 dpi, it should be 640px by 960px.
iPhone4 screen resolution is 960x640