浅析iOS多视图滑动点击切换的集成

 更新时间:2016年08月12日 10:31:59   投稿:daisy  
本文将大家常常会用到的多视图滑动点击切换视图进行封装,这样在大家使用的时候就很方便了,有需要的可以参考学习,下面一起来看看吧。

前言

多视图滑动点击切换这个视图在很多App都有用到,我对这个View进行了封装,外界只需要调用一个接口,就能实现这个效果,使用方法和系统的tabbarController很相似。

外界只需要调用下面这个接口即可集成.

/**
 * 添加一个子控制器
 */
- (void)addSubItemWithViewController:(UIViewController *)viewController;

HYTabbarView效果图如下

HYTabbarView可灵活配置一屏宽显示多少个标题,以及标题栏的高度,具体看项目需求

#define HYTabbarViewHeight 49 //顶部标签条的高度
#define HYColumn 4  //一屏幕宽显示4个标题

实现思路详解

     1、界面分析:分为上下部分,顶部UIScrollView,底部UICollectionView.再实现两部分的联动即可实现 (底部视图相对复杂,占用内存大,底部用UICollectionView实现会比用UIScrollView性能好很多)

     2、每一个标题对应一个View视图,View视图交由相应的控制器来管理,代码结构十分清晰.做到不同View上的业务逻辑高聚合.也不会产生耦合性

     3、上下两部分的联动,这里是同过KVO实现的,监听当前的selectedIndex,底部视图滚动时,修改selectedIndex的值.在KVO监听的回调方法里让标题居中.

     4、其他细节相对简单,大家不看代码都知道如何处理,比如:点击顶部标题,设置按钮选中,切换到对应的CollectionCell

UI结构示意图

代码片段:

1.外界传个控制器和一个标题,添加一个栏目

//外界传个控制器,添加一个栏目
- (void)addSubItemWithViewController:(UIViewController *)viewController{ 
  
 UIButton * btn = [UIButton buttonWithType:UIButtonTypeCustom];
 [self.tabbar addSubview:btn];
 [self setupBtn:btn withTitle:viewController.title];
 [btn addTarget:self action:@selector(itemSelected:) forControlEvents:UIControlEventTouchUpInside];
 [self.subViewControllers addObject:viewController];
}

2.KVO监听当前选中View的序号值

//viewDidLoad中添加观察者
[self addObserver:self forKeyPath:@"selectedIndex" options:NSKeyValueObservingOptionOld |NSKeyValueObservingOptionNew context:@"scrollToNextItem"];
 
//让标题按钮居中算法
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{
   
 if (context == @"scrollToNextItem") {
  self.prevSelectedIndex = [change[@"old"] integerValue];
  if (self.prevSelectedIndex == self.selectedIndex) {
   return;
  }
  //设置按钮选中
  [self itemSelectedIndex:self.selectedIndex];
  UIButton * btn = self.titles[self.selectedIndex];
  
  //让选中按钮居中
  NSInteger min = HYColumn / 2 ;
  if (_selectedIndex = self.titles.count - min) {
   UIButton * tempBtn = self.titles[self.titles.count - min - 1];
   CGFloat btnX = (HYColumn % 2 ) ? tempBtn.center.x : (tempBtn.center.x + btn.frame.size.width * 0.5) ;
   CGFloat offsetX = _tabbar.center.x - btnX;
   [UIView animateWithDuration:0.25 animations:^{
    _tabbar.contentOffset = CGPointMake(- offsetX, 0);
   }];  
  }else if (_selectedIndex > min && _selectedIndex < self.titles.count - min && self.titles.count > HYColumn ) {
   CGFloat btnX = (HYColumn % 2 ) ? btn.center.x : (btn.center.x - btn.frame.size.width * 0.5) ;
   CGFloat offsetX = _tabbar.center.x - btnX;
   [UIView animateWithDuration:0.25 animations:^{
    _tabbar.contentOffset = CGPointMake( - offsetX, 0);
   }];
  }
 } else {
  [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
 }
} 

控制器代码如下

使用方法类似系统的UITabbarController,外界只需直接传入控制器.

- (void)viewDidLoad {
 [super viewDidLoad];
 [self.view addSubview:self.tabbarView];
}//懒加载- (HYTabbarView *)tabbarView{ if (!_tabbarView) {
  _tabbarView = ({
   HYTabbarView * tabbar = [[HYTabbarView alloc]initWithFrame:CGRectMake(0,30,[UIScreen mainScreen].bounds.size.width,600)];   
   for (NSInteger i = 0; i< 10; i ++) {    
    UIViewController * vc = [[UIViewController alloc]init];
    vc.title = [NSString stringWithFormat:@"第%ld个",i+1];
    [tabbar addSubItemWithViewController:vc];
   }
   tabbar;
  });
 } return _tabbarView;
}

总结

以上就是iOS多视图滑动点击切换的集成的全部内容,希望对大家开发IOS的时候能有所帮助。

相关文章

  • ios使用OC写算法之递归实现八皇后

    ios使用OC写算法之递归实现八皇后

    本篇文章主要介绍了ios使用OC写算法之递归实现八皇后,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • iOS 捕获程序崩溃日志

    iOS 捕获程序崩溃日志

    我们常常会遇到iPhone手机或者iPad平板上运行APP崩溃的问题,有时候打开某个APP,却一下子“闪退”了。对于开发者来说,这个绝对是头疼的问题。那么如何获取到iOS设备崩溃日志呢?这个提供一些简单的方法,共开发者与用户沟通使用。
    2015-06-06
  • iOS tableView实现顶部图片拉伸效果

    iOS tableView实现顶部图片拉伸效果

    这篇文章主要为大家详细介绍了iOS tableView实现顶部图片拉伸效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • iOS开发WebViewJavascriptBridge通讯原理解析

    iOS开发WebViewJavascriptBridge通讯原理解析

    这篇文章主要为大家介绍了iOS开发WebViewJavascriptBridge通讯原理示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • iOS弹幕组件LNDanmakuMaster的具体使用

    iOS弹幕组件LNDanmakuMaster的具体使用

    这篇文章主要介绍了iOS弹幕组件LNDanmakuMaster的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • iOS UIView常见属性方法小结

    iOS UIView常见属性方法小结

    本文通过实例代码给大家详细介绍了iOS UIView常见属性方法,非常不错,需要的朋友参考下吧
    2016-12-12
  • IOS开发之判断两个数组中数据是否相同实例详解

    IOS开发之判断两个数组中数据是否相同实例详解

    这篇文章主要介绍了IOS开发之判断两个数组中数据是否相同实例详解的相关资料,需要的朋友可以参考下
    2017-02-02
  • 详解Xcode 9 设置 iOS无线真机调试

    详解Xcode 9 设置 iOS无线真机调试

    本篇文章主要介绍了详解Xcode 9 设置 iOS无线真机调试,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • iOS10适配之权限Crash问题的完美解决方案

    iOS10适配之权限Crash问题的完美解决方案

    这篇文章主要为大家详细介绍了iOS10适配之权限Crash问题的完美解决方案,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • IOS Xib控件拖拽与页面跳转实例

    IOS Xib控件拖拽与页面跳转实例

    下面小编就为大家分享一篇IOS Xib控件拖拽与页面跳转实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01

最新评论