TabBar - 学习记录

今天接触到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了!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容