tab bar 是我们非常常见的控件,拿微信底部的四个按钮来说,我们看起来是4个按钮,但是实际上要上传 8 张图片才可以,4张选中状态的图片,4张没有选中状态的图片。
没有选中的情况的图片,直接拖入 Assets.xcassets 里就可以了。Xcode 会自动给你把图片的颜色变成灰色,不管你原来的颜色是什么。
选中的情况的图片,你上传的是一张绿色的图片,可是 Xcode 在运行后,会变成蓝色的图片,这可不行,那怎么做才能显示设计师设计的颜色呢?也就是,如何才能显示图片本身的颜色(毕竟设计师都给你切好图片了)?
方法如下:
一、修改选中 Item 图片的颜色
在 Render As 选项中选择 Original Image 即可。就是这么简单啦~当然你也可以使用代码来实现这个效果,我更喜欢在 Storyboard 上点击几下,这样速度会快一些。
这个方法我是从 StackOverflow 上找到,下面是来源截图:
这样再运行,图片就会是设计的颜色啦~
但是!!但是还有一个问题,如果这时候你输入字,就像是微信四个按钮底下有字一样,这些字的颜色还是蓝色的!这可怎么办呢?
二、修改选中 Item 的字体颜色
方法一:代码,如下图
方法二:Storyboard 设置,如下图
我更喜欢第二种方法。
注意:别选错了 Scene,是 Tab Bar Controller 根视图,然后设置 User Defined Run Time Attributes 即可。
三、修改没有选中的 Item 的字体的颜色。
如果我想让 App 的效果像咸鱼App 里的这个样子,没有选中的 Item 的字体和选中字体的颜色一样,该怎么做呢?
首页、鱼塘、消息,这些汉字,都是一个颜色的,不管有没有选中。
方法有两个:
方法一:
懒方法不推荐,直接用图片,首页两个字实际上也是图片的一部分。
方法二:
修改字体的属性即可:
func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
//这个颜色可以自定义啦,咸鱼用的是黑色,那我这里设置成淡蓝色看看效果吧~
let tColor = UIColor(red: 145/255, green: 198/255, blue: 232/255, alpha: 1)
UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName:tColor], forState: .Normal)
return true
}
最好是在 AppDelegate.swift 下的 didFinishLaunchingWithOptions
方法里进行操作,不推荐其他地方。
OK,上图,看一下刚刚操作的效果吧~