前言
目前越來越多的App都需要頂部標(biāo)題切換界面效果秒裕，并且?guī)в蟹浅ｌ趴岬男Ч┪命c(diǎn)時(shí)間給廣大的攻城獅們提供了這樣一個(gè)框架火俄，集成了當(dāng)前比較主流的幾種效果巢墅，網(wǎng)易新聞（字體縮放+顏色漸變）架谎，今日頭條（顏色填充）炸宵，喜馬拉雅，糗事百科（下標(biāo)）谷扣，騰訊視頻（蒙版）等土全。如果喜歡我的文章筛婉，可以關(guān)注我微博:袁崢Seemygo
Demo簡介:
- 只要修改storyboard中禾蚕，導(dǎo)航控制器根控制器的類型，就能看到不同的效果。
Demo簡介.png
框架使用教程：
- 用法跟UITabBarController一樣扼褪，完全模仿UITabBarController寫的,只要把YZDisplayViewController拖入自己工程即可玄坦。
- 1.自定義控制器繼承YZDisplayViewController
- 2.在viewDidLoad中添加標(biāo)題對應(yīng)的控制器敬尺，并且把標(biāo)題保存到對應(yīng)控制器肢执。
- 3.設(shè)置想要的標(biāo)題效果，具體查看YZDisplayViewController.h文件惰匙，有哪些效果技掏。
- 4.使用注意：如果需要全屏顯示，并且添加的子控制器是tableViewController项鬼，當(dāng)有
導(dǎo)航控制器或者UITabBarController,需要設(shè)置tableView額外滾動區(qū)域,詳情請看FullChildViewController
實(shí)例程序：
1.網(wǎng)易新聞:YZWYViewController
網(wǎng)易新聞.gif
- 1.繼承YZDisplayViewController
@interface YZWYViewController : YZDisplayViewController
@end
- 2.在viewDidLoad中添加標(biāo)題對應(yīng)的控制器哑梳，并且把標(biāo)題保存到對應(yīng)控制器。
@implementation YZWYViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// 添加所有子控制器
[self setUpAllViewController];
}
@end
- 3.設(shè)置想要的標(biāo)題效果秃臣，具體查看YZDisplayViewController.h文件涧衙，有哪些效果哪工。
// 標(biāo)題漸變
// *推薦方式(設(shè)置標(biāo)題漸變)
[self setUpTitleGradient:^(YZTitleColorGradientStyle *titleColorGradientStyle, UIColor *__autoreleasing *norColor, UIColor *__autoreleasing *selColor) {
}];
// 字體縮放
// 推薦方式 (設(shè)置字體縮放)
[self setUpTitleScale:^(CGFloat *titleScale) {
// 字體縮放比例
*titleScale = 1.3;
}];
2.今日頭條:YZJRViewController
今日頭條標(biāo)題漸變.gif
- 1.繼承YZDisplayViewController
@interface YZJRViewController : YZDisplayViewController
@end
- 2.在viewDidLoad中添加標(biāo)題對應(yīng)的控制器奥此，并且把標(biāo)題保存到對應(yīng)控制器。
@implementation YZJRViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// 添加所有子控制器
[self setUpAllViewController];
}
@end
- 3.設(shè)置想要的標(biāo)題效果雁比，具體查看YZDisplayViewController.h文件稚虎，有哪些效果。
// 模仿網(wǎng)絡(luò)延遲偎捎，0.2秒后蠢终，才知道有多少標(biāo)題
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
// 移除之前所有子控制器
[self.childViewControllers makeObjectsPerformSelector:@selector(removeFromParentViewController)];
// 把對應(yīng)標(biāo)題保存到控制器中，并且成為子控制器茴她，才能刷新
// 添加所有新的子控制器
[self setUpAllViewController];
// 注意：必須先確定子控制器
[self refreshDisplay];
});
/* 設(shè)置標(biāo)題漸變：標(biāo)題填充模式 */
[self setUpTitleGradient:^(YZTitleColorGradientStyle *titleColorGradientStyle, UIColor *__autoreleasing *norColor, UIColor *__autoreleasing *selColor) {
// 標(biāo)題填充模式
*titleColorGradientStyle = YZTitleColorGradientStyleFill;
}];
3.喜馬拉雅:YZXiMaViewController
喜馬拉雅全屏展示.gif
- 1.繼承YZDisplayViewController
@interface YZXiMaViewController : YZDisplayViewController
@end
- 2.在viewDidLoad中添加標(biāo)題對應(yīng)的控制器寻拂，并且把標(biāo)題保存到對應(yīng)控制器。
@implementation YZXiMaViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// 添加所有子控制器
[self setUpAllViewController];
}
@end
- 3.設(shè)置想要的標(biāo)題效果丈牢，具體查看YZDisplayViewController.h文件祭钉，有哪些效果。
// 設(shè)置標(biāo)題字體
// 推薦方式
[self setUpTitleEffect:^(UIColor *__autoreleasing *titleScrollViewColor, UIColor *__autoreleasing *norColor, UIColor *__autoreleasing *selColor, UIFont *__autoreleasing *titleFont, CGFloat *titleHeight) {
// 設(shè)置標(biāo)題字體
*titleFont = [UIFont systemFontOfSize:20];
}];
// 推薦方式（設(shè)置下標(biāo)）
[self setUpUnderLineEffect:^(BOOL *isUnderLineDelayScroll, CGFloat *underLineH, UIColor *__autoreleasing *underLineColor) {
// 標(biāo)題填充模式
*underLineColor = [UIColor redColor];
}];
// 設(shè)置全屏顯示
// 如果有導(dǎo)航控制器或者tabBarController,需要設(shè)置tableView額外滾動區(qū)域,詳情請看FullChildViewController
self.isfullScreen = YES;
- 4.如果添加的子控制器是tableViewController,給tableView設(shè)置底部顯示區(qū)域
@implementation FullChildViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// 如果有導(dǎo)航控制器己沛，頂部需要添加額外滾動區(qū)域
// 添加額外滾動區(qū)域 導(dǎo)航條高度 + 標(biāo)題高度
if (self.navigationController) {
CGFloat navBarH = self.navigationController.navigationBar.bounds.size.height;
// 查看自己標(biāo)題滾動視圖設(shè)置的高度慌核，我這里設(shè)置為44
CGFloat titleScrollViewH = 44;
self.tableView.contentInset = UIEdgeInsetsMake(navBarH + titleScrollViewH, 0, 0, 0);
}
// 如果有tabBarController，底部需要添加額外滾動區(qū)域
// self.tableView.contentInset = UIEdgeInsetsMake(64 + 44, 0, 49, 0);
}
@end
4.騰訊視頻:YZTXViewController
騰訊視頻.gif
- 1.繼承YZDisplayViewController
@interface YZTXViewController : YZDisplayViewController
@end
- 2.在viewDidLoad中添加標(biāo)題對應(yīng)的控制器申尼，并且把標(biāo)題保存到對應(yīng)控制器垮卓。
@implementation YZTXViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// 添加所有子控制器
[self setUpAllViewController];
}
@end
- 3.設(shè)置想要的標(biāo)題效果，具體查看YZDisplayViewController.h文件师幕，有哪些效果粟按。
CGFloat y = self.navigationController?64:0;
CGFloat screenW = [UIScreen mainScreen].bounds.size.width;
CGFloat screenH = [UIScreen mainScreen].bounds.size.height;
// 設(shè)置搜索框
CGFloat searchH = 44;
UISearchBar *searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, y, screenW, searchH)];
[self.view addSubview:searchBar];
// 設(shè)置整體內(nèi)容尺寸（包含標(biāo)題滾動視圖和底部內(nèi)容滾動視圖）
[self setUpContentViewFrame:^(UIView *contentView) {
CGFloat contentX = 0;
CGFloat contentY = CGRectGetMaxY(searchBar.frame);
CGFloat contentH = screenH - contentY;
contentView.frame = CGRectMake(contentX, contentY, screenW, contentH);
}];
/****** 標(biāo)題漸變 ******/
// 推薦方式(設(shè)置標(biāo)題顏色漸變) // 默認(rèn)RGB樣式
[self setUpTitleGradient:^(YZTitleColorGradientStyle *titleColorGradientStyle, UIColor *__autoreleasing *norColor, UIColor *__autoreleasing *selColor) {
*norColor = [UIColor greenColor];
*selColor = [UIColor redColor];
}];
/****** 設(shè)置遮蓋 ******/
// *推薦方式(設(shè)置遮蓋)
[self setUpCoverEffect:^(UIColor **coverColor, CGFloat *coverCornerRadius) {
// 設(shè)置蒙版顏色
*coverColor = [UIColor colorWithWhite:0.7 alpha:0.4];
// 設(shè)置蒙版圓角半徑
*coverCornerRadius = 13;
}];
源碼
點(diǎn)擊這下載源代碼
