iOS中左右滑动切换,滑动标签页导航的设计思路

来源:互联网 发布:ubuntu 关闭访客模式 编辑:程序博客网 时间:2024/04/29 22:50

iOS中左右滑动切换,滑动标签页导航的设计思路

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

demo见Github:https://github.com/zhengwenming/SliderTab

滑动切换

估计很多人都会说,直接用第三方就可以了,很多人封装过,很好用。而且这样的页面用第三方2分钟搞定,省时省力。 
笔者也曾用过第三方,但是屡屡出bug。而且不好修改。所以只能自己写,bug少,代码通俗易懂,童叟无欺。 
这里介绍一个第三方DLSlideView,Github地址: 
https://github.com/agdsdl/DLSlideView,目前达到200多个star。但是中间出了一次bug,说是tableView左滑动删除有问题,后来这个原作者更新了版本,修复了这个bug。但是我使用的过程中又发现一个新bug,就是里面放UIScrollView的时候也有问题。

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

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设计师的这样的页面设计!!

0 0
原创粉丝点击
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防,我是瞎子 老人腰闪了该怎么办 腰闪了站不起来怎么办 又怕冷又爱上火怎么办 肝上多发小囊肿怎么办 5岁宝宝咳嗽厉害怎么办 5岁宝宝咳嗽有痰怎么办 生川乌外贴中毒怎么办 7个月宝宝流鼻涕怎么办 脸上皮肤毛孔粗大有黑头怎么办 嗓子长了个囊肿怎么办 食管胃粘膜异位怎么办 狗狗肿瘤破了怎么办 婴儿胃食道反流怎么办 小儿胃食道反流怎么办 放疗后咳嗽痰多怎么办 胃息肉是恶性的怎么办 老是胃疼,胃胀怎么办 吃完饭之后胃胀怎么办 胃痛胃胀怎么办能缓解 胃胀不消化怎么办快速解决 便秘肛裂了好痛怎么办 胃消化慢还便秘怎么办 11个月婴儿便秘怎么办 80多岁老人便秘怎么办 狗狗便秘拉不出来怎么办 2个月幼犬便秘怎么办 狗狗便秘怎么办吃什么 痔疮又痛又痒怎么办 痔疮肉球特别痒怎么办 长了个小痔疮怎么办 产后4天没大便怎么办 7个月孕妇痔疮怎么办 运动完恶心想吐怎么办 跑步后恶心想吐怎么办 肠子不蠕动严重便秘怎么办 怀孕八个月严重便秘怎么办 怀孕七个月便秘严重怎么办 怀孕两个月便秘严重怎么办 3岁宝宝上火便秘怎么办 7个月的宝宝贫血怎么办 9个月婴儿贫血怎么办