Adding Image And title both to UIsegmentControl IOS - ios

Is there a way so that you can set both image and title of UISegmentControl simultaneously, so that image appear next to the title , just like image appear next to title in UIButton.
I am trying but if I set image of Selected segment of UISegmentControl then title disappears and if I set title of Selected segment of UISegmentControl then Image disappears, I want to set both at a time.

The official documentation for -setImage:forSegmentAtIndex: says
A segment can only have an image or a title; it can’t have both. There is no default image.
So, no, there is no way to do what you want using the image and title properties.
However, there are a few options to accomplish the objective in different ways.
if you are going to use the same image for each segment, you could use the appearance methods to set the background and then use the method -setContentOffset:forSegmentAtIndex: to move the title to the side of the background image.
you could create an image that had both the icon and the text in it. This is less than ideal as a change to the text requires exporting of the entire asset again. But is an option.
the least ideal would be to fake a segmented control using buttons that you write the code for to handle state changes. There may even be some open source options that do just that, so feel free to search for them.

Related

Adding home icon to the tab bar

I want to implement a bar at the bottom of the screen with the home button - exactly like in Instagram or Messanger apps. I was trying to use a tab bar (https://developer.apple.com/ios/human-interface-guidelines/bars/tab-bars/)
And I would like to utilize system home icon for the tab bar button/item (https://developer.apple.com/documentation/uikit/uiapplicationshortcuticontype/1623374-home)
Is there any simple and straight forward way to set this home icon for the tab bar item?
Some icons can be selected directly from the list in the button/item properties in Xcode, but this home icon is not among them.
I also saved the png from the link above, resized it to 30x30 and added as a picture for the button/item, but it's just showing a grey rectangle.
Apple may or may not provide you with some images. In general no one uses stock images but provide their own. You should do the same.
So "Adding home icon to the tab bar" is pretty much the same as for any other tab bar item. You can add your image and/or text that represents your "home" button. Some images may already be at your disposal but others must be made/bought/stolen by you.
The image you use in tab bar item is only used as a mask and not as an explicit image. What that means is that only alpha component of the image will be taken. In your case you have a black icon on white background which from alpha perspective means you have a rectangle. You will need to remove the white background and make it transparent or use another image that already has these properties.
I am not sure for tab bar but you might also try to open your assets, select your image and then in options on the right find "Render as" and set it to "Original image". Even if this will work the results will not be as you desire (at least in most cases) due to a white background on the image.
In general this option is used to set it to "template" which means whenever you use this image on your components such as UIImageView it will use it's tint color and image alpha component instead of the actual colors from the image. It is a very useful tool but again I am not sure it will work on tab bar item.
You should stop wondering if Xcode is designed to be overcomplicated. Putting aside numerous amount of bugs (and there is really a lot of them) and it being slow (it really used to be faster) it is designed very nicely. But tab bar view controller is extremely high level component. If you don't like it the way it is then simply create your own. All you need is a bottom view with your N buttons which may be shaped any way you can possibly imagine and a container view on which you set a new view controller when one of those buttons is pressed.

UIButton image tint not working

One of my apps has three UIButtons on it, and they use images that I got from icons8. In the code, I change the tint color and it works fine. Whatever I set the tint color to is what color the button image becomes that color.
Today I wanted to add a fourth button to mute sound. I downloaded the images that I wanted from icons8, added the button and set it up like I have the rest of the buttons set up. The new button is not changing colors like the rest of them. I'm certain that it has to do with the image, because if I select a different image, it changes color. I also tried using the new image on one of the older buttons and it would not change color.
My question - is there anything special that needs to be done to an image to make it work with tint color?
Try setting the image to render as a template image. You can do this in your .xcasset folder selecting the image set, opening the attributes inspector and setting render as to "template image."
What I did was follow the #beyowulf instructions and on the code I just did this
yourBtn.tintColor = .white (or other color)
this worked for me

How do I re-use a color value throughout a storyboard

I am using storyboard to lay out my iOS app. I want to re-use some colors, and I don't want to re-enter the same hex string multiple times. What is the best way to do this?
You can drag the current color in the color picker (from the bottom left) to the list of swatches as in the screenshot:
You can also use the dropdown for picking a color to use a recent color. The list of recently used colors looks like it keeps 24 of them.

In Xcode Interface Builder - why are the options in the Editor--->Arrange menu (containing Send to Front, Send to Back) often disabled?

What I'm trying to do is simple: bring a label in front of an image within a subview.
But all of the options for arranging are disabled/un-selectable when my label is selected. I find this happens often.
What could be the reason that I'm almost never allowed to change the z-axis of my objects in the Arrange menu? Is it a better practice to avoid this feature and set the order of views programmatically?
It can depend on how you have selected the label (similar to how the label can only be moved with the keyboard when selected in some ways).
A simple alternative is to look at the list of view in the pane on the left and to drag the views up and down to change the order.
It happens sometimes. In that situation, click the view or image you want to send back then you will see little square box at the edges of image from which you can re size your image, Just click on it once and then go to Editor > Arrange > Choose option according your need.

What UI element might this be? (Custom tab-bar?)

http://www.flickr.com/photos/fraserspeirs/4329430635/in/set-72157623224262135/
The above is a link basically showing the form fill view of the numbers app on the iPad. Any idea as to how to achieve such a functionality which sort of looks like our vanilla tabs on Chrome?
You could do it with just buttons set to Custom type and using an image for the background. Then when they are clicked, bring the specific UIView to the front.
To create the tabs from a single image use UIImage's stretchableImageWithLeftCapWidth: topCapHeight:
http://tcninja.blogspot.com/2010/09/ios-adding-stretchable-uiimage-as.html
This will let you dynamically set the image's width in a way that will use the middle of it to fill the new area rather than stretching (and warping) the outer edges.
I would have implemented this with simple UIButtons. All you need to do is to style them (pngs or whatever), and track which one is the current.

Resources