快速集成App中頂部標題滾動條

前言

目前越來越多的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;
    }];

源碼

點擊這下載源代碼

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容