今天接触到TabBar这个控件，感觉好神奇！不知道是干嘛的，正好现在就边学变记录吧。
从模仿开始：
还是先上图，新浪微博的TabBar如下：
实现类似微博的选项卡（Tab Bar）
如图，最下方的TabBar中共有五个选项，分别是首页、消息、加号、发现、我。现在来实现这个效果。
Step1：图标素材
不建议百度（广告太多，而且出来的素材网站质量真心不怎么样）。有问题，想得到比较有价值的回答，去知乎里搜索一下吧。
言归正传，关于素材资源，推荐看看知乎的这个关于素材网站推荐的话题，很棒！
为了模仿得更像，我找了一些比较相似的图标。下载好素材，设置要格式，上传到项目中：
长传图片到APP中
iOS的图标尺寸有点奇怪，我也不太懂，找了一些帖子，都是很老的了。但是幸好还是在简书上找了一篇很不错的文章，关于iOS APP图标的尺寸说明可以点这里。
Step2：添加并设置Tab Bar Controller
今天之前，我还一直不明为什么人家的storyboard里面那么多的Scene，而且还都连接着一个Controller，到底是怎么搞出来的！
直到......刚刚我亲自拖了一个TabBarController到storyboard中......恍然大悟......妈蛋，原来这么方便简单。
在storyboard中删除原来的ViewController，重新拖入一个TabBarController
因为一个TabBarController默认自带了只有两个ViewControllerScene，所以我继续添加了三个。然后分别对每个Scene的TabBarItem进行设置：
对每个TabBarItem进行设置
TabBarController的总视图：
main.storyboard
设置完成后，运行，如图：
模拟器运行图
Step3:解决图标选中时默认蓝色的BUG
这里出现了一个BUG：明明我设置的按下时（_pressed）的图片是橙色才对，但是这里显示的是蓝色。
为什么会有出现这个BUG呢，求助了google。原因是：TabBar的图片默认会被系统渲染，也就是说，当点击这个TarBar的image时，默认会把它渲染蓝色，所以需要调用imageWithRenderingMode这个方法来取消渲染属性：
//取消对TabBarItem的渲染，使用图片的原图
imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal
这里有点麻烦，为每个TabBarItem的Scene建立相应的类，并绑定：
为每个Scene绑定对应的类
Step4：最后一步：设置属性方法
为每个Scene对应的类添加这段代码（即取消渲染，使用原图）
搞定！！！选中TabBar时，图标的颜色正常显示（即显示的原图）：
最终效果
ps:这张图和第一张图有点不一样啊！但是没关系了，大致上就是这个思路了。
今天学的深奥的东西不多，但是又学会了一个很实用的控件，再接再厉吧！感觉自己的设计感开始慢慢在up了！
网友评论