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.
Related
I am trying to set a background color for a List that will adapt to the iOS mode (light/dark).
I use .systemGray5 without problems in VStacks but when using it in Lists and I change to dark mode I get a very dark, almost black color which makes everything unintelligible.
This happens regardless if the list is dynamic or static. Is this a bug? Or is there an alternative way to do it?
List {
Text("Privacy").foregroundColor(Color(.systemRed))
}.colorMultiply(Color(.systemGray5))
The problem is that colorMultiply will multiply all colors in the list (text, background, separator) with the given color (see multiply color blending). This will darken the whole view, which probably looks okayish in light mode, but is the opposite of what you want to do in dark mode.
There are two ways to change the background colors in a List:
List {
Text("Privacy").foregroundColor(Color(.systemRed))
.listRowBackground(Color(.systemGray5))
}
.background(Color(.systemGray5))
background will change the background of the whole List, but I guess this is only really visible in grouped lists, since the cells usually don't have any space between them.
listRowBackground changes the background color of a view when it's used in a List environment. That's probably what you want to use here.
Frank Schlegel provided an answer which works only for static lists. Until Apple fixes this for dynamic lists I solved my problem by using this code
List {
ForEach(pumpData) { pump in
Text("pump").listRowBackground(Color(.systemGray5))
}
}.background(Color(.systemGray5))
.secondarySystemGroupedBackground worked for me.
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 noticed that my app doesn't look good when the "darken colors" iOS system setting is enabled. Some navigation buttons are white, some are darkened to gray.
Is there any way to detect if this setting is enabled?
Turns out it's quite easy to detect. Suppose the navigationBar is configured with a white tintColor. Just reading navigationBar.tintColor returns the adjusted color, in this case 80% white. We can use this color to set the navigationBar.titleTextAttributes.
For all tintable elements such as UIBarButtonItems, make sure to use template images only:
-[UIImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]
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 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.