iOS左右滑动标签页导航的设计

ios中左右滑动切换，滑动标签页导航的设计思路，具体内容如下

ios开发中经常（几乎每个app都含有这样的页面吧，几乎！ui设计师也都是这样抄来抄去…..）

demo见github：slidertab

估计很多人都会说，直接用第三方就可以了，很多人封装过，很好用。而且这样的页面用第三方2分钟搞定，省时省力。
笔者也曾用过第三方，但是屡屡出bug。而且不好修改。所以只能自己写，bug少，代码通俗易懂，童叟无欺。

这里介绍一个第三方dlslideview，github地址：dlslideview，目前达到200多个star。但是中间出了一次bug，说是tableview左滑动删除有问题，后来这个原作者更新了版本，修复了这个bug。但是我使用的过程中又发现一个新bug，就是里面放uiscrollview的时候也有问题。

所以此文章不对代码进行封装，仅提供思路和代码。这样才能真正适配光大开发者（授之以鱼不如授之以渔），因为笔者认为每个页面都有不同，我们需要掌握思路，这样万变不离其宗，任何复杂的ui页面都可以用这个思路去写出来。下面我们来实现这样的一个比较时髦的效果，在导航上面加三个tab（其实就是三个button），支持手势切换，支持点击tab切换。

1.理论分析

先观察这个效果图，三个uibutton和一个滑动的uilabel，uilabel给一个动画，让他的frame跟随某一个uibutton就可以了。至于跟踪哪个uibutton，当然是点击到的那个uibutton了，那么没点击只是滑动怎么办？uiscrollview的代理里面获取当前获得焦点的uibutton就可以了。三个uibutton分别对应不同的页面，每个页面可能逻辑很多很复杂，这样的话如果写在一个vc里面就显得臃肿了，我们要想办法分离代码，易于维护，并把逻辑分离，这样的话，就要对应3个viewcontroller。既然支持手势滑动，我们想到的就是uiscrollview，它有分页效果，很6 很87。我们可以把三个vc中的view拿出来，分别贴到uiscrollview上面去（就是addsubview）。理论到此完毕，下面上代码。

2.代码实现

我们要在homeviewcontroller里面放一个uiscrollview，然后初始化三个vc，分别拿到三个vc.view,最后把vc.view贴到uiscrollview上面，实现uiscrollview的分页滑动。

代码：

#import "homeviewcontroller.h"
#import "nearbyviewcontroller.h"
#import "squareviewcontroller.h"
#import "recommendviewcontroller.h"
 
@interface homeviewcontroller ()<uiactionsheetdelegate,uiscrollviewdelegate>{
uibarbuttonitem *leftbutton;
nearbyviewcontroller *nearbyvc;
squareviewcontroller *squarevc;
recommendviewcontroller *recommendvc;
uiscrollview *mainscrollview;
uiview *navview;
uilabel *sliderlabel;
uibutton *nearbybtn;
uibutton *squarebtn;
uibutton *recommendbtn;
}
 
@end
 
@implementation homeviewcontroller
 
//懒加载三个vc
-(nearbyviewcontroller *)nearbyvc{
if (nearbyvc==nil) {
 nearbyvc = [[nearbyviewcontroller alloc]init];
}
return nearbyvc;
}
 
-(squareviewcontroller *)squarevc{
if (squarevc==nil) {
 squarevc = [[squareviewcontroller alloc]init];
 
}
return squarevc;
}
 
 
-(recommendviewcontroller *)recommendvc{
if (recommendvc==nil) {
 recommendvc = [[recommendviewcontroller alloc]init];
 
}
return recommendvc;
}
//初始化三个uibtton和一个滑动的uilabel，命名为sliderlabel，三个btn放倒一个uiview上面navview。
-(void)initui{
 navview = [[uiview alloc]initwithframe:cgrectmake(0, 0, kscreenwidth, 40)];
nearbybtn = [uibutton buttonwithtype:uibuttontypecustom];
nearbybtn.frame = cgrectmake(0, 0, kscreenwidth/4, navview.frame.size.height);
nearbybtn.titlelabel.font = [uifont boldsystemfontofsize:19];
[nearbybtn addtarget:self action:@selector(slideraction:) forcontrolevents:uicontroleventtouchupinside];
[nearbybtn settitle:@"附近" forstate:uicontrolstatenormal];
nearbybtn.tag = 1;
[navview addsubview:nearbybtn];
 
 
squarebtn = [uibutton buttonwithtype:uibuttontypecustom];
squarebtn.frame = cgrectmake(nearbybtn.frame.origin.x+nearbybtn.frame.size.width, nearbybtn.frame.origin.y, kscreenwidth/4, navview.frame.size.height);
squarebtn.titlelabel.font = [uifont systemfontofsize:16];
[squarebtn addtarget:self action:@selector(slideraction:) forcontrolevents:uicontroleventtouchupinside];
[squarebtn settitle:@"广场" forstate:uicontrolstatenormal];
squarebtn.tag = 2;
[navview addsubview:squarebtn];
 
 
recommendbtn = [uibutton buttonwithtype:uibuttontypecustom];
recommendbtn.frame = cgrectmake(squarebtn.frame.origin.x+squarebtn.frame.size.width, squarebtn.frame.origin.y, kscreenwidth/4, navview.frame.size.height);
recommendbtn.titlelabel.font = [uifont systemfontofsize:16];
[recommendbtn addtarget:self action:@selector(slideraction:) forcontrolevents:uicontroleventtouchupinside];
[recommendbtn settitle:@"推荐" forstate:uicontrolstatenormal];
recommendbtn.tag = 3;
[navview addsubview:recommendbtn];
 
 
sliderlabel = [[uilabel alloc]initwithframe:cgrectmake(0, 40-2, kscreenwidth/4, 4)];
sliderlabel.backgroundcolor = kbackgroundcolor;
[navview addsubview:sliderlabel];
self.navigationitem.titleview = navview;
leftbutton = [[uibarbuttonitem alloc]initwithtitle:@"筛选" style:uibarbuttonitemstyleplain target:self action:@selector(leftbarbuttonitempressed:)];
leftbutton.tintcolor = [uicolor whitecolor];
self.navigationitem.leftbarbuttonitem = leftbutton;
 
}
 
