前言
目前越来越多的App都需要顶部标题切换界面效果，并且带有非常炫酷的效果，利用点时间给广大的攻城狮们提供了这样一个框架，集成了当前比较主流的几种效果，网易新闻（字体缩放+颜色渐变），今日头条（颜色填充），喜马拉雅，糗事百科（下标），腾讯视频（蒙版）等。如果喜欢我的文章，可以关注我微博:袁峥Seemygo
Demo简介:
- 只要修改storyboard中，导航控制器根控制器的类型，就能看到不同的效果。
Demo简介.png
框架使用教程：
- 用法跟UITabBarController一样，完全模仿UITabBarController写的,只要把YZDisplayViewController拖入自己工程即可。
- 1.自定义控制器继承YZDisplayViewController
- 2.在viewDidLoad中添加标题对应的控制器，并且把标题保存到对应控制器。
- 3.设置想要的标题效果，具体查看YZDisplayViewController.h文件，有哪些效果。
- 4.使用注意：如果需要全屏显示，并且添加的子控制器是tableViewController，当有
导航控制器或者UITabBarController,需要设置tableView额外滚动区域,详情请看FullChildViewController
实例程序：
1.网易新闻:YZWYViewController
网易新闻.gif
- 1.继承YZDisplayViewController
@interface YZWYViewController : YZDisplayViewController
@end
- 2.在viewDidLoad中添加标题对应的控制器，并且把标题保存到对应控制器。
@implementation YZWYViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// 添加所有子控制器
[self setUpAllViewController];
}
@end
- 3.设置想要的标题效果，具体查看YZDisplayViewController.h文件，有哪些效果。
// 标题渐变
// *推荐方式(设置标题渐变)
[self setUpTitleGradient:^(YZTitleColorGradientStyle *titleColorGradientStyle, UIColor *__autoreleasing *norColor, UIColor *__autoreleasing *selColor) {
}];
// 字体缩放
// 推荐方式 (设置字体缩放)
[self setUpTitleScale:^(CGFloat *titleScale) {
// 字体缩放比例
*titleScale = 1.3;
}];
2.今日头条:YZJRViewController
今日头条标题渐变.gif
- 1.继承YZDisplayViewController
@interface YZJRViewController : YZDisplayViewController
@end
- 2.在viewDidLoad中添加标题对应的控制器，并且把标题保存到对应控制器。
@implementation YZJRViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// 添加所有子控制器
[self setUpAllViewController];
}
@end
- 3.设置想要的标题效果，具体查看YZDisplayViewController.h文件，有哪些效果。
// 模仿网络延迟，0.2秒后，才知道有多少标题
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
// 移除之前所有子控制器
[self.childViewControllers makeObjectsPerformSelector:@selector(removeFromParentViewController)];
// 把对应标题保存到控制器中，并且成为子控制器，才能刷新
// 添加所有新的子控制器
[self setUpAllViewController];
// 注意：必须先确定子控制器
[self refreshDisplay];
});
/* 设置标题渐变：标题填充模式 */
[self setUpTitleGradient:^(YZTitleColorGradientStyle *titleColorGradientStyle, UIColor *__autoreleasing *norColor, UIColor *__autoreleasing *selColor) {
// 标题填充模式
*titleColorGradientStyle = YZTitleColorGradientStyleFill;
}];
3.喜马拉雅:YZXiMaViewController
喜马拉雅全屏展示.gif
- 1.继承YZDisplayViewController
@interface YZXiMaViewController : YZDisplayViewController
@end
- 2.在viewDidLoad中添加标题对应的控制器，并且把标题保存到对应控制器。
@implementation YZXiMaViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// 添加所有子控制器
[self setUpAllViewController];
}
@end
- 3.设置想要的标题效果，具体查看YZDisplayViewController.h文件，有哪些效果。
// 设置标题字体
// 推荐方式
[self setUpTitleEffect:^(UIColor *__autoreleasing *titleScrollViewColor, UIColor *__autoreleasing *norColor, UIColor *__autoreleasing *selColor, UIFont *__autoreleasing *titleFont, CGFloat *titleHeight) {
// 设置标题字体
*titleFont = [UIFont systemFontOfSize:20];
}];
// 推荐方式（设置下标）
[self setUpUnderLineEffect:^(BOOL *isUnderLineDelayScroll, CGFloat *underLineH, UIColor *__autoreleasing *underLineColor) {
// 标题填充模式
*underLineColor = [UIColor redColor];
}];
// 设置全屏显示
// 如果有导航控制器或者tabBarController,需要设置tableView额外滚动区域,详情请看FullChildViewController
self.isfullScreen = YES;
- 4.如果添加的子控制器是tableViewController,给tableView设置底部显示区域
@implementation FullChildViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// 如果有导航控制器，顶部需要添加额外滚动区域
// 添加额外滚动区域 导航条高度 + 标题高度
if (self.navigationController) {
CGFloat navBarH = self.navigationController.navigationBar.bounds.size.height;
// 查看自己标题滚动视图设置的高度，我这里设置为44
CGFloat titleScrollViewH = 44;
self.tableView.contentInset = UIEdgeInsetsMake(navBarH + titleScrollViewH, 0, 0, 0);
}
// 如果有tabBarController，底部需要添加额外滚动区域
// self.tableView.contentInset = UIEdgeInsetsMake(64 + 44, 0, 49, 0);
}
@end
4.腾讯视频:YZTXViewController
腾讯视频.gif
- 1.继承YZDisplayViewController
@interface YZTXViewController : YZDisplayViewController
@end
- 2.在viewDidLoad中添加标题对应的控制器，并且把标题保存到对应控制器。
@implementation YZTXViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// 添加所有子控制器
[self setUpAllViewController];
}
@end
- 3.设置想要的标题效果，具体查看YZDisplayViewController.h文件，有哪些效果。
CGFloat y = self.navigationController?64:0;
CGFloat screenW = [UIScreen mainScreen].bounds.size.width;
CGFloat screenH = [UIScreen mainScreen].bounds.size.height;
// 设置搜索框
CGFloat searchH = 44;
UISearchBar *searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, y, screenW, searchH)];
[self.view addSubview:searchBar];
// 设置整体内容尺寸（包含标题滚动视图和底部内容滚动视图）
[self setUpContentViewFrame:^(UIView *contentView) {
CGFloat contentX = 0;
CGFloat contentY = CGRectGetMaxY(searchBar.frame);
CGFloat contentH = screenH - contentY;
contentView.frame = CGRectMake(contentX, contentY, screenW, contentH);
}];
/****** 标题渐变 ******/
// 推荐方式(设置标题颜色渐变) // 默认RGB样式
[self setUpTitleGradient:^(YZTitleColorGradientStyle *titleColorGradientStyle, UIColor *__autoreleasing *norColor, UIColor *__autoreleasing *selColor) {
*norColor = [UIColor greenColor];
*selColor = [UIColor redColor];
}];
/****** 设置遮盖 ******/
// *推荐方式(设置遮盖)
[self setUpCoverEffect:^(UIColor **coverColor, CGFloat *coverCornerRadius) {
// 设置蒙版颜色
*coverColor = [UIColor colorWithWhite:0.7 alpha:0.4];
// 设置蒙版圆角半径
*coverCornerRadius = 13;
}];
源码
点击这下载源代码
网友评论
ps：我在自己的工程中YZDisplayTitleLabel.h的点击不生效
__autoreleasing *什么时候使用做修饰呀
有些变量有这个 有些变量没有
//网络请求数据
ArticleSciencePageFetcher *fetcher = [[ArticleSciencePageFetcher alloc] init];
fetcher.index = self.tid;
_dataFetcher = fetcher;
[super viewDidLoad];
[self setupUI];
[self setupLayout];
[self setupSearch];
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return self.childViewControllers.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
CNCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"CNCollectionViewCell" forIndexPath:indexPath];
cell.title.text = @(indexPath.item).stringValue;
[cell.contentView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
UIViewController *vc = self.childViewControllers[indexPath.item];
vc.view.frame = CGRectMake(0, 0, kScreenWidth, 400);
[cell.contentView addSubview:vc.view];
return cell;
}
1.设置了titleScrollViewColor为白色为什么还是默认的半透明?
2.使用它创建子控制器默认会创建两次titleLabel, 于是最后把ViewWillAppear中那句[self setUpAllTitle];干掉了,请问会导致什么问题吗..
我现在的做法是，把上面那个方法的添加控制器view的代码，转移到- (void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath方法里面，这样就解决了上面描述的问题，但不知这样改好不好，目前还没有发现，望峥哥指点。
转换为swift后是这样的：
setUpTitleGradient { (titleColorStyle : UnsafeMutablePointer<YZTitleColorGradientStyle>?, norColor : AutoreleasingUnsafeMutablePointer<UIColor?>?, selColor : AutoreleasingUnsafeMutablePointer<UIColor?>?) in
norColor = UIColor.black
selColor = UIColor.orange
}
}
此处报错：不能修改norColor和selColor，因为他们是let变量
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
self.title = @"订单";
[self setUpAllViewController];
}
-(void)setUpAllViewController
{
AllViewController *allVC = [[AllViewController alloc]init];
allVC.title = @"全部";
[self addChildViewController:allVC];
PayViewController *payVC = [[PayViewController alloc]init];
payVC.title = @"待付款";
[self addChildViewController:payVC];
ReceiptViewController *receiptVC = [[ReceiptViewController alloc]init];
receiptVC.title = @"待收货";
[self addChildViewController:receiptVC];
SunOrdViewController *sunOrdVC = [[SunOrdViewController alloc]init];
sunOrdVC.title = @"可晒单";
[self addChildViewController:sunOrdVC];
// 设置标题字体
// 推荐方式
[self setUpTitleEffect:^(UIColor *__autoreleasing *titleScrollViewColor, UIColor *__autoreleasing *norColor, UIColor *__autoreleasing *selColor, UIFont *__autoreleasing *titleFont, CGFloat *titleHeight,CGFloat *titleWidth) {
*norColor = [UIColor colorWithHexString:@"999999"];
*selColor = [UIColor colorWithHexString:@"ff4200"];
*titleFont = [UIFont systemFontOfSize:17];
}];
// 推荐方式（设置下标）
[self setUpUnderLineEffect:^(BOOL *isUnderLineDelayScroll, CGFloat *underLineH, UIColor *__autoreleasing *underLineColor,BOOL *isUnderLineEqualTitleWidth) {
// 标题填充模式
*underLineColor = [UIColor colorWithHexString:@"ff4200"];
}];
[self setUpContentViewFrame:^(UIView *contentView) {
contentView.frame = CGRectMake(0, 64, kScreenW, kScreenH);
}];
}
// 选中标题
[self selectLabel:self.titleLabels[i]];
错误提示
Terminating app due to uncaught exception 'NSRangeException', reason: '*** -[__NSArrayM objectAtIndex:]: index 1 beyond bounds for empty array'
我的QQ：2450862074可否私聊解决一下
#import "SubVC.h"
@interface MainVC ()
@property (nonatomic, strong) NSMutableArray *titleArrM;
@EnD
@Implementation MainVC
- (void)viewDidLoad {
[super viewDidLoad];
self.titleArrM = [[NSMutableArray alloc]initWithArray:@[@"全部",@"待付款",@"待发货",@"待收货"]];
[self setUpAllViewController];
}
- (void)setUpAllViewController
{
UIStoryboard*mainStrorybodard=[UIStoryboard storyboardWithName:@"Main" bundle:nil];
for (NSInteger i=0; i<self.titleArrM.count; i++) {
SubVC*subVc=[mainStrorybodard instantiateViewControllerWithIdentifier:@"SubVC"];
subVc.title=self.titleArrM[i];
[self addChildViewController:subVc];
}
//调用该方法后会创建8个子控制器，需要改啊！
// [self refreshDisplay];
}
[self.titleLabels removeAllObjects];
暂时可解决
UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
NSString *newTitle = cell.textLabel.text;
self.title = newTitle;
}
YZDisplayViewController *controll = [[YZDisplayViewController alloc]init];
controll.selectIndex = 3;
怎么才能修改页面？