1. 首页
  2. iOS开发
  3. iOS仿qq分段控件控制页面之间的切换

iOS仿qq分段控件控制页面之间的切换

我自从成为了一名程序员之后,我就开始研究各种APP,因为我也是开发APP的,嘿嘿,当我用手机qq聊天的时候,我就在研究qq的界面搭建,当然,纯属界面搭建布局,没有涉及任何数据处理,我们开发...

我自从成为了一名程序员之后,我就开始研究各种APP,因为我也是开发APP的,嘿嘿,当我用手机qq聊天的时候,我就在研究qq的界面搭建,当然,纯属界面搭建布局,没有涉及任何数据处理,我们开发一款APP肯定是先要把这个APP的界面搭建起来,然后才能够进行数据的处理及网络请求吧,于是乎,我就对qq界面的分段导航产生了兴趣,并研究它是如何实现的,下面就直接贴上我做好的图吧。让小伙伴有印象哦。注意我鼠标点击的位置哦

iOS仿qq分段控件控制页面之间的切换 iOS开发 第1张

小伙伴,看到了吗?我们就来研究一下分段控件实现页面之间的切换是如何实现的。

我们要理清思路哈:PS思路最重要哦,这是主要的思路哦

①整个界面我们可以看到最上面有个导航栏(UINavigationController),然后导航栏的中间,也就titleView有一个分段控件,所以我么可以理解为在UINavigationControllernavigationItemtitleView加了一个(分段控件)UISegmentedControl然后分段控件有两个段分别为消息、电话,这个步骤我们用代码很好实现吧,是不是So easy。

②我们再看看下下面,当我们点击消息按钮的时候,页面就跳到消息页面;当我们点击电话按钮的时候,页面就跳到电话页面,当然,我这里给页面之间的滑动加了一个动画(animation),我们能够直观的看出来,点击按钮时,页面之间是滑动的,所以我们可以想到,这里使用了滚动视图(UIScrollView),然后把两个表格视图添加到滚动视图上面。当我们点击分段控件的按钮所对应的下标时,让滚动视图滚动到相应的位置。也就是使用了setContentOffset方法。

好了,现在开始我们的步骤吧。

①新建一个工程文件,我们的这个项目需要用到三个页面,一个是主页面视图,两个表格视图,所以我们再创建两个Cocoa Touch Class文件,继承于UITableViewController,我这里不创建xib文件哈,小伙伴们自己看着办。

②宏定义屏幕的宽度和高度,方便调用

  1. #define SCREEN_WIDTH ([[UIScreen mainScreen] bounds].size.width)
  2. #define SCREEN_HEIGHT ([[UIScreen mainScreen] bounds].size.height)


③在ViewController.m中把两个表视图的头文件引入(这里就不用贴代码了哈),并声明如下私有属性


  1. //声明分段控件
  2. @property (nonatomic,strong) UISegmentedControl * segment;
  3. //声明滚动视图
  4. @property (nonatomic,strong) UIScrollView * scroll;


④在ViewController.m中额外写一个方法,用来初始化并设置滚动视图


  1. -(void)initScroll
  2. {
  3.     _scroll = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 44, SCREEN_WIDTH, SCREEN_HEIGHT)];
  4.     //设置滚动视图的内容大小
  5.     _scroll.contentSize = CGSizeMake(SCREEN_WIDTH * 2, SCREEN_HEIGHT);
  6.     //设置滚动视图的代理对象
  7.     _scroll.delegate = self;
  8.     //开启翻页效果
  9.     _scroll.pagingEnabled = YES;
  10.     //这里一定要设置为NO,不然会有bug,因为我们是使用分段控件来控制页面的切换,而没有实现滑动界面实现分段控件的下标进行切换
  11.     _scroll.scrollEnabled = NO;
  12.     //添加到父视图
  13.     [self.view addSubview:_scroll];
  14.    
  15.     //初始化 消息表格视图
  16.    
  17.     TableViewController_Message * tabMessage = [TableViewController_Message  new];
  18.     tabMessage.view.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
  19.    
  20.     //把表格添加到父视图,注意,使用的是addChildViewController
  21.     [self addChildViewController:tabMessage];
  22.     //把表格视图添加到滚动视图
  23.     [_scroll addSubview:tabMessage.view];
  24.    
  25.     //初始化 电话表格视图(注释就不写了哈,和初始化消息表格视图一样)
  26.    
  27.     TableViewController_phone * tabPhone = [TableViewController_phone new];
  28.     tabPhone.view.frame = CGRectMake(SCREEN_WIDTH, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
  29.    
  30.     [self addChildViewController:tabPhone];
  31.     [_scroll addSubview:tabPhone.view];
  32.    
  33. }


⑤在ViewController.m中额外写一个方法,用来初始化并设置分段控件


  1. -(void)initSegment
  2. {
  3.     _segment = [[UISegmentedControl alloc]initWithFrame:CGRectMake(0, 7, 120, 30)];
  4.    
  5.     //小伙伴们,设置分段控件的标题时,一定要注意,是使用insertSegmentWithTitle而不是setTitle哈!
  6.    
  7.     [_segment insertSegmentWithTitle:@"消息" atIndex:0 animated:YES];
  8.     [_segment insertSegmentWithTitle:@"电话" atIndex:1 animated:YES];
  9.     //默认选择下标是0,也就是消息按钮上
  10.     [_segment setSelectedSegmentIndex:0];
  11.     //给分段控件添加事件
  12.     [_segment addTarget:self action:@selector(click_jump:)forControlEvents:UIControlEventValueChanged];
  13.     //把分段控件添加到导航控制器的titleView视图上面
  14.     self.navigationItem.titleView = _segment;
  15.    
  16. }


⑥实现分段控件的点击事件,很简单,一行代码搞定


  1. -(void)click_jump:(UISegmentedControl *)sender
  2. {
  3.     //让滚动视图偏移到指定的位置,小伙伴们,能理解就好,不能理解就慢慢理解哈,或者百度
  4.     [_scroll setContentOffset:CGPointMake(_scroll.bounds.size.width *sender.selectedSegmentIndex, 0)animated:YES];
  5. }


⑦最后在ViewdidLoad方法中调用我们自定义的方法


  1. [self initScroll];
  2.     [self initSegment];


你以为到这里就结束了吗?不信你运行起来看看,看看有什么bug,附图吧,让小伙伴看看效果

iOS仿qq分段控件控制页面之间的切换 iOS开发 第2张

是不是看到了视图整体往上移动啊?那这又是怎么回事呢,是因为iOS 7中,苹果引入了一个新的属性,叫做[UIViewController setEdgesForExtendedLayout:],它的默认值为UIRectEdgeAll。当你的容器是navigation controller时,默认的布局将从navigation bar的顶部开始。这就是为什么所有的UI元素都往上漂移了44pt

所以,解决方案为,在viewDidLoad实现如下代码


  1. //解决视图控制器的view整体上移的问题
  2.     if ([self respondsToSelector:@selector(edgesForExtendedLayout)])
  3.     {
  4.         self.edgesForExtendedLayout = UIRectEdgeNone;
  5.     }


在这篇文章中,我们 使用分段按钮来控制页面之间的切换但是不能滑动页面来进行切换,这篇文章就实现了 滑动页面来进行分段控件按钮的切换,小伙伴们,赶紧点击吧:Segment分页页面2

好了,到现在就大功告成了,小伙伴们,是不是又增长了知识啊。欢迎点赞☟


wanghang
相关推荐
发表评论
访客的头像

留言列表

    还没有留言,还不快点抢沙发?

分享:

支付宝

微信