I am having problems with a png image, that gets wrong colors on iOS compared to the actual image.
It does not matter how I am using the image, it always gets the wrong colors. I have tried on UIButton and UIImageView and it gives the same result.
It is a very standard use of a UIImage:
UIImage* greenButtonImg = [UIImage imageNamed:#"btn_green"];
UIImageView* testView = [[UIImageView alloc] initWithImage:greenButtonImg];
[self.view addSubview:testView];
The second image is how it looks on iOS and the first button is how it looks on my Mac (Finder and Photoshop):
As you can see the second button has a different green color.
This is happening all over the app where am using this picture. It happens in the Simulator and on a iPhone 5.
What can cause this issue? Can this be caused by settings in Photoshop, where the image was created?
As Jeff wrote in a comment it was a problem with the RGB Profiles.
I managed to fix the problem by converting the color profile in Photoshop:
Edit -> Convert to Profile... -> Set profile to "Apple RGB"
In iOS 7.0, the image is colored with the toolbar’s tintColor.
In iOS 7.0, all subclasses of UIView derive their behavior for tintColor from the base class.
By default, an image (UIImage) is created with UIImageRenderingModeAutomatic.
If you have UIImageRenderingModeAutomatic set on your image, it will be treated as template or original based on its context.
Certain UIKit elements—including navigation bars, tab bars, toolbars, segmented controls—automatically treat their foreground images as templates, although their background images are treated as original.
Other elements—such as image views and web views—treat their images as originals. If you want your image to always be treated as a template regardless of context, set UIImageRenderingModeAlwaysTemplate.
If you want your image to always be treated as original, set UIImageRenderingModeAlwaysOriginal.
Refer Template Images for more info.
Related
Im making an app with weather icons, and i wanted to use apple's SF Symbols! At WWDC2020 they released multicolred ones.
So my question is, why are my icons appearing in black like so:
I have set the rendering mode to alwaysOriginal. And it does nothing. If i set it to template it becomes blue, like the default tint color.
currentConditionImageView.image = UIImage(systemName: "cloud.sun.fill")!.withRenderingMode(.alwaysOriginal)
But according to the SF Symbols app, the symbol should look like this:
Has anyone encountered this Problem, and how did you solve it?
Im looking forward to your answers!
The rule is:
In a template environment, such as a button, if you apply the .alwaysOriginal rendering mode to a multicolor symbol image, its inherent colors will appear.
But an image view is not a template environment. Try making this image the image (not the background image) of a UIButton.
If you put a multicolored image in a non-template environment, like an image view, you are basically misusing it if you make it .alwaysOriginal. You should just make it .alwaysTemplate and accept it as a monochrome image adopting the tint color.
I'm attempting to use PDF files as icons in an app I'm working on. The issue I'm encountering is I'm getting inconsistent tint colors.
If I set a button image from interface builder, the icon image shows up black at runtime. Every time. Regardless of what I attempt to set from interface builder.
I tried setting my button icon image via code and instead of showing up black, it's white:
let myGraphicFile = UIImage(named: "myPDFImage")
let myButtonImage = myGraphicFile?.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
myButton.setImage(myButtonImage, forState: .Normal)
From code, regardless of what I attempt to set the tint to, it's always white from code.
I discovered this post relating to Xcode 6.x, but I think it might be dated, as I'm able to partially do it, but I can't set the tint.
Use PDF in XCode for an AppIcon (.appiconset collection)
I create the icons in Inkscape, save as PDF 1.5. I add the file to Images.xcassets. In Images.xcassets' attributes inspector, I'm setting:
Devices to Universal
Scale factor to Single Vector.
Summary: I can get it to show up and scale properly, but it's either black from interface builder or white from code. I suspect I'm missing something re: how to save the file from Inkscape.
Thank you for reading. If you have any suggestions, I welcome them.
I have figured out how to create vector icons with Inkscape. When you use PDFs to display icons in iOS, you need to alter the Attributes Inspector for your icon in xcAssets as follows:
1) Drag the PDF into xcAssets
2) Set devices (I did Universal and it worked fine)
3) If your PDF icon is under 1x, 2x, or 3x size class, drag it to Universal and delete the rest of them.
4) Set Scale Factors to Single Vector.
5) Render as Template Image.
Once it's configured there, then you just treat it was you would any other image in interface builder. It's essentially the same thing I was doing in code, but I don't think it gets done in code...it's gotta be done on xcAssets where the image lives. It's my understanding iOS renders vector images for the size class at run time. I think by attempting to tweak it in code wasn't working because the image had already been rendered.
If anyone has any questions on this, I found this link helpful in resolving my issue.
Additionally, this post covers the topic, too. https://stackoverflow.com/a/25804358/4475605
I was wondering how I should go about using high definition tab bar icons if my tab bar icons are being set programmatically. I'm pretty much just doing the standard:
tabBarItem2.image = [UIImage imageNamed:#"ExploreIcon.png"];
Will putting two images in my supporting files named "ExploreIcon.png" at 30x30 pixels and "ExploreIcon#2x.png" work without using additional code? Thanks for the help!
You don't need to specify the retina version, the system will use the higher resolution version if present in the bundle. Also you don't need to add the extension
[UIImage imageNamed:#"ExploreIcon"];
the two images should have te same name for example :
ExploreIcon.png
ExploreIcon#2x.png
You need not consider choosing file which fits and displays better on a specified device, Let iOS do that for you.
Just keep files to support all possible devices.
Follow:
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html
tabBarItem2.image = [UIImage imageNamed:#"ExploreIcon.png"];
This is good enough. Just make sure the file names are appropriate. i.e.
you have to add an imageview and set the cgrect size 40*40 and than you will add that image view on the tab bar icon image.
I have a requirement to make application that has color theme base on user selection
User selects an color at begining (in 8 available colors), that color will be applied for the whole app (background color, buttons, icons ....)
If I create images for each color, the app will have lots of images and can be heavy in size, and that approach not seem to be good one.
I tried to import images with 1 color and then change images color according to user-selected color, but got problem with some controls like slider, and also the image that is changed does not look good as photoshop one
Would u plz help me with good approach for this?
Make all the images one color (black probably), then let the user pick a color and save it to user defaults. Link all items that need to get the theme to the color from the user defaults. Then use the tintColor property of the UIImageView to themefy your app.
Method to tint any UIImageView:
- (void)tintImageView:(UIImageView *)imageView withTint:(UIColor *)tintColor
{
imageView.image = [imageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
[imageView setTintColor:tintColor];
}
Example use to tint Button:
[self tintImageView:self.button.imageView withTint:[UIColor blueColor]];
Example use to tint UIImageView:
[self tintImageView:self.imageView withTint:[UIColor blueColor]];
If you're using iOS7 you can take advantage of the tintColor property.
For images you need to be sure they are created using template option.
Please checkout this clear tutorial that will guide you to apply themes to different kind of controls in your app: Theming iOS Applications
You could probably be interested in trying Pixate Freestyle too, which basically allow you to apply styles like css does to your iOS app, that a pretty cool tool and I've found it very easy to use too.
I'm created a Master Detail app on Xcode 4.x for iPad. I've tried adding a custom background image to the detail part of it which works fine the problem is the background image is appearing pixalated. The image is of size 2048 x 1546 (for the Retina screen on my iPad) and if I view it as a photo on the iPad it doesn't appear pixalated so why does it when it's being used as a background?
The code I'm using to set it is,
UIColor *background = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:#"leather.png"]];
self.view.backgroundColor = background;
The only thing I could think of is because a Master Detail app has the scroll bar at the side but how would I fix that? Or what is the real cause? It appears pixalated or any orientation.
Add an image with the filename "leather#2x.png", otherwise UIImage won't recognize that it's supposed to be a high-resolution image. Alternatively, you may want to use a regular UIImageView instead of a pattern color.