Swift - 标签栏按钮UITabBarItem样式修改(图标文字尺寸,颜色等)
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 (最大: 96 x 64)
@3x : 推荐 75 x 75 (最大: 144 x 96)


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


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个页面,然而我的tabbaritem图片可以显示出来了,页面的内容却变成全黑色,原本页面的搜索栏登录按钮什么的也全看不到了。把代码/**/只保留
//图片文字一起变色
self.tabBar.tintColor = UIColor.orangeColor(),这段,界面就全部恢复了,只是tabbaritem又没有图片只有文字(且已变色),所以我也不知道怎么搞了……
想问拖一个TabBarController然后在attributes inspecter里面selected image修改图片为啥不可以显示图片??
android.tabBarItem = UITabBarItem(title: "Android", image: UIImage(named: "android_color"),
selectedImage: UIImage(named: "android_color")?.imageWithRenderingMode(.AlwaysOriginal))
为什么我多次点击UITabBarItem,背景图片就会变小
View1ViewController
自定义?
感谢航哥