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

　　介绍

这篇文章主要讲解了iOS如何设计左右滑动标签页导航,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

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

iOS开发中经常(几乎每个应用都含有这样的页面吧,几乎! UI设计师也都是这样抄来抄去……)

演示见Github: SliderTab

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

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

这里介绍一个第三方DLSlideView, Github地址:DLSlideView,目前达到200多个明星。但是中间出了一次错误,说是tableView左滑动删除有问题,后来这个原作者更新了版本,修复了这个错误。但是我使用的过程中又发现一个新bug,就是里面放UIScrollView的时候也有问题。

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

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

<强> 1。理论分析

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

<强> 2。代码实现

我们要在HomeViewController里面放一个UIScrollView,然后初始化三个VC,分别拿到三个VC.view,最后把VC。视图贴到UIScrollView上面,实现UIScrollView的分页滑动。

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

代码:

 #进口“HomeViewController.h"
　　#进口“NearbyViewController.h"
　　#进口“SquareViewController.h"
　　#进口“RecommendViewController.h"
　　
　　@ interface HomeViewController () & lt; 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 {
　　如果(nearbyVC==nil) {
　　nearbyVC=[[NearbyViewController alloc] init);
　　}
　　返回nearbyVC;
　　}
　　
　　——(SquareViewController *) squareVC {
　　如果(squareVC==nil) {
　　squareVC=[[SquareViewController alloc] init);
　　
　　}
　　返回squareVC;
　　}
　　
　　
　　——(RecommendViewController *) recommendVC {
　　如果(recommendVC==nil) {
　　recommendVC=[[RecommendViewController alloc] init);
　　
　　}
　　返回recommendVC;
　　}//初始化三个UIBtton和一个滑动的UILabel,命名为sliderLabel,三个btn放倒一个UIView上面navView。
　　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。字体=[UIFont boldSystemFontOfSize: 19);
　　[nearbyBtn addTarget:自我行动:@ selector (sliderAction:) forControlEvents: UIControlEventTouchUpInside);
　　[nearbyBtn setTitle: @"附近,forState UIControlStateNormal):;
　　nearbyBtn。标签=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。字体=[UIFont systemFontOfSize: 16);
　　[squareBtn addTarget:自我行动:@ selector (sliderAction:) forControlEvents: UIControlEventTouchUpInside);
　　[squareBtn setTitle: @"广场“;forState UIControlStateNormal):;
　　squareBtn。标签=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。字体=[UIFont systemFontOfSize: 16);
　　[recommendBtn addTarget:自我行动:@ selector (sliderAction:) forControlEvents: UIControlEventTouchUpInside);
　　[recommendBtn setTitle: @"推荐”;forState UIControlStateNormal):;
　　recommendBtn。标签=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: @"筛选“风格:UIBarButtonItemStylePlain目标:自我行动:@ selector (leftBarButtonItemPressed:)];
　　leftButton。tintColor=[用户界面颜色whiteColor];
　　self.navigationItem。leftBarButtonItem=leftButton;
　　
　　}
　　
　　——(UIButton *) theSeletedBtn {
　　如果(nearbyBtn.selected) {
　　返回nearbyBtn;
　　}else if (squareBtn.selected) {
　　返回squareBtn;
　　}else if (recommendBtn.selected) {
　　返回recommendBtn;
　　其他}{
　　返回nil;
　　}
　　}
　　
　　
　　- (void) viewDidLoad {
　　(超级viewDidLoad);
　　(自我initUI);
　　(自我setMainScrollView);
　　}//初始化UIScrollView
　　- (void) setMainScrollView {
　　mainScrollView=[[UIScrollView alloc] initWithFrame: CGRectMake (0, 0, kScreenWidth kScreenHeight-kTabBarHeight)];
　　mainScrollView.delegate=自我;
　　mainScrollView。null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
iOS如何设计左右滑动标签页导航