I've created a custom tab bar icon and made sure to set the background to transparent. The outline of the icon highlights when selected, but doesn't fill as system icons do.
From the Human Interface Guidelines manual:
Provide two versions of custom tab bar icons. Provide icons for both
the selected and unselected states. The selected icon is often a
filled-in version of the unselected icon, but some designs call for
variations to this approach.
My question is after I created the two versions of the icon as directed, how do you set it?
Using storyboard you need to select your tabViewController and define the tab item properties according your needs
Hope this helps you
Related
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.
I would like to have my tab bar similar to the App Store app (picture below). The active section has a coloured solid icon, and the other non-active sections will have the uncoloured outline icons. How can I switch from outline icon to solid icon depending on if it is selected or not? I would preferably want to accomplish this in interface builder but if thats not possible please explain how to do it in code. I have also provided a picture of my current tab bar. Notice how all of the icons are "outline" icons including the active section icon (I want the active section icon to be "solid"). I do have both the outline and solid icon sets, i'm just not sure how to use them both.
My current tab bar:
App Store tab bar (what I want but with my color not blue):
"You can use storyboard to set selected image of tabbar. I tried and it worked for me. Select the UITabbarItem and add a run-time attribute 'selectedImage', select Type as 'Image' and give the name of your image as its value."
iamge that shows how it's done
Had the same problem, answer from here: Setting Selected Image in Tab Bar Controller with Storyboard
I am planning to make theme color of UI elements in application.
how we show custom color(Golden Color) like Black color in picker menu
is it possible? like we can add custom Property as shown in snapshot
You can add custom color as folow
Select color property(Background color, text color, etc.). A popup is shown from that select "other" option.
A color picker will be opened. Here you can set your custom color by RGB/Hex Code and you can set opacity.
The color will be applied and visible under "Recently Used Colors". This is how you can add custom colors but as far as I know you can't add colors in that default list.
Create a new palette by clicking "New" here:
A new palette "Unnamed" will be created. You can rename that palette by clicking the cog again and choosing "Rename..." Then, you'll need to click on the objects you want to capture the color of, and drag the color of those objects into the color chip area:
Once you've captured the color, you can even rename it something that indicates where it's normally used, providing more information to the recipient than just the color.
source
As of Xcode 9 you can add colors to your asset catalog.
Open your asset catalog, click the + and add a color set.
Click on the color that was created and you can name it and set the color using the inspector.
Thereafter that color shows up in storyboard color chooses in the area called Named Colors.
To achieve this follow these steps
*) In the Project navigator, select the asset catalog, click the Add button (+) at the bottom. In the pop-up menu, choose the type of asset set to create
*) then you'll see the color asset on storyboard.
Cheers :)
The app that I am writing uses a navigation bar and I need to put a standard 'Add' (plus) icon as a bar button item. These standard icons are described here and their use is described here, but the documentation only describes how to reference the icons from code (objective-c or swift).
None of the resources I can find on the subject covers how to specify the image source through the Attributes inspector, where I would set the icon source if it was based on a custom image. Is it not possible to reference default system icons through the Attributes inspector for the Bar Button Item?
It is not intuitive, but the Xcode Attributes inspector has a setting for the Bar Button Item, called 'System Item' (or 'Identifier' in older Xcode versions). When selected it reveals a drop-down menu with identifiers for the system icons. Select the relevant identifier and the Bar Button Item icon will change to the matching icon.
In Xcode 6, you now have the ability to set the icon for a tab item for its selected and unselected states. Please see the descriptions in the images below:
and
The only problem is that the image for the SELECTED states does not show. It just shows blank. Anyone else have this issue? Please see the screenshots below of the results:
and
Thanks!!!
So the way to go around this:
Set the tab with the default, unselected icon image you want to use in the "BAR ITEM" section in the Attributes Inspector:
Click on the Identity Inspector, and under "USER DEFINED RUNTIME ATTRIBUTES," click the + to add a new value.
KEYPATH: selectedImage (IT HAS TO BE THIS!!!)
TYPE: Image
VALUE: The name of your selected/highlighted icon image. I use Images.xcassets for my image assets.
Run your app. You'll notice that the image changes to the selected (not just highlighted version of it.
Works like a charm.
I want to add some info about the colored tab icon.
To change tab selection color:
Select the tabItem.
Set "tintColor" attribute with your prefer color.