UITabBar调整

2016-07-21  本文已影响144人  伊蕊飘零

开发中都会遇到tabBar上的图片与文字显示的颜色不对,应该怎么去调整?

调整方式:

第一种.一起设置

//设置UITabBar的TintColor属性
UITabBar.appearance().tintColor = UIColor.orangeColor()
这种方式可以把TabBar上显示的图片与文字的颜色一并设置

第二种.分开设置

设置图片:
设置图片按原来的颜色渲染: 设置tabBarItem的selectedImage属性的时候

//UIImageRenderingMode --> 渲染模式
//设置默认的图片
vc.hildController.tabBarItem.image = UIImage(named: imageName)?.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
//设置选中的图片
vc.tabBarItem.selectedImage = UIImage(named: "\(imageName)_selected")?.imageWithRenderingMode( UIImageRenderingMode.AlwaysOriginal)
也可以在Assets.xcassets目录下,找到对应图片,利用右边控制面板设置其渲染的模式:needpicture
设置文字:可以利用tabBarItem的setTitleTextAttributes方法给title添加属性

//文字颜色的属性
let textColorAttr = [
    NSForegroundColorAttributeName: UIColor.orangeColor()
]
//设置选中文字颜色
vc.tabBarItem.setTitleTextAttributes(textColorAttr, forState: UIControlState.Selected)
可以利用这种方法调整UItabBar上的文字大小:

//设置字体的属性
let textFontAttr = [
    NSFontAttributeName: UIFont.systemFontOfSize(12)
]
vc.tabBarItem.setTitleTextAttributes(textFontAttr, forState: UIControlState.Normal)
注意:后面state是Normal
第2种方式更加灵活,可以应对UITabBar上图片颜色不一样的设计

第三种.和(UI设计师,一定要叫设计师)搞好关系

目的:让她把文字与图标切在一张图片上,如图:

Snip20160721_15.png

这个时候我们只设置tabBarItem的image(或者selectedImage)的话,图片会显示 在上半部分的位置:

Snip20160721_16.png
解决方法:
//设置偏移量,解决把图片放在tabBar中间的问题
childController.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -5, 0)

效果如下:(完美)

Snip20160721_17.png
上一篇下一篇

猜你喜欢

热点阅读