I am using this code to set custom background image for all UINavigationBars. The problem is that the final image does not appear to be retina size. I researched UINavigationBars are 640x88px. Thats exact dimensions of my UINavigationBar.png however I only see 320x44px on the iPhone Sim(retina) and my iphone 4 which is also retina.
The code that sets the image:
UIImage *background = [UIImage imageNamed:#"UINavigationBar.png"];
[[UINavigationBar appearance] setBackgroundImage:background forBarMetrics:UIBarMetricsDefault];
Here is a screenshot for illustration:
(the difference is there is no bottom dark line as in Photoshop. I can only see half of the image in the iPhone 5 Simulator (Retina))
My question is why this happens and how can I fix it? Thanks.
You need to have two .png files with different size and same name, but with #2x addition in the retina display file.
For example,
File 1 for regular display support:
size- 320x44,
name- UINavigationBar.png
File 2 for retina display support:
size- 640x88,
name- UINavigationBar#2x.png
In your code you always use UINavigationBar.png, the device will automatically know witch file to use, according to the hardware.
Related
Purpose
I am to make my iOS app run on the different device include iPhone and iPad.
I want to setup the ImageView's image with different size using the same name for Adapting to the different devices and landscape.
What I am doing
1.import image into Assets.xcassets for different device traits.
apple program reference: Create asset variations for different device traits
The image inside xcodes' Assets.xcassets has different width or height class setting. I name the image after "homeBackground"
The image like this :
[1]: https://i.stack.imgur.com/yXHk4.png
2. drag the imageView into Interface Builder
3. set the imageView's attributes: Image in the Interface Builder as the image's name "homeBackground"
4. view as iPad or iPhone
using xcode 8.3. I can preview the scene.
I can see the imageView's image is set successfully, When viewing as Ipad or iPhone
Problem
run the app in xcode. I don't see the imageView has the image in the simulator and I have the following question:
Could not load the "homeBackground" image referenced from a nib in the bundle with identifier "BTBubblePop"
complete
I run it in the iPad, the ImageView's image shows
I run it in the iPhone, the ImageView's image don't show.
thanks for your focus and comment.
the question is called by the image not set correctly.
The image's assets.xcassets change like this. That's worked.
The Image should like these.
Image should set like here
If I understand your question correctly the answer is that it goes by image set name.
Or in code
UIImage *image = [UIImage imageNamed:#"homeBackground"];
[[UIImageView alloc] initWithImage:image];
My tab bar icons appear blurry.
I created the icons using Photoshop, and followed the iOS Human Interface Guidelines when I decided the sizes of each icons.
e.g. icon size: 30x30px png
This only happens with the tab bar. I wonder if this happens because of the resolution of the images or because of programming issues...
You're using icon size 30x30 which I assume is for 1x (iPhone<4). Since iPhone>=4 needs 2x and 3x images so you have to include that also.
Either you use images with naming conventions like
star.png // 1x = 30x30
star#2x.png // 2x = 60x60
star#3x.png // 3x = 90x90
or you can use image.xcassets and put your 1x, 2x and 3x images there and use it.
Reference Xcode Assets Catalogs
Probably because using a device with the retina screen.
Try about changing the icon's filename to xxx#2x.xxx like "facebook_icon#2x.png".
Also, be aware that you can use a PDF file (vector graphics, resolution independent) instead of PNGs, and Xcode will render the appropriate resolutions at build time for you (I don't think you can easily do this for third party icons such as Facebook, but...).
To see how this is done, create a new project using the "Tabbed Application" template, and check the asset catalog for the tab bar icon images. It does just that for the circle and square icons of the "First" and "Second" initial tabs.
Use this line of code to set image for uitabbaritem in uitabbar .
tabbaritem.image = [[UIImage imageNamed:#“image”] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
I have the following code that works fine for setting a background image:
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed: #"navbar_bg.png"] forBarMetrics:UIBarMetricsDefault];
My question is, for Xcode6, iOS8/9, iPhone 5, 6, 6+, iPad, etc, how do I make sure I cover all devices, widths and resolutions, to make sure that my background image always fills the navigation bar correctly?
I have seen other questions on SO and various other sites, but all have been 2-4 years old, and so don't mention or cover the latest device widths and resolutions.
I want to use a background image in the navigation bar, but I need to make sure it looks good on all possible devices.
All you have to do is have three versions of your image in your asset catalogue. The first in the size you need the second twice the size and the third three times the size. Xcode will put the right image on the right device.
Alternatively you can just put a vectorial image and at complie time Xcode will generate the three images for you on the fly.
For the navigation bar you need separate images for portrait and landscape. You can write something like this:
UIImage *portraitImage = [UIImage imageNamed:#"test_bar_portrait.png"];
UIImage *landscapeImage = [UIImage imageNamed:#"test_bar_landscape.png"];
[[UINavigationBar appearance] setBackgroundImage:portraitImage forBarMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setBackgroundImage:landscapeImage forBarMetrics:UIBarMetricsLandscapePhone];
self.navigationController.navigationBar.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;
My application, which should support iOS 5.0+ I have background UIImage, which should be load proper image depending on device. So I've created 5 images with corresponding resolutions.
img.png
img#2x.png
img-568h#2x.png
img~ipad.png
img#2x~ipad.png
Also I've set Default-568h#2x.png splash image. I then detect in viewDidLoad which device my app is running and use
[bkgImageView setImage:[UIImage imageNamed:#"img.png"]];
to load appropriate image. All resolutions are loading just fine except iPhone 4" one, which is img-568h#2x.png. If I load this one explicitly
[bkgImageView setImage:[UIImage imageNamed:#"img-568h#2x.png"]];
the scale is not correct. So how can I load 4" retina image automagically or manually?
Adding -568h to the end of the file name doesn't work. The only supported modifiers are #2x,~ipad, and ~iphone. The only case where -568h might seem to work is the launch image, where the image must be specifically named Default-568h#2x.png.
You should use auto layout (or struts and springs) to adjust your screen accordingly.
Your problem is that it's automatically stretching an image that's already large enough.
The solution:
If you load the image explicitly for that device, you should load "image-568h", and let it automatically add the #2x. That way, it knows that it's a high resolution image and doesn't attempt to stretch it.
Additionally, rather than detect the device, you could design the image with the extra space at the bottom to fit the 4" screen, set the image to Aspect Fill, and let it clip for smaller devices.
I am designing a custom button with that requires me to overlay a UIButton on top of a UIImageView. The UIImageView uses a [UIImage stretchableImageWithLeftCapWidth:topCapHeight:] image and the UIButton has a background color with a pattern image [UIColor colorWithPatternImage:[UIImage imageNamed:#"buttonPattern.png"]]
The problem I am facing is that on iPhone 4, the images from the UIButton and the UIImageView appear to have slightly different colors although they should match. Testing the same thing on an iPhone 3GS shows normal results without the color difference.
This image shows the difference:
as you can see it looks fine on the 3GS. On the retina display you can clearly see the difference in color. I even tried using the low res images (from the 3GS) on the retina display, the colors were still showing differently. is this a bug in retina display devices? has anyone faced this issue before?
Make sure none of your image files has an embedded color profile. This can be tricky. For Adobe software, this page is helpful:
http://bjango.com/articles/photoshop/