前言
這次推出的控制元件,比較常用,搜尋介面下拉選單
,如果喜歡我的文章,可以關注我微博:吖了個崢,也可以來小碼哥,瞭解下我們的iOS培訓課程。後續還會更新更多內容,有任何問題,歡迎簡書留言
崢吖。。。
Demo效果:
Demo演示:
1.建立下拉選單
1 2 3 |
YZPullDownMenu *menu = [[YZPullDownMenu alloc] init]; menu.frame = CGRectMake(0, 20, YZScreenW, 44); [self.view addSubview:menu]; |
2.設定下拉選單代理
1 |
menu.dataSource = self; |
3.新增所有下拉選單對應的子控制器
為什麼要這樣設計?
,因為每個app對應的下拉選單不確定,所以交給各個開發者決定,下拉選單的介面。
1 2 3 4 5 6 7 8 9 10 |
- (void)setupAllChildViewController { YZAllCourseViewController *allCourse = [[YZAllCourseViewController alloc] init]; YZSortViewController *sort = [[YZSortViewController alloc] init]; YZMoreMenuViewController *moreMenu = [[YZMoreMenuViewController alloc] init]; // 控制器最好作為自己的子控制器 [self addChildViewController:allCourse]; [self addChildViewController:sort]; [self addChildViewController:moreMenu]; } |
4.實現YZPullDownMenu資料來源方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
#pragma mark - YZPullDownMenuDataSource // 返回下拉選單多少列 - (NSInteger)numberOfColsInMenu:(YZPullDownMenu *)pullDownMenu { return 3; } // 返回下拉選單每列按鈕 - (UIButton *)pullDownMenu:(YZPullDownMenu *)pullDownMenu buttonForColAtIndex:(NSInteger)index { YZMenuButton *button = [YZMenuButton buttonWithType:UIButtonTypeCustom]; [button setTitle:_titles[index] forState:UIControlStateNormal]; [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; [button setTitleColor:[UIColor colorWithRed:25 /255.0 green:143/255.0 blue:238/255.0 alpha:1] forState:UIControlStateSelected]; [button setImage:[UIImage imageNamed:@"標籤-向下箭頭"] forState:UIControlStateNormal]; [button setImage:[UIImage imageNamed:@"標籤-向上箭頭"] forState:UIControlStateSelected]; return button; } // 返回下拉選單每列對應的控制器 - (UIViewController *)pullDownMenu:(YZPullDownMenu *)pullDownMenu viewControllerForColAtIndex:(NSInteger)index { return self.childViewControllers[index]; } // 返回下拉選單每列對應的高度 - (CGFloat)pullDownMenu:(YZPullDownMenu *)pullDownMenu heightForColAtIndex:(NSInteger)index { // 第1列 高度 if (index == 0) { return 400; } // 第2列 高度 if (index == 1) { return 180; } // 第3列 高度 return 240; } |
5.【更新選單標題,需要傳送通知給我】
為什麼要這樣設計?
解耦,自己的控制器中就不需要匯入我的框架的標頭檔案了,侵入性不大。
【更新選單標題步驟】
- 1.把
【extern NSString * const YZUpdateMenuTitleNote;】
這行程式碼拷貝到自己控制器中,這個在YZPullDownMenu.h中 - 2.在選中標題的方法中,傳送以下通知
[[NSNotificationCenter defaultCenter] postNotificationName:YZUpdateMenuTitleNote object:self userInfo:@{@”title”:cell.textLabel.text}]; - 3.1 postNotificationName:通知名稱 =>
【YZUpdateMenuTitleNote】
- 3.2 object:誰傳送的通知 =>【self】(當前控制器)
- 3.3 userInfo:選中標題資訊 => 可以多個key,多個value,沒有固定的,因為有些介面,需要勾選很多選項,key可以隨意定義。
- 3.4 底層會自動判定,當前userInfo有多少個value,如果有一個就會直接更新選單標題,有多個就會更新,滿足大部分需求。
- 3.5 發出通知,會自動彈回下拉選單
5.1 可以參考YZSortViewController中程式碼
1 2 3 4 5 6 7 8 9 10 |
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { _selectedCol = indexPath.row; // 選中當前 YZSortCell *cell = [tableView cellForRowAtIndexPath:indexPath]; // 更新選單標題 [[NSNotificationCenter defaultCenter] postNotificationName:YZUpdateMenuTitleNote object:self userInfo:@{@"title":cell.textLabel.text}]; } |
原始碼
點選這下載原始碼