请选择 进入手机版 | 继续访问电脑版

技术控

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

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

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

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

一行代码集成今日头条效果-1-技术控-UIViewController,视图,控制器,HYTabbarView,title

  HYTabbarView可灵活配置UI界面
  1. static CGFloat const topBarItemMargin = 15; ///标题之间的间距
  2. static CGFloat const topBarHeight = 40; //顶部标签条的高度
复制代码
实现思路详解
  
       
  • 界面分析:分为上下部分,顶部UIScrollView,底部UICollectionView.再实现两部分的联动即可实现 (底部视图相对复杂,占用内存大,底部用UICollectionView实现会比用UIScrollView性能好很多)
       
  • 每一个标题对应一个View视图,View视图交由相应的控制器来管理,代码结构十分清晰.做到不同View上的业务逻辑高聚合.也不会产生耦合性
       
  • 上下两部分的联动,这里是同过KVO实现的,监听当前的selectedIndex,底部视图滚动时,修改selectedIndex的值.在KVO监听的回调方法里让标题居中.
       
  • -其他细节相对简单,大家不看代码都知道如何处理,比如:点击顶部标题,设置按钮选中,切换到对应的CollectionCell等
      
  代码片段:
  1.外界传个控制器和一个标题,添加一个栏目
  1. //外界传个控制器,添加一个栏目
  2. - (void)addSubItemWithViewController:(UIViewController *)viewController{
  3.    
  4.     UIButton * btn = [UIButton buttonWithType:UIButtonTypeCustom];
  5.     [self.tabbar addSubview:btn];
  6.     [self setupBtn:btn withTitle:viewController.title];
  7.     [btn addTarget:self action:@selector(itemSelected:) forControlEvents:UIControlEventTouchUpInside];
  8.     [self.subViewControllers addObject:viewController];
  9. }
复制代码
  2.KVO监听当前选中View的序号值  
  1. //viewDidLoad中添加观察者
  2. [self addObserver:self forKeyPath:@"selectedIndex" options:NSKeyValueObservingOptionOld |NSKeyValueObservingOptionNew context:@"scrollToNextItem"];
  3. //让标题按钮居中算法
  4. - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
  5. {
  6.     if (context == @"scrollToNextItem") {
  7.         //设置按钮选中
  8.         [self itemSelectedIndex:self.selectedIndex];
  9.         UIButton * btn = self.titles[self.selectedIndex];
  10.         // 计算偏移量
  11.         CGFloat offsetX = btn.center.x - HYScreenW * 0.5;
  12.         if (offsetX < 0) offsetX = 0;
  13.         // 获取最大滚动范围
  14.         CGFloat maxOffsetX = self.tabbar.contentSize.width - HYScreenW;
  15.         if (offsetX > maxOffsetX) offsetX = maxOffsetX;
  16.         // 滚动标题滚动条
  17.         [self.tabbar setContentOffset:CGPointMake(offsetX, 0) animated:YES];
  18.     }
  19. }
复制代码
3.点击按钮,滚动视图,字体放大动画
  1. - (void)itemSelectedIndex:(NSInteger)index{
  2.    
  3.     UIButton * preSelectedBtn = self.titles[_preSelectedIndex];
  4.     preSelectedBtn.selected = NO;
  5.     _selectedIndex = index;
  6.     _preSelectedIndex = _selectedIndex;
  7.     UIButton * selectedBtn = self.titles[index];
  8.     selectedBtn.selected = YES;
  9.     [UIView animateWithDuration:0.25 animations:^{
  10.         preSelectedBtn.titleLabel.font = [UIFont systemFontOfSize:15];
  11.         selectedBtn.titleLabel.font = [UIFont systemFontOfSize:18];
  12.     }];
  13. }
复制代码
控制器代码如下
  使用方法类似系统的UITabbarController,外界只需直接传入控制器.
  1. - (void)viewDidLoad {
  2.    
  3.    [super viewDidLoad];
  4.    [self.view addSubview:self.tabbarView];
  5. }
  6. //懒加载
  7. - (HYTabbarView *)tabbarView{
  8.    
  9.     if (!_tabbarView) {
  10.         _tabbarView = ({
  11.             
  12.             HYTabbarView * tabbar = [[HYTabbarView alloc]initWithFrame:CGRectMake(0, 64, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height - 64)];
  13.             
  14.             //传入九个控制器,每个控制器分别管理对应的视图
  15.             UIViewController * vc0 = [[UIViewController alloc]init];
  16.             vc0.title = @"推荐";
  17.             [tabbar addSubItemWithViewController:vc0];
  18.    
  19.             UIViewController * vc1 = [[UIViewController alloc]init];
  20.             vc1.title = @"热点";
  21.             [tabbar addSubItemWithViewController:vc1];
  22.             
  23.             UIViewController * vc2 = [[UIViewController alloc]init];
  24.             vc2.title = @"视频";
  25.             [tabbar addSubItemWithViewController:vc2];
  26.             
  27.             UIViewController * vc3 = [[UIViewController alloc]init];
  28.             vc3.title = @"中国好声音";
  29.             [tabbar addSubItemWithViewController:vc3];
  30.             
  31.             UIViewController * vc4 = [[UIViewController alloc]init];
  32.             vc4.title = @"数码";
  33.             [tabbar addSubItemWithViewController:vc4];
  34.             
  35.             UIViewController * vc5 = [[UIViewController alloc]init];
  36.             vc5.title = @"头条号";
  37.             [tabbar addSubItemWithViewController:vc5];
  38.             
  39.             UIViewController * vc6 = [[UIViewController alloc]init];
  40.             vc6.title = @"房产";
  41.             [tabbar addSubItemWithViewController:vc6];
  42.             
  43.             UIViewController * vc7 = [[UIViewController alloc]init];
  44.             vc7.title = @"奥运会";
  45.             [tabbar addSubItemWithViewController:vc7];
  46.             
  47.             UIViewController * vc8 = [[UIViewController alloc]init];
  48.             vc8.title = @"时尚";
  49.             [tabbar addSubItemWithViewController:vc8];
  50.             tabbar;
  51.         });
  52.     }
  53.     return _tabbarView;
  54. }
复制代码
文章来自yeliang_new的投稿
47189311 发表于 2016-10-21 18:42:54
垃圾内容,路过为证。
回复 支持 反对

使用道具 举报

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

使用道具 举报

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/c.CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表