网易云音乐可爱的tabbar

一直想写点东西,记录自己的成长,可是懒啊。一直都没动。还有就是,我也写不出高深的东西~\(≧▽≦)/~。

前段时间网易云音乐有了新功能(当然离现在有好久了,没办法,懒,现在才想起来写),换皮肤。没错本身就喜欢这个app,挺不错的,(我这是在打广告吗,当然是了,因为喜欢这个app)。

试了试这个功能,皮肤很可爱有木有,爱上了这些动漫主题的皮肤。tabbar 很可爱,那它是怎么做的呢(我怎么知道啊,当然自己来试试写呗,我又没有源码,o(╯□╰)o)。

首先我们看下两张图





第一张是默认主题,第二张就是可爱的主题了。点击的时候松鼠会动,很可爱哦!

那么新建一个工程,创建tabbar controller,像这样



没错,然后就是上图片,我的项目使用的 storyboard,像这样,设置好tabbar item 的图片




然后就成了这样,啊,完全不是我要的那种啊



好吧,用代码,创建自己的tabbar controller 继承与uitabbarcontroller,再设置storyboard里的tabbarcontroller 为这个类。



就这样,设置图片的时候,使用原始图片,不经修改,就能正确显示了,像这样



可是图片后面有个条横线呢,怎么办,我用了个无奈的办法,不知道其他人怎么做,求解答



这个方法当然无奈了,希望有人能说说其他方法。黑线就去掉了,剩下的就是图片和label 的距离,还有文字的颜色了。

在创建一个新的类继承UITabBarItem,



然后在storyboard中设置tabbaritem 为这个类。然后再看



基本完成了。

作为学习的路程,总结下:

1.系统的tabbarcontroller 直接设置图片会被系统修改成灰色,使用[[UIImage imageNamed:@“”] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];使用原始图片,这样就不会变成灰色的图片了。

2.使用uitabbaritem.imageInsets 属性进行图片位置调整

3.对uitabbaritem 使用 [self setTitleTextAttributes:[NSDictionary

dictionaryWithObjectsAndKeys: [UIColor colorWithRed:100.0 / 255.0 green:100.0 / 255.0 blue:100.0 / 255.0 alpha:1],

NSForegroundColorAttributeName, nil] forState:UIControlStateSelected];

[self setTitleTextAttributes:[NSDictionary

dictionaryWithObjectsAndKeys: [UIColor brownColor],

NSForegroundColorAttributeName, nil] forState:UIControlStateNormal];


进行字体的设置。

好吧,算是写完了,其他人又是怎么实现这个的呢?tabbar 那个背景线怎么去掉呢,有其他方法吗,求指导。

经过网友们提醒,去掉黑线的方式

[self.tabBar setShadowImage:[UIImage new]];

同时,导航栏也可以这样去掉,感谢!

demo地址:网易云音乐tabbar demo 


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值