Swift - 标签栏按钮UITabBarItem样式修改（图标文字尺寸，颜色等）

2015-12-30 发布：hangge 阅读：6198

1，tabBarItem图片的推荐尺寸和最大支持尺寸

下面是标签栏（UITabBar）中tab按钮图标分别在1x、2x、3x下不会压缩变形的尺寸：

@1x : 推荐 25 x 25 (最大: 48 x 32)
@2x : 推荐 50 x 50 (最大: 96 x 64)
@3x : 推荐 75 x 75 (最大: 144 x 96)

下面是在2x下，左边使用50 x 50的图片，右边使用64 x 64的图片，大家可以比较下：

import UIKit

class MainTabViewController:UITabBarController
{
    override func viewDidLoad()
    {
        super.viewDidLoad()

        //背景色设为白色
        self.view.backgroundColor = UIColor.white

        //一共包含了两个视图
        let qqView = QQViewController()
        qqView.title = "QQ"
        let androidView = SkypeViewController()
        androidView.title = "skype"
        
        //分别声明两个视图控制器
        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]
             
        //默认选中的是qq视图
        self.selectedIndex = 0
    }
}

2，修改图片和文字的颜色

默认未选中标签的图片和文字是灰色的，选中的是蓝色的，下面修改成橙色：
（1）图片和文字同时改变

//图片文字一起变色
self.tabBar.tintColor = UIColor.orangeColor()

（2）只改变文字颜色

//改变文字颜色
UITabBarItem.appearance().setTitleTextAttributes(
    [NSForegroundColorAttributeName: UIColor.grayColor()], forState:.Normal)
UITabBarItem.appearance().setTitleTextAttributes(
    [NSForegroundColorAttributeName: UIColor.orangeColor()], forState:.Selected)

（3）只改变图片颜色

self.tabBar.tintColor = UIColor.orangeColor()
//文字颜色还原
UITabBarItem.appearance().setTitleTextAttributes(
    [NSForegroundColorAttributeName: self.view.tintColor], forState:.Selected)

3，选中时、不选中时使用不同图片
默认标签选中、不选中都使用的是同一个图片，只是颜色不同。我们也可使用两张不同图片表示两种状态。

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，使用图片的原始颜色
默认不管原图是什么颜色，渲染器都会将渲染成单一颜色，虽说符合现在扁平化的趋势，但有时我们还是想要使用图片原来的样子。
如下样例，标签选中时使用不着色的原始图片（未选中仍然渲染成灰色，当然也可以使用原始图片）

qq.tabBarItem =  UITabBarItem(title: "QQ", image: UIImage(named: "qq_color"),
    selectedImage: UIImage(named: "qq_color")?.imageWithRenderingMode(.AlwaysOriginal))

android.tabBarItem =  UITabBarItem(title: "Android", image: UIImage(named: "android_color"),
    selectedImage: UIImage(named: "android_color")?.imageWithRenderingMode(.AlwaysOriginal))

4楼

2017-03-22 14:32

noth

我参考了这篇文章，做了4个页面，然而我的tabbaritem图片可以显示出来了，页面的内容却变成全黑色，原本页面的搜索栏登录按钮什么的也全看不到了。把代码／**／只保留
//图片文字一起变色
self.tabBar.tintColor = UIColor.orangeColor()，这段，界面就全部恢复了，只是tabbaritem又没有图片只有文字（且已变色），所以我也不知道怎么搞了……
想问拖一个TabBarController然后在attributes inspecter里面selected image修改图片为啥不可以显示图片？？

站长回复：
可以在MainTabViewController中将背景色设为白色，我文章中补充了相关代码。
3楼

2016-03-17 12:07

hang

android.tabBarItem = UITabBarItem(title: "Android", image: UIImage(named: "android_color"),
selectedImage: UIImage(named: "android_color")?.imageWithRenderingMode(.AlwaysOriginal))
为什么我多次点击UITabBarItem，背景图片就会变小

站长回复：
这个我测试了下没问题啊，所以也不知道你那边是什么情况了。
2楼

2015-12-30 10:01

程

View1ViewController
自定义？

站长回复：
这个是标签切换时对应的页面控制器。我把名字改下，QQViewController，SkypeViewController。会更好理解点。
1楼

2015-12-30 09:30

Young

感谢航哥

站长回复：
不客气