神刀安全网

iOS快速自定义APP顶部标题滚动条

今天继续说仿喵播APP,聊一聊【自定义APP顶部标题滚动条】,用的是YZDisplayViewController,这是袁峥Seemygo大牛写的一个极其轻便简洁的小框架。快速集成App中顶部标题滚动条这是大神介绍YZDisplayViewController的原文。

下面是Gif展示:

iOS快速自定义APP顶部标题滚动条
顶部标题滚动效果.gif

现在来说说具体的使用:
1、去Github下载YZDisplayViewController解压打开YZDisplayViewController-master文件夹,将其中的YZDisplayViewController文件夹直接拖入你的项目中。
2、新建一个控制器,继承自YZDisplayerViewController

@interface JFDisplayViewController : YZDisplayViewController

3、添加你所需要的子控制器

- (void)viewDidLoad {     [super viewDidLoad];      [self setupAllChildCotroller]; }  // 添加子控制器 - (void)setupAllChildCotroller {     JFViewController *jfVC = [[JFViewController alloc] init];     jfVC.title = @"热门";     self.liveStreamVC = [[JFLiveStreamViewController alloc] init];     _liveStreamVC.title = @"直播拉流测试";     UIViewController *temp_2 = [[UIViewController alloc] init];     temp_2.view.backgroundColor = [UIColor yellowColor];     temp_2.title = @"关注";      [self addChildViewController:jfVC];     [self addChildViewController:_liveStreamVC];     [self addChildViewController:temp_2]; }

然后运行你的项目,就会看到神奇的效果啦。
作者只是写了几个标题样式,如网易新闻,喜马拉雅,腾讯视频,今日头条样式等。这四种样式在作者的简书中都有介绍。有时候这几个标题展示样式不足以满足项目需求,比如上面Gif展示的样式。

实际上图展示的滚动标题栏,控制器是隐藏了navigationBar,然后修改了源码中YZNavBarH值为0,然后把标题YZTitleScrollViewH背景高度设置成64,如果不做修改标题栏会显示在navigationBar下面,也就是YZNavBarH默认值为64时展示的效果。

下面来具体说说对源码做的修改:

  • 在YZDisplayHeader.h中修改

1、修改标题栏背景View的起始Y值:YZNavBarH值,默认是64;准确的说这个值指的是标题栏也就是导航条的Y值。

// 导航条高度 static CGFloat const YZNavBarH = 64;

2、修改标题栏背景View的高度:YZTitleScrollViewH值默认是 44,如果想实现上图展示的效果,隐藏navigationBar,YZTitleScrollViewH就需要设置成64。

// 标题滚动视图的高度 static CGFloat const YZTitleScrollViewH = 44;

3、修改源码,自定义标题下划线的长度,下划线的Y值和标题栏的背景色,下面是我自己填加到源码YZDisplayHeader.h中的代码。方便日后使用。因为作者没有提供相应的接口,所以我就按照作者的代码风格添加 了静态常量和宏定义。

/****** JFUnderLineW_additional增加下划线的长度******/ static CGFloat const JFUnderLineW_additional = 10;  /****** 改变下划线的Y值,JFunderLineY_additional值越大下划线的Y值越小******/ static CGFloat const JFunderLineY_additional = 5;  /****** 改变标题label的Y值,jf_labelY值越大,标题label的Y值越大******/ static CGFloat const jf_labelY = 8;  /****** 顶部标题的背景颜色******/ #define JFRGBColor [UIColor colorWithRed:(253)/255.0 green:(95)/255.0 blue:(153)/255.0 alpha:1.0]

4、修改YZDisplayViewController.m文件源码:
看下面修改后的代码,将self.underLine.yz_y值减去之前自定义的静态常量JFunderLineY_additional;将self.underLine.yz_width的值加上之前定义的静态常量JFunderLineY_additional。

// 设置下标的位置 - (void)setUpUnderLine:(UILabel *)label {     // 获取文字尺寸     CGRect titleBounds = [label.text boundingRectWithSize:CGSizeMake(MAXFLOAT, 0) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:self.titleFont} context:nil];      CGFloat underLineH = _underLineH?_underLineH:YZUnderLineH;     self.underLine.yz_y = label.yz_height - underLineH - JFunderLineY_additional;     self.underLine.yz_height = underLineH;      /***** 项目需要修改了yz_width + 10 ******/     // 最开始不需要动画     if (self.underLine.yz_x == 0) {         if (_isUnderLineEqualTitleWidth) {             self.underLine.yz_width = titleBounds.size.width + JFUnderLineW_additional;         } else {             self.underLine.yz_width = label.yz_width + JFUnderLineW_additional;         }         self.underLine.yz_centerX = label.yz_centerX;         return;     }      // 点击时候需要动画     [UIView animateWithDuration:0.25 animations:^{         if (_isUnderLineEqualTitleWidth) {             self.underLine.yz_width = titleBounds.size.width + JFUnderLineW_additional;         } else {             self.underLine.yz_width = label.yz_width + JFUnderLineW_additional;         }         self.underLine.yz_centerX = label.yz_centerX;     }];   }

如果在标题被点击或滑动完成后想做些事情,可以监听一下通知:

// 标题被点击或者内容滚动完成,会发出这个通知,监听这个通知,可以做自己想要做的事情,比如加载数据 static NSString * const YZDisplayViewClickOrScrollDidFinshNote = @"YZDisplayViewClickOrScrollDidFinshNote";

如果想在重复点击标题后做事情,比如刷新数据,可以监以下通知:

// 重复点击通知 static NSString * const YZDisplayViewRepeatClickTitleNote = @"YZDisplayViewRepeatClickTitleNote";

标题的字体大小、字体颜色、标签的位子、下划线长度、位置;滑动时字体的颜色渐变样式等,都可以自定义。注意:下滑线和字体缩放不能同时使用,如果你使用了也会抛出异常提示。
这里就简单的介绍了我的思路,仅供参考。根据自己的项目需求修改YZDisplayViewController源码,源码很简单,作者的简书中也介绍的很清楚。今天就先聊这么多!
这里有我修改后的YZDisplayViewController源码,需要的可以下载使用。

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » iOS快速自定义APP顶部标题滚动条

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址