[iOS]關於檢視下拉選單的猜想

weixin_33918357發表於2016-08-11

日常使用App過程中經常看到下拉選單的使用。例如:

阿里郵箱客戶端頂部:

312211-5f5fb08fb899f1c6.png
阿里郵箱客戶端@2x.png

網易郵箱大師客戶端頂部:

312211-1ccbd22530a815ee.png
網易郵箱大師@2x.png

企鵝群:

312211-cc0c662396fe274e.png
QQ群@2x.png

對此做了以下實現方案的思考。

1、給navigationBar新增一個可以展開的檢視。

2、給viewController新增一個可以下拉展開的檢視。

1、給navigationBar新增一個可以展開的檢視。
git:https://github.com/KKLater/UINavigationBar-LATNavigationSpreadViewCategory

1.1演示

312211-65a859d2701274ac.gif
UINavigationBar+LATNavigationSpreadViewCategory.gif

1.2使用

//直接設定navigationBar的spreadView屬性,來設定展開檢視
self.navigationController.navigationBar.spreadView = self.navigationSpreadView;

//可以用過navigationBar的isSpreadViewShow屬性判定檢視是否處於展開的狀態
if (self.navigationController.navigationBar.isSpreadViewShow) {
    //隱藏檢視
    [self.navigationController.navigationBar hideSpreadView];
} else {
    //展開檢視
    [self.navigationController.navigationBar showSpreadView];
}

2、給viewController新增一個可以下拉展開的檢視。

Git:https://github.com/KKLater/UIViewController-LATSpreadViewCategory
2.1演示

2.1.1 普通用法

312211-1555664838d08506.gif
UIViewController+LATSpreadViewCategory1.gif

2.2.2 自定義背景檢視、

2.2使用

2.2.1顯示

直接呼叫顯示方法

/**
 *  spreadView顯示
 *
 *  @param animation 顯示過程block
 *  @param completed 顯示結束block
 */
- (void)showSpreadViewAnimation:(void(^)())animation completed:(void(^)())completed;

可以通過設定animation來執行顯示過程中的動畫,設定completed來設定顯示結束的動畫。例如:

  __weak typeof(self)weakSelf = self;
 [self showSpreadViewAnimation:^{
     weakSelf.titleButton.selected = !weakSelf.isSpreadViewShow;
 } completed:^{
     NSLog(@"isShow");
 }];

2.2.2 隱藏

直接呼叫隱藏方法

/**
 *  spreadView隱藏
 *
 *  @param animation 隱藏過程block
 *  @param completed 隱藏結束block
 */
- (void)hideSpreadViewAnimation:(void(^)())animation completed:(void(^)())completed;

可以通過設定animation來執行消失過程中的動畫,設定completed來設定檢視隱藏結束的動畫。例如:

__weak typeof(self)weakSelf = self;
[self hideSpreadViewAnimation:^{
     weakSelf.titleButton.selected = !weakSelf.isSpreadViewShow;
} completed:^{
     NSLog(@"isHide");
}];

注意:過程中的animation和結束的completed與category內的程式碼是相互獨立的。

2.2.3 獲取當前狀態(顯示或者隱藏)

通過

/**
 *  檢視是否處於展開的狀態
 */
@property (assign, nonatomic, readonly) BOOL isSpreadViewShow;

屬性可以獲取當前展示狀態。

2.2.4 設定spreadView

直接設定屬性@property (strong, nonatomic) UIView *spreadView;來設定spreadView。在設定屬性前,需要將spreadView的各種屬性設定完成。例如frame。

self.navigationSpreadView.frame = CGRectMake(0, 64, CGRectGetWidth(self.view.frame), 100);
self.spreadView = self.navigationSpreadView;

2.2.5 自定義backView

已經預設封裝的backView是一個黑色,alpha為0.3的檢視。未新增點選消失的手勢。

不單獨設定backView,可使用已經封裝的backView,不需要做任何處理。

如果需要設定特殊的backView,可以設定@property (strong, nonatomic) UIView *spreadBackView;屬性來設定。同樣也可以給spreadBackView新增手勢。例如:

//自定義背景圖
UIView *back =  [[UIView alloc] initWithFrame:self.view.bounds];
back.backgroundColor = [UIColor redColor];
self.spreadBackView = back;

//給背景檢視新增手勢
UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tap)];
[self.spreadBackView addGestureRecognizer:tapGesture];

手勢對應呼叫隱藏方法即可。

__weak typeof(self)weakSelf = self;
[self hideSpreadViewAnimation:^{
    weakSelf.titleButton.selected = !weakSelf.isSpreadViewShow;
} completed:^{
    NSLog(@"isShow");
}];

期望:暫時只是新增了spreadView功能。並未設定出現的方向。後期期望新增展開檢視的出現方向。

相關文章