技术控

    今日:122| 主题:49289
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] 一行代码集成今日头条效果

[复制链接]
懵懂的青春╮ 发表于 2016-10-17 10:26:34
111 2

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
导读
  下面这个效果(多视图滑动点击切换)在很多App都有用到.
  我相信大家都写过很多遍了,网上也有大量的Demo,设计思路,大致差不多,代码繁杂程度不禁吐槽.
  笔者自己对这个视图效果进行了封装,几次优化后,目前代码,精简美观,接口简单.
  外界只需要调用一个接口,就能轻松实现这个效果.
  使用方法和系统的tabbarController相似,只需要给HYTabbarView添加对应控制器即可.
   github源码分享: https://github.com/HelloYeah/HYTabbarView
  大家checkout时顺手点个星星,与人为乐,自得其乐.
  HYTabbarView效果图如下
  

一行代码集成今日头条效果-1 (checkout,效果图,控制器,标签,接口)

  HYTabbarView可灵活配置UI界面
  [code]static CGFloat const topBarItemMargin = 15; ///标题之间的间距
static CGFloat const topBarHeight = 40; //顶部标签条的高度[/code]  实现思路详解
  
       
  • 界面分析:分为上下部分,顶部UIScrollView,底部UICollectionView.再实现两部分的联动即可实现 (底部视图相对复杂,占用内存大,底部用UICollectionView实现会比用UIScrollView性能好很多)
       
  • 每一个标题对应一个View视图,View视图交由相应的控制器来管理,代码结构十分清晰.做到不同View上的业务逻辑高聚合.也不会产生耦合性
       
  • 上下两部分的联动,这里是同过KVO实现的,监听当前的selectedIndex,底部视图滚动时,修改selectedIndex的值.在KVO监听的回调方法里让标题居中.
       
  • -其他细节相对简单,大家不看代码都知道如何处理,比如:点击顶部标题,设置按钮选中,切换到对应的CollectionCell等
      
  代码片段:
  1.外界传个控制器和一个标题,添加一个栏目
  [code]//外界传个控制器,添加一个栏目
- (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];
}[/code]   2.KVO监听当前选中View的序号值  
  [code]//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];
    }
}[/code]  3.点击按钮,滚动视图,字体放大动画
  [code]- (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];
    }];
}[/code]  控制器代码如下
  使用方法类似系统的UITabbarController,外界只需直接传入控制器.
  [code]- (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;
}[/code]  文章来自yeliang_new的投稿
友荐云推荐




上一篇:任性切换自定义转场效果的XXTransition
下一篇:如何存储 React 组件的数据
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

47189311 发表于 2016-10-21 18:42:54
垃圾内容,路过为证。
回复 支持 反对

使用道具 举报

mgzcm 发表于 2016-10-22 02:35:35
有图有真相
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表