-(uibutton *)theseletedbtn{
if (nearbybtn.selected) {
 return nearbybtn;
}else if (squarebtn.selected){
 return squarebtn;
}else if (recommendbtn.selected){
 return recommendbtn;
}else{
 return nil;
 }
}
 
 
- (void)viewdidload {
[super viewdidload];
[self initui];
[self setmainscrollview];
}
 //初始化uiscrollview
-(void)setmainscrollview{
mainscrollview = [[uiscrollview alloc]initwithframe:cgrectmake(0, 0, kscreenwidth, kscreenheight-ktabbarheight)];
mainscrollview.delegate = self;
mainscrollview.backgroundcolor = [uicolor whitecolor];
mainscrollview.pagingenabled = yes;
mainscrollview.showshorizontalscrollindicator = no;
mainscrollview.showsverticalscrollindicator = no;
[self.view addsubview:mainscrollview];
nsarray *views = @[self.nearbyvc.view, self.squarevc.view,self.recommendvc.view];
for (int i = 0; i < views.count; i++){
 //添加背景，把三个vc的view贴到mainscrollview上面
 uiview *pageview = [[uiview alloc]initwithframe:cgrectmake(kscreenwidth * i, 0, mainscrollview.frame.size.width, mainscrollview.frame.size.height)];
 [pageview addsubview:views[i]];
 [mainscrollview addsubview:pageview];
}
mainscrollview.contentsize = cgsizemake(kscreenwidth * (views.count), 0);
}
-(uibutton *)buttonwithtag:(nsinteger)tag{
if (tag==1) {
 return nearbybtn;
}else if (tag==2){
 return squarebtn;
}else if (tag==3){
 return recommendbtn;
}else{
 return nil;
}
}
-(void)slideraction:(uibutton *)sender{
[self slideranimationwithtag:sender.tag];
[uiview animatewithduration:0.3 animations:^{
 mainscrollview.contentoffset = cgpointmake(kscreenwidth * (sender.tag - 1), 0);
} completion:^(bool finished) {
 
}];
 
}
-(void)scrollviewdidscroll:(uiscrollview *)scrollview{
double index_ = scrollview.contentoffset.x / kscreenwidth;
[self slideranimationwithtag:(int)(index_+0.5)+1];
}
#pragma mark - sliderlabel滑动动画
- (void)slideranimationwithtag:(nsinteger)tag{
nearbybtn.selected = no;
squarebtn.selected = no;
recommendbtn.selected = no;
uibutton *sender = [self buttonwithtag:tag];
sender.selected = yes;
//动画
[uiview animatewithduration:0.3 animations:^{
 sliderlabel.frame = cgrectmake(sender.frame.origin.x, sliderlabel.frame.origin.y, sliderlabel.frame.size.width, sliderlabel.frame.size.height);
 
} completion:^(bool finished) {
 nearbybtn.titlelabel.font = [uifont systemfontofsize:16];
 squarebtn.titlelabel.font = [uifont systemfontofsize:16];
 recommendbtn.titlelabel.font = [uifont systemfontofsize:16];
 
 sender.titlelabel.font = [uifont boldsystemfontofsize:19];
}];
 
}
 
@end

好，思路和代码都有了。可以自己去实现了，真的不难，真的不需要用第三方。其实我本可以封装一个给大家用的，但是我没有封装，目的是让每个ios都能对付ui设计师的这样的页面设计！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。