如何封装一个属于自己的多视图联动控制器

类似如下效果图中的多视图联动经常会使用到,很多人往往是采用第三方来实现,但往往会存在大量的冗余代码,所以完全可以封装一个属于自己的多视图联动控制器。知道实现原理和大概逻辑,之后UI怎么变化,只要自己手动调节就行。
本文请参照demo看,否则不容易看懂。demo下载地址:https://github.com/ZhengYaWei1992/ZWMultiVC

效果图

先说一下思路,类似以上这种效果,最好的建议是通过UICollectionView来实现不同视图界面的切花,因为UICollectionView的复用,所以在性能上会有很好的提升。首先要将上面标题栏视图和下面主界面分开来,分别封装一个类ZWPageTitleView和ZWPageContentView类。每个类分别对外提供合适的接口,重点逻辑在于主视图界面和标题栏的同步问题上。
看一下外部是如何调用实现类似界面的,之后再大概分析一下ZWPageTitleView和ZWPageContentView类内部逻辑实现。
ZWPageTitleView初始化和布局:

NSArray *titles = [NSArray arrayWithObjects:@"推荐",@"游戏",@"娱乐相关",@"趣玩", nil];
    _pageTitleView = [[ZWPageTitleView alloc]initWithFrame:CGRectMake(0, 64, self.view.frame.size.width, 40) withTitles:titles];
    _pageTitleView.delegate = self;
    _pageTitleView.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:self.pageTitleView];

ZWPageContentView初始化和布局:

CGRect contentFrame = CGRectMake(0, 64 + 40, self.view.frame.size.width, self.view.frame.size.height - 64 - 40);
    NSMutableArray *childVCs = [NSMutableArray array];
    for (NSInteger i = 0; i < 4; i++) {
        if (i == 0) {
            ViewController1 *vc = [[ViewController1 alloc]init];
            [childVCs addObject:vc];
        }else if(i == 1){
            ViewController2 *vc = [[ViewController2 alloc]init];
            [childVCs addObject:vc];
        }else if(i == 2){
            ViewController3 *vc = [[ViewController3 alloc]init];
            [childVCs addObject:vc];
        }else if(i == 3){
            ViewController4 *vc = [[ViewController4 alloc]init];
            [childVCs addObject:vc];
        }
        
    }
    _pageContentView = [[ZWPageContentView alloc]initWithFrame:contentFrame withChildVCs:childVCs parentViewController:self];
    _pageContentView.delegate = self;
    [self.view addSubview:_pageContentView];

ZWPageTitleView和ZWPageContentView分别对外提供一个代理方法,在ZWPageTitleViewDelegate代理方法中调用ZWPageContentView类中的方法,在ZWPageContentViewDelegate代理方法中调用ZWPageTitleView;类中的相关方法,如此一来就能很好的实现标题和主视图同步显示的逻辑,思路也很清晰。

#pragma mark-ZWPageTitleViewDelegate
- (void)pageTitltView:(ZWPageTitleView *)pageTitleView didSelectedIndex:(NSInteger)index{
    [self.pageContentView setCurrentIndex:index];
}
#pragma mark - ZWPageContentViewDelegate
- (void)pageContentView:(ZWPageContentView *)pageContenView progress:(CGFloat)progress sourceIndex:(NSInteger)sourceIndex targetIndex:(NSInteger)targetIndex{
    [self.pageTitleView setTitltWithProgress:progress sourceIndex:sourceIndex targetIndex:targetIndex];
}

接下来分析一下ZWPageTitleView中实现的逻辑代码。要知道ZWPageTitleView继承与UIView,UIView上放置一个scrollView,每个标题是一个UILabel,UILabel的父视图是UIScrollView。之所以这样做,因为可能屏幕宽度不足够显示标题个数。先看ZWPageTitleView中每个标题对应的点击事件。

- (void)titleLabelClick:(UITapGestureRecognizer *)tap{
    //1.获取当前点击label
    UILabel *currentLabel = (UILabel *)tap.view;
    //2.获取之前label
    UILabel *oldLabel = self.titlesLabel[_currentIndex];
    //3.切换文字颜色
    currentLabel.textColor = self.selectedTitleColor;
    oldLabel.textColor = self.titleColor;
    //4.保存最新label 的下标
    self.currentIndex = currentLabel.tag;
    //5.滚动条位置变化
    CGFloat scrollLineX = currentLabel.tag * _scrollLine.frame.size.width;
    [UIView animateWithDuration:0.5 animations:^{
        CGRect scrollLineFrame = self.scrollLine.frame;
        scrollLineFrame.origin.x = scrollLineX;
        self.scrollLine.frame = scrollLineFrame;
    }];
    //6.通知代理做事情
    if ([self.delegate respondsToSelector:@selector(pageTitltView:didSelectedIndex:)]) {
        [self.delegate pageTitltView:self didSelectedIndex:self.currentIndex];
    }
}

ZWPageTitleView中对外暴露的方法,主要是在ZWPageContentViewDelegate代理方法中调用。

#pragma mark - 对外暴露的方法
- (void)setTitltWithProgress:(CGFloat)progress sourceIndex:(NSInteger)sourceIndex targetIndex:(NSInteger)targetIndex{
    //1.取出sourceLabel和targetLabel
    UILabel *sourceLabel = (UILabel *)self.titlesLabel[sourceIndex];
    UILabel *targetLabel = (UILabel *)self.titlesLabel[targetIndex];
    //2.处理滑动的逻辑
    CGFloat moveTotalX = targetLabel.frame.origin.x - sourceLabel.frame.origin.x;
    CGFloat moveX = moveTotalX * progress;
    CGRect scrollLineFrame = self.scrollLine.frame;
    scrollLineFrame.origin.x = sourceLabel.frame.origin.x + moveX;
    self.scrollLine.frame = scrollLineFrame;
     
    // 4.记录最新的index
    _currentIndex = targetIndex;
}

ZWPageTitleView中的主要业务逻辑就这些,接下来分析一些ZWPageContentView中的主要逻辑代码。这个类同样是会继承与UIView,这个UIView上面放置的是UICollectionView,主要是在在UICollectionView上大做手脚。下面的代码是scrollView滚动的时候调用的逻辑代码。

#pragma mark-scrollView的代理方法
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    self.isForbidScrollDelegate = NO;
    //每次开始滑动的时候,都会先设置self.startOffsetX
    self.startOffsetX = scrollView.contentOffset.x;
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    //0.判断是否是点击事件
    if (self.isForbidScrollDelegate == YES){
        return;
    }
    //1.获取需要的数据 (滚动的进度、sourceIndex(颜色渐变)、targetIndex(要判断左滑还是右滑))
    CGFloat progress = 0;
    NSInteger sourceIndex = 0;
    NSInteger targetIndex = 0;
    //2.判断是左还是右滑动
    CGFloat currentOffsetX = scrollView.contentOffset.x;
    CGFloat scrollViewW = scrollView.bounds.size.width;
    if (currentOffsetX > self.startOffsetX) {//左滑
        //1.计算progress
        progress = currentOffsetX / scrollViewW - (NSInteger)(currentOffsetX / scrollViewW);
        //2.计算sourceIndex
        sourceIndex = (NSInteger)(currentOffsetX / scrollViewW);
        //3.计算currentIndex
        targetIndex = sourceIndex + 1;
        //防止越界
        if (targetIndex >= _childVCs.count) {
            targetIndex = _childVCs.count - 1;
        }
        //4.如果完全滑过去
        if (currentOffsetX - self.startOffsetX == scrollViewW) {
            progress = 1;
            targetIndex = sourceIndex;
        }
    }else{//右滑
        //1.计算progress
        progress = 1 - (currentOffsetX / scrollViewW - (NSInteger)(currentOffsetX / scrollViewW));
        //2.计算currentIndex
        targetIndex = (NSInteger)(currentOffsetX / scrollViewW);
        //3.计算sourceIndex
        sourceIndex = targetIndex + 1;
        if (targetIndex >= _childVCs.count) {
            targetIndex = _childVCs.count - 1;
        }
    }
    
    //3.将progress/sourceIndex/targetIndex传递给progress
    //print("progress\(progress) sourceIndex\(sourceIndex) targetIndex \(targetIndex)")
    if ([self.delegate respondsToSelector:@selector(pageContentView:progress:sourceIndex:targetIndex:)]) {
        [self.delegate pageContentView:self progress:progress sourceIndex:sourceIndex targetIndex:targetIndex];
    }
}

对外暴露的方法。和上面类似,这个对外暴露的方法主要是在ZWPageTitleViewDelegate代理方法中调用。

- (void)setCurrentIndex:(NSInteger)currentIndex{
    // 1.记录需要进制执行代理方法
    _isForbidScrollDelegate = YES;
    // 2.滚动正确的位置
    CGFloat offSetX = (CGFloat)currentIndex * self.collectionView.frame.size.width;
    [self.collectionView setContentOffset:CGPointMake(offSetX, 0) animated:YES];
}

这里有一点非常有必要说明的,关于_isForbidScrollDelegate属性(是否禁止scrollView的代理),如果为Yes则不执行scrollViewDidScroll代理方法。如果不这样做这个判断,在点击每个主界面对应的标题的时候,会调用ZWPageTitleViewDelegate代理方法,继而会调用ZWPageContentView对外暴露的方法,而对外暴露的方法中 [self.collectionView setContentOffset:CGPointMake(offSetX, 0) animated:YES];本身就可以调节UICollectionView的ContentOffset,使标题和主视图界面一一对应。重点来了:但是执行 [self.collectionView setContentOffset:CGPointMake(offSetX, 0) animated:YES];又会调用scrollViewDidScroll:方法,产生不必要的方法调用。所以要多加_isForbidScrollDelegate属性。 就说这些,具体看代码吧。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 222,104评论 6 515
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,816评论 3 399
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 168,697评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,836评论 1 298
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,851评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,441评论 1 310
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,992评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,899评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,457评论 1 318
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,529评论 3 341
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,664评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,346评论 5 350
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,025评论 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,511评论 0 24
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,611评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 49,081评论 3 377
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,675评论 2 359

推荐阅读更多精彩内容