前言
目前越來越多的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;
}];
源碼
點擊這下載源代碼
