仿 iOS11 大導航標題 風格 UI 適用范圍 iOS8 +
前言
iOS11全面應用大標題設計,(豈止于大—— 比逼格更逼格!)bigger than bigger. 突出的大標題 特點:
- 突出的大而粗的標題
- iOS 11標題設計的大且粗,把醒目優先級提到了最高
- 明確整個page核心,結構更明朗,讓用戶減少疑惑 很多設計師把Apple、google或者微軟的用戶界面標準奉若神明,覺得只要是他們說的,都是對的 好看不好看,我相信必定還會引起國內的國產手機UI設計追“大蘋果風”。
如果你們的設計師也已經開始設計了這種大標題導航的UI,并且讓你適配到iOS11以下的iOS10 iOS9 iOS8 那么特別希望 我寫的 這個小demo 能夠幫到你,畢竟維護自家產品一般不可能只限制用戶用iOS11系統吧。。。
效果圖是這樣的:(動圖地址)
![]()
為了使用方便,本人特意寫了類別方法 UIViewController+HFDynamicBar.h
#import <UIKit/UIKit.h>
#import "HFDynamicNavView.h"
@interface UIViewController (HFDynamicBar)
@property (nonatomic, strong) HFDynamicNavView *dynamicNavView;
/**
設置 展示導航大標題樣式 UI
*/
- (void)defaultShowDynamicNav;
/**
展示滾動 導航折疊Animation 就在滾動代理方法 UIScrollViewDelegate 中實現該方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
@param scrollView scrollView
*/
- (void)showDynamicBarAnimationWithScrollView:(UIScrollView *)scrollView;
@end
使用方法 分5步:
[self defaultShowDynamicNav];//導航大標題展示 【1】放在tableView 的上層
[tableView mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(@(self.dynamicNavView.dynamicBottom));/////修改起始高度 【2】這個起始位置相對還是64 make.left.right.bottom.equalTo(self.view); }];
tableView.contentInset = UIEdgeInsetsMake(self.dynamicNavView.bigTitleView.hf_height, 0, 0, 0);////這行代碼必須有 【3】為了連貫聯動效果
[tableView setContentOffset:CGPointMake(self.view.hf_width, - self.dynamicNavView.bigTitleView.hf_height) animated:NO];////這行代碼必須有 【4】為了連貫聯動效果
[self showDynamicBarAnimationWithScrollView:scrollView]; //該代碼選擇實現 需要導航折疊Animation 就要在該代理方法里面實現 不滾動就是默認大標題 【5】選擇性實現
可擴展
暴露的屬性都是可讀寫的,任何需要的地方可直接擴展 (比如添加右邊導航按鈕 。。。) 注意要點:標題居中,約束合法