正文

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

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0713

这篇文章主要为大家详细介绍了iOS左右滑动标签页导航的设计思路，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

demo见github：slidertab

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

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

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

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

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

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的分页滑动。

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

代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
#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设计师的这样的页面设计！

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

原文链接：https://blog.csdn.net/IT_ZGC/article/details/52211851