Why is UISegmentedControl turning the blue parts of my image to black? - swift

Can anyone tell me why my segmentedcontrol changes colors of the image I set for the segments? When I step through the debugger the image contains black text and a blue dot. But when it is rendered in the simulator the dot is black and not blue:
Here is a screen shot of the view hierarchy showing the image I set on the segmented control with a blue dot and to the left the rendered view controller with the segmented control with the dot being black.
I assume this is related to the tint color and possibly how the control handles light and dark mode.
The funny thing is is I set the image to get an image from my image assets, it is fine. But this images was one that is dynamically generated with calls to UIGraphicsImageRenderer.

Thanks to input from Tom Harrington, the problem was I needed to apply the rendering mode to alwaysOriginal for my image - that was the trick!
let chatImage = UIImage.textEmbeded(image: scaledDotImage, string: "Chat", isImageBeforeText: false).withRenderingMode(.alwaysOriginal)

Related

Swift iOS UI Advice

I am looking for some general advice and maybe some example code of what I am trying to accomplish if anyone knows of any for an iOS swift project. I would like to either:
A) Make the background, of the blue view, gray and only show a certain percent of the blue area.
OR
B) Overlay the gray area on top of the blue view and just keep making gray area bigger.
What I am trying to do is simulate battery power and show a battery.
I've considered using a progress bar and doing option A, but the blue area is NOT a solid color. Its actually an image. I've tried using an image for the progress bar, but the image needs to keep its dimensions. (Ex: If progress shows 20% it needs to show only 20% of the image or "blue area", but if you use an image as the progress bar it just shrinks the image and still shows 100% of it instead of just the 20% I need to show).
You can easily write a custom self-drawing UIView that will behave in exactly the way you describe. In other words, you tell your UIView a percentage, and it redraws itself with the blue on the left and the gray on the right. You can even draw the darker gray stroke outline shown in your drawings. All easily accomplished in code.
I like being able to lay things out visually and take advantage of autolayout. Here's how I would do this (in a nib/storyboard):
Place a UIView on your canvas and give it the gray background. Give it whatever autolayout constraints are appropriate for you.
Place a UIView inside the one from #1 and give it the blue background. Anchor it's left, top, and bottom to the gray parent view and give it whatever width (doesn't matter).
Add an outlet to that width constraint you made in #2.
Now all you have to do is modify the "constant" property of that width constraint to give you the desired "progress". So if your gray view is 100 wide and you want to present "20%" progress, then just do "yourWidthConstraint.constant = 20".

transparent color to white for an UIImage

I realised that all my png images are defined with a transparent color instead of white color. I never noticed because the background of my app was white but now is of a different color. And as I cannot edit each single png file to replace the transparent color to white, I am looking for a simple programmatic way of replacing on the fly the transparent color by a white color. How should I do this please?
Thanks for any help
Cheers,
geebee
If I understand what you're trying to do, I would suggest you add a white background to your UIImageViews.
self.myImageView.backgroundColor = [UIColor whiteColor];
I don't see why you can't just "edit each single png file"; it's a pretty much instant batch operation using GraphicConverter or ImageMagick or whatever.
If you really insist on compensating for this on the device when the image loads, then just draw the image onto a white opaque rectangle and use the resulting composite image.

Can't show the tabbar icon, even with size 30*30

I prepared some PNG icons, size 30*30, but with colors, not only black/white. The icons are OK when I want to display them on buttons.
It can't be shown in the tabbar.
I am wondering if the iphone only supports some simple icons (the black/white icons with lines).
Do you have any ideas?
Thanks in advance.
Michael
TabBar icons displayed in gray scale even if they are color, and iPhone uses the alpha channel for masking.
I recommend checking this site, most iPhone developers like it :
http://www.glyphish.com/
The alpha component of the image is all that is used to draw the icon on the tab bar. So you need to make sure your image has a alpha channel or it will either not show up or show up as a blank square in the tab bar.
This does mean that effectively only monochrome images can be used in the tab bar.
I'm not at my mac right now and I can't remember if it is 1.0 alpha or 0.0 alpha that shows up as white in the tab bar, or if you need to have a black or white background, but if you create an image with varying transparency it should be easy enough to work out.

How to make partly transparent png-image buttons for iPhone?

My iPhone App has custom buttons that display png-images.
I like to replace the white color in those images by a transparent color. Is there a tool on the Mac that allows me to do that? (or is there some other way to indicate which color is transparent in xcode?)
The Preview application has a mode on its select tool called "Instant Alpha" which eases selection of backgrounds. Once you have your background selected, you can simply press the "Delete" key and that area of the image will be removed. Save it as a PNG with the "Alpha" box checked and you're done.
Most other image editing tools, particularly those supporting multiple layers in the image, will also properly support PNG alpha channels. These will likely be easier than using Preview, but they are all third-party and many cost money so you will need to make that decision.
Please note however that if you are starting from an image with a solid background to which some things have a faded edge that blends in to the background, it is unlikely that you'll be able to remove the background entirely to your satisfaction without cutting in to the actual image.
You may have seen GIF images in the past which were designed to blend in on a white background and had some bright pixels at the edges which stood out and look ugly on darker backgrounds. An image properly saved as PNG or any other format with an alpha channel from the beginning will not have this problem.
Just set the image view alpha.
- (void)viewDidLoad
{
[super viewDidLoad];
self.view.backgroundColor=[UIColor greenColor]; //Set background color
UIImageView *imgView=[[UIImageView alloc]initWithImage:[UIImage imageNamed:#"images-4.jpeg"]] ; // Create and initialize imageView
imgView.frame=CGRectMake(10, 10, 200,250);// Set frame for imageView
[self.view addSubview:imgView];
imgView.alpha=0.1; //Adjust alpha
}
Start with a png file (use image preview).
You have to go to View > Show Edit Toolbar.
Then widen the window so that you can see all of the icons.
Then click the icon that looks like a magic wand.
And then click and drag on the color you want to erase.

Change background color of UIModalTransitionStyleFlipHorizontal

I would like to change the color behind the flip from white to a different color or picture. Is that possible?
Change the background colour of the UIWindow in MainWindow.nib. Either "black" or "clear" should both work (I think...)
It's one of the first things I do to any app, otherwise you get bits of white showing on a view rotation (in the very old days of 2.x there were huge patches of white; they've since masked off the screen edges during a rotation, but a few pixels still show through) and when you show/hide the status bar (e.g. for UIImagePicker) and stuff. Black looks a lot better than white for the window background.