iOS11 仿大標題導航欄

iOS11 SytleTitleController 仿大標題風格導航欄

仿 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】選擇性實現

可擴展

暴露的屬性都是可讀寫的，任何需要的地方可直接擴展（比如添加右邊導航按鈕。。。）注意要點：標題居中，約束合法

posted on 2017-08-13 16:33 ACM_Someone like you 閱讀(1488) 評論(0) 收藏舉報

刷新頁面返回頂部

ACM_Someone like you

iOS11 仿大標題 導航欄

iOS11 SytleTitleController 仿大標題 風格 導航欄

前言

使用方法 分5步：

可擴展

導航

公告

iOS11 仿大標題導航欄

iOS11 SytleTitleController 仿大標題風格導航欄

使用方法分5步：