今天逛微博，看到有人想实现这个效果，我就试了试，感觉效果还行，但是因为临时做的，样子太丑了。

地址：https://github.com/xxycode/wxTabBar

最终实现效果图：

思路就是scrollView结合containerView来实现，支持横屏效果。

现在进入正题

首先，打开Xcode，新建一个项目

这样的：

然后往ViewController上面拖一个View，用来当做tabBar，并加上如图约束：

然后再拖入一个scrollView，加上如图约束

接下来，就要开始使用containerView了，这里以四个ViewController为例，在scrollView里面并排放入四个containerView，containerView在右边控件框的靠下边部分：

你会发现，每拖一个containerView，都会多出一个连线，这个连线连着一个ViewController，拖完四个之后就是这样了：

然后新建四个类，分别是FirstViewController、SecondViewController、ThirdViewController、FouthViewController：

并在故事板中给四个ViewController分别关联这四个类：

为了等下能看到比较明显的效果，给四个ViewController的view加上不同的背景色，并插入一个Lable显示自己的名字：

然后分别给四个containerView加上约束，他们的大小要相对于View，这样才能确定scrollView的contentSize，个人觉得这个AutoLayout的一个坑，初学者容易遇到错误，就是无法确定scrollView的contentSize，点击第一个containerView，按下control键把线往viewController的view上拉，选择Equal Widths和Equal Height，但是这里我们不希望containView的和viewController的高度是一样的，因为我们下面还有一个tabBar，所以要比view的高度少44，我们在右边的约束栏里面的高度约束那里填入-44：

然后分别给其他三个containerView加上同样的大小约束，接下来，给这四个containerView加上位置约束，如图：

但是这里要注意最后一个（最右边的一个），还要加上右边的约束才行，加了右边的约束，AutoLayout就能确定scrollView的contentSize了，不然会报错的。如图：

好了加好约束了，我们运行一下，效果如下图：

已经有点样子了，哈哈，现在设置一下scrollView的一些属性：

然后给tabBar加上四个按钮，给它们设置选中时候的样式，设置tag值 1~4

然后上约束

然后把每个按钮的位置约束中的左边间距约束拉进代码里面：

我代码里面的命名可以无视，随便命名的，为了让四个按钮等间距并且在屏幕旋转的时候如此，加上下面代码

代码应该比较好理解（按钮的宽度是46）。

然后给按钮拉一个动作进代码，四个按钮可以绑定到一个方法上：

把scrollView拖进来，叫做containerScrollView，申明一个全局的变量selectedIndex用来记录当前选中的是第几个viewController

现在加上下面代码

这里如果吧scrollView的setContentOffset的第二个参数换成true，点击按钮的时候就会有动画切换效果，这里遵循微信的效果，我就默认是不用动画。

然后就是scrollView滚动的时候也要改变tabBar按钮的状态以及刚开始选中第一个按钮，这里就要实现scrollView的代理了

加上下面代码：

至此，整个效果就得到了简单的实现，由于使用了AutoLayout，对各个设备（包括iPad）的支持都是很好的，又做了代码的适配，所以各个屏幕方向都支持。当然如果想做成通用的可以使用这个思路封装一下。个人感觉这个思路是最容易想到的，第一次写博客，写的不好的地方，大家多多包涵。我的微博@我是叉叉歪