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