今天逛微博,看到有人想实现这个效果,我就试了试,感觉效果还行,但是因为临时做的,样子太丑了。
地址: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)的支持都是很好的,又做了代码的适配,所以各个屏幕方向都支持。当然如果想做成通用的可以使用这个思路封装一下。个人感觉这个思路是最容易想到的,第一次写博客,写的不好的地方,大家多多包涵。我的微博@我是叉叉歪