iOS项目模仿之喜马拉雅（二）—— TabBar实现

基本的项目搭建在这里就不介绍了，相信如果开始想写项目的同学，这些基本功已然是已经掌握了的，就算没有掌握，看看其他教程也很容易上手。下面我们主要记录一些难点问题和解决思路。

首先我们要实现的是最下面的Tab栏，也是一开始就遇到的难题——中间的突出按钮的实现。他山之石可以攻玉，我们先看看别人遇到这种是不是意见提供了解决方案。果不其然，在Github上找到了开源代码(https://github.com/boctor/idev-recipes/tree/master/RaisedCenterTabBar  ) 。这个问题基本的思路是，我们不能自定义一个UITabBarItem（系统没有提供），那么我们就正常的用TabBarController，然后我们将自定义的按钮添加在TabBar上面，覆盖下面的TabBarItem。（Our basic recipe is then to create a subclass of UITabBarController and add a custom UIButton on top of the UITabBar.）根据上面提供的方法，初步完成Tab栏如下：

     

其中遇到的问题值得一提的是：

由于得到的图片时图和文字一起组成的，所以设置的时候没有设置文字（自由图片，下面的文字时图片的一部分），会出现图片整体偏上的感觉，我们希望能够图片在y方向居中。还好系统提供了解决方案, UITabBarItem有一个setImageInsets的方法，我们将上下设置成一样的就可以使图片居中了。

没有解决的问题，看上面的图片对比一下原app，发现tabBar上面多了一条分割线（看右边的图看的更清晰），我们希望去掉这个分割线。仔细观察还有阴影效果的问题，我们没有实现阴影效果。下面我们来解决一下这些问题。

1）如何消除UITabBarController的分割线（边框黑线）

首先是分割线的问题，系统默认的UITabBarController 的UITabBar是有分割线的（UINavigationViewControoller的TabBar也有一条分割线解决方法和UITabBarController差不多），需要自己设置默认图片和阴影图片，分别是调用setBackgroundImage，setBackgroundImage，可将颜色转成图片设置，这样就可以消除分割线。要消除UINavigationViewControoller的分割线还需要调用设置一下setBackIndicatorTransitionMaskImage。

2）如何给TabBar添加阴影效果。

这次先到这里，后面每篇文章尽量多点内容。