iOS Development Swift tab bar button Uitabbaritem style modification (icon text size, color, etc.)

Recommended dimensions and maximum support dimensions for 1,tabbaritem pictures

Below is the tab bar (Uitabbar) In the tab button icon in 1x, 2x, 3x will not compress the size of the deformation:

@1x: Recommended x 25 (max: 32 x)
@2x: Recommended x 50 (max: x 64)
@3x: Recommended x 75 (max: 144 x 96)

Below is 2x, the left use x 50 of the picture, the right to use the x 64 picture, you can compare:

Import Uikit

Class Maintabviewcontroller:uitabbarcontroller
{
Override Func Viewdidload ()
{
Super.viewdidload ()
Contains two views altogether
Let Qqview = View1viewcontroller ()
Qqview.title = "QQ"
Let Androidview = View1viewcontroller ()
Androidview.title = "Skype"

Declare two view controllers separately
Let QQ = Uinavigationcontroller (Rootviewcontroller:qqview)
Qq.tabBarItem.image = UIImage (named: "QQ")
Let Android = Uinavigationcontroller (Rootviewcontroller:androidview)
Android.tabBarItem.image = UIImage (named: "Skype")
Self.viewcontrollers = [Qq,android]

The default selection is QQ view
Self.selectedindex = 0
}
}

2, modify the color of pictures and text

The picture and text of the default unchecked label is grayed out, and the color selected is blue, and the following is modified to Orange:
(1) Picture and text change at the same time

Change color with picture text
Self.tabBar.tintColor = Uicolor.orangecolor ()

(2) Only change the color of the text

Change text color
Uitabbaritem.appearance (). Settitletextattributes (
[NSForegroundColorAttributeName:UIColor.grayColor ()], forstate:. Normal)
Uitabbaritem.appearance (). Settitletextattributes (
[NSForegroundColorAttributeName:UIColor.orangeColor ()], forstate:. Selected)

(3) Only change the color of the picture

Self.tabBar.tintColor = Uicolor.orangecolor ()
Text color Restore
Uitabbaritem.appearance (). Settitletextattributes (
[NSForegroundColorAttributeName:self.view.tintColor], forstate:. Selected)

3, when selected, when not selected, use a different picture
The default label is selected, not selected are used by the same picture, but the color is different. We can also use two different pictures to represent both states.

Qq.tabbaritem = Uitabbaritem (title: "QQ", Image:uiimage (named: "QQ"),
Selectedimage:uiimage (named: "Qq_active"))

Android.tabbaritem = Uitabbaritem (title: "Android", Image:uiimage (named: "Android"),
Selectedimage:uiimage (named: "Android_active"))

4, use the original color of the picture

Default no matter what the original color, the renderer will render to a single color, although in line with the current trend of flattening, but sometimes we still want to use the image as it was.
The following example, when the label is selected, use the original picture that is not shaded (not selected still render to gray, of course, you can use the original picture)

Qq.tabbaritem =  Uitabbaritem (title: "QQ", Image:uiimage (named: "Qq_color"),
&nbs P;   selectedimage:uiimage (named: "Qq_color")? Imagewithrenderingmode (. alwaysoriginal))
 
Android.tabbaritem =  uitabbaritem (title: "Android", Image:uiimage (named: " Android_color "),
    selectedimage:uiimage (named:" Android_color ")? Imagewithrenderingmode (. alwaysoriginal))