淺析iOS多視圖滑動點擊切換的集成

更新時間：2016年08月12日 10:31:59 投稿：daisy

本文將大家常常會用到的多視圖滑動點擊切換視圖進(jìn)行封裝，這樣在大家使用的時候就很方便了，有需要的可以參考學(xué)習(xí)，下面一起來看看吧。

前言

多視圖滑動點擊切換這個視圖在很多App都有用到，我對這個View進(jìn)行了封裝，外界只需要調(diào)用一個接口，就能實現(xiàn)這個效果，使用方法和系統(tǒng)的tabbarController很相似。

外界只需要調(diào)用下面這個接口即可集成.

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

HYTabbarView效果圖如下

HYTabbarView可靈活配置一屏寬顯示多少個標(biāo)題,以及標(biāo)題欄的高度,具體看項目需求

#define HYTabbarViewHeight 49 //頂部標(biāo)簽條的高度
#define HYColumn 4  //一屏幕寬顯示4個標(biāo)題

實現(xiàn)思路詳解

1、界面分析:分為上下部分,頂部UIScrollView,底部UICollectionView.再實現(xiàn)兩部分的聯(lián)動即可實現(xiàn) (底部視圖相對復(fù)雜,占用內(nèi)存大,底部用UICollectionView實現(xiàn)會比用UIScrollView性能好很多)

2、每一個標(biāo)題對應(yīng)一個View視圖,View視圖交由相應(yīng)的控制器來管理,代碼結(jié)構(gòu)十分清晰.做到不同View上的業(yè)務(wù)邏輯高聚合.也不會產(chǎn)生耦合性

3、上下兩部分的聯(lián)動,這里是同過KVO實現(xiàn)的,監(jiān)聽當(dāng)前的selectedIndex,底部視圖滾動時,修改selectedIndex的值.在KVO監(jiān)聽的回調(diào)方法里讓標(biāo)題居中.

4、其他細(xì)節(jié)相對簡單,大家不看代碼都知道如何處理,比如:點擊頂部標(biāo)題,設(shè)置按鈕選中,切換到對應(yīng)的CollectionCell等

UI結(jié)構(gòu)示意圖

代碼片段:

1.外界傳個控制器和一個標(biāo)題,添加一個欄目

//外界傳個控制器,添加一個欄目
- (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監(jiān)聽當(dāng)前選中View的序號值

//viewDidLoad中添加觀察者
[self addObserver:self forKeyPath:@"selectedIndex" options:NSKeyValueObservingOptionOld |NSKeyValueObservingOptionNew context:@"scrollToNextItem"];
 
//讓標(biāo)題按鈕居中算法
- (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;
  }
  //設(shè)置按鈕選中
  [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];
 }
}

控制器代碼如下

使用方法類似系統(tǒng)的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;
}

總結(jié)

以上就是iOS多視圖滑動點擊切換的集成的全部內(nèi)容，希望對大家開發(fā)IOS的時候能有所幫助。

您可能感興趣的文章: