一行代码集成今日头条效果

导读:

下面这个效果(多视图滑动点击切换)在很多App都有用到.
我相信大家都写过很多遍了.网上也有大量的Demo,设计思路,大致差不多,但代码繁杂程度不忍直视.
笔者自己对这个视图效果进行了封装,几次优化后,目前代码,精简美观,接口简单.

外界只需要调用一个接口,就能轻松实现这个效果.
使用方法和系统的tabbarController相似,只需要给HYTabbarView添加对应控制器即可.

github源码分享https://github.com/HelloYeah/HYTabbarView.
大家checkout时顺手点个星星,与人为乐，自得其乐.

HYTabbarView效果图如下

1.gif

HYTabbarView可灵活配置UI界面

static CGFloat const topBarItemMargin = 15; ///标题之间的间距
static CGFloat const topBarHeight = 40; //顶部标签条的高度

实现思路详解

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

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

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

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

代码片段:

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

//外界传个控制器,添加一个栏目
- (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];
}   

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 itemSelectedIndex:self.selectedIndex];
        UIButton * btn = self.titles[self.selectedIndex];
        // 计算偏移量
        CGFloat offsetX = btn.center.x - HYScreenW * 0.5;
        if (offsetX < 0) offsetX = 0;
        // 获取最大滚动范围
        CGFloat maxOffsetX = self.tabbar.contentSize.width - HYScreenW;
        if (offsetX > maxOffsetX) offsetX = maxOffsetX;
        // 滚动标题滚动条
        [self.tabbar setContentOffset:CGPointMake(offsetX, 0) animated:YES];
    }
}

点击按钮,滚动视图,字体放大动画

- (void)itemSelectedIndex:(NSInteger)index{
    
    UIButton * preSelectedBtn = self.titles[_preSelectedIndex];
    preSelectedBtn.selected = NO;
    _selectedIndex = index;
    _preSelectedIndex = _selectedIndex;
    UIButton * selectedBtn = self.titles[index];
    selectedBtn.selected = YES;
    [UIView animateWithDuration:0.25 animations:^{
        preSelectedBtn.titleLabel.font = [UIFont systemFontOfSize:15];
        selectedBtn.titleLabel.font = [UIFont systemFontOfSize:18];
    }];
}

控制器代码如下

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

- (void)viewDidLoad {
   
   [super viewDidLoad];

   [self.view addSubview:self.tabbarView];
}
    
//懒加载
- (HYTabbarView *)tabbarView{
    
    if (!_tabbarView) {
        _tabbarView = ({
            
            HYTabbarView * tabbar = [[HYTabbarView alloc]initWithFrame:CGRectMake(0, 64, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height - 64)];
            
            //传入九个控制器,每个控制器分别管理对应的视图
            UIViewController * vc0 = [[UIViewController alloc]init];
            vc0.title = @"推荐";
            [tabbar addSubItemWithViewController:vc0];
    
            UIViewController * vc1 = [[UIViewController alloc]init];
            vc1.title = @"热点";
            [tabbar addSubItemWithViewController:vc1];
            
            UIViewController * vc2 = [[UIViewController alloc]init];
            vc2.title = @"视频";
            [tabbar addSubItemWithViewController:vc2];
            
            UIViewController * vc3 = [[UIViewController alloc]init];
            vc3.title = @"中国好声音";
            [tabbar addSubItemWithViewController:vc3];
            
            UIViewController * vc4 = [[UIViewController alloc]init];
            vc4.title = @"数码";
            [tabbar addSubItemWithViewController:vc4];
            
            UIViewController * vc5 = [[UIViewController alloc]init];
            vc5.title = @"头条号";
            [tabbar addSubItemWithViewController:vc5];
            
            UIViewController * vc6 = [[UIViewController alloc]init];
            vc6.title = @"房产";
            [tabbar addSubItemWithViewController:vc6];
            
            UIViewController * vc7 = [[UIViewController alloc]init];
            vc7.title = @"奥运会";
            [tabbar addSubItemWithViewController:vc7];
            
            UIViewController * vc8 = [[UIViewController alloc]init];
            vc8.title = @"时尚";
            [tabbar addSubItemWithViewController:vc8];

            tabbar;
        });
    }
    return _tabbarView;
}

总结

看完后，有没有觉得很简单，很清晰。
要是觉得还不错，github源码Star：https://github.com/HelloYeah/HYTabbarView