本節主題（Storyboard/模型思想搭建設定頁面）
- 設定（Setting）頁面的搭建(實現效果)
- 開發方式（這裡提供兩種，個人感覺第二種重用性較高，推薦使用。但第一種較為簡單，視開發需求選擇）
- （1）純程式碼 + StoryBoard混合 開發
- （2）純程式碼 + 模型 思想
- 設定頁面的搭建
- 假設你已經搭建出了這個基本框架
《十分鐘搭建App主流框架》
但這畢竟是個空殼，下面讓我們把設定頁面簡單的搭建一下吧 - 注：本文僅僅提供簡略的搭建方式與實現思路，更加詳細的功能需要讀者深入探究。
方式一（純程式碼 + StoryBoard混合 開發）
- 第一步
- 新建StoryBoard檔案，注意：命名與控制器相同
- 第二步
- 往StoryBoard一頓狂拖，你懂的
- 注意點：記得勾選第一個頁面
is Initial View Controller
- 設定TableViewCell的樣式
- 第三步（回到CYXTabBarController.m檔案）
- 這裡只需要改第四個控制器的程式碼,由於是從Storyboard中載入的控制器，與前三個不同。
|
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 |
/** * 新增所有子控制器 */ - (void)setUpAllChildViewController{ // 1.新增第一個控制器 CYXOneViewController *oneVC = [[CYXOneViewController alloc]init]; [self setUpOneChildViewController:oneVC image:[UIImage imageNamed:@"tab_home_icon"] title:@"首頁"]; // 2.新增第2個控制器 CYXTwoViewController *twoVC = [[CYXTwoViewController alloc]init]; [self setUpOneChildViewController:twoVC image:[UIImage imageNamed:@"js"] title:@"技術"]; // 3.新增第3個控制器 CYXThreeViewController *threeVC = [[CYXThreeViewController alloc]init]; [self setUpOneChildViewController:threeVC image:[UIImage imageNamed:@"qw"] title:@"博文"]; // 4.新增第4個控制器 // 4.1 初始化並從Storyboard中載入控制器 UIStoryboard *storyBoard = [UIStoryboard storyboardWithName:@"CYXFourViewController" bundle:nil]; // 4.2 關聯storyBoard與CYXFourViewController CYXFourViewController *fourVC = [storyBoard instantiateInitialViewController]; [self setUpOneChildViewController:fourVC image:[UIImage imageNamed:@"user"] title:@"設定"]; } |
- 設定頁面已經出來了
方式二（純程式碼 + 模型 開發）
- 第一步 （新建模型檔案）
- 第二步 （模型的設計）
- 組模型設計(CYXGroupitem.h)，分析每一組的所有元素：比如有頭部標題，尾部標題，還有若干行Cell
|
1 2 3 4 5 6 7 8 |
@interface CYXGroupItem : NSObject /** 頭部標題 */ @property (strong, nonatomic) NSString * headerTitle; /** 尾部標題 */ @property (strong, nonatomic) NSString * footerTitle; /** 組中的行陣列 */ @property (strong, nonatomic) NSArray * items; @end |
- 行模型的設計(CYXSettingItem.h)，分析每一行的所有元素：比如只有標題
|
1 2 3 4 |
@interface CYXSettingItem : NSObject @property (strong, nonatomic) NSString * title;/**< 標題 */ + (instancetype)itemWithtitle:(NSString *)title;/**< 設定標題值 類方法 */ @end |
- 類方法的實現(CYXSettingItem.m)
|
1 2 3 4 5 |
+ (instancetype)itemWithtitle:(NSString *)title{ CYXSettingItem *item = [[CYXSettingItem alloc]init]; item.title = title; return item; } |
- 第三步 回到設定頁面的控制器(CYXFourViewController.m)
- (1) 實現< UITableViewDataSource >協議的3個方法
- (2) 給對應的模型設定值
|
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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
#import "CYXFourViewController.h" #import "CYXSettingItem.h" #import "CYXGroupItem.h" @interface CYXFourViewController () @property (strong, nonatomic) NSMutableArray * groups;/**< 組陣列 描述TableView有多少組 */ @end @implementation CYXFourViewController /** groups 資料懶載入*/ - (NSMutableArray *)groups { if (!_groups) { _groups = [NSMutableArray array]; } return _groups; } - (instancetype)init{ // 設定tableView的分組樣式為Group樣式 return [self initWithStyle:UITableViewStyleGrouped]; } - (void)viewDidLoad { [super viewDidLoad]; //新增第1組模型 [self setGroup1]; //新增第2組模型 [self setGroup2]; //新增第3組模型 [self setGroup3]; } - (void)setGroup1{ // 建立組模型 CYXGroupItem *group = [[CYXGroupItem alloc]init]; // 建立行模型 CYXSettingItem *item = [CYXSettingItem itemWithtitle:@"我的賬號"]; CYXSettingItem *item1 = [CYXSettingItem itemWithtitle:@"我的收藏"]; // 儲存行模型陣列 group.items = @[item,item1]; // 把組模型儲存到groups陣列 [self.groups addObject:group]; } - (void)setGroup2{ CYXGroupItem *group = [[CYXGroupItem alloc]init]; CYXSettingItem *item = [CYXSettingItem itemWithtitle:@"我去好評"]; CYXSettingItem *item1 = [CYXSettingItem itemWithtitle:@"我去吐槽"]; group.items = @[item,item1]; [self.groups addObject:group]; } - (void)setGroup3{ CYXGroupItem *group = [[CYXGroupItem alloc]init]; CYXSettingItem *item = [CYXSettingItem itemWithtitle:@"關注我們"]; CYXSettingItem *item1 = [CYXSettingItem itemWithtitle:@"關於我們"]; group.items = @[item,item1]; [self.groups addObject:group]; } #pragma mark - TableView的資料來源代理方法實現 /** * 返回有多少組的代理方法 */ - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return self.groups.count; } /** * 返回每組有多少行的代理方法 */ - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { CYXGroupItem *group = self.groups[section]; return group.items.count; } /** * 返回每一行Cell的代理方法 */ - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { // 1 初始化Cell // 1.1 設定Cell的重用標識 static NSString *ID = @"cell"; // 1.2 去快取池中取Cell UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID]; // 1.3 若取不到便建立一個帶重用標識的Cell if (cell == nil) { cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID]; } // 設定Cell右邊的小箭頭 cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; // 2 設定資料 // 2.1 取出組模型 CYXGroupItem *group = self.groups[indexPath.section]; // 2.2 根據組模型取出行（Cell）模型 CYXSettingItem *item = group.items[indexPath.row]; // 2.3 根據行模型的資料賦值 cell.textLabel.text = item.title; return cell; } @end |
實現效果
- 如果你希望使用方式二實現點選Cell的跳轉，需要實現下面的方法，並在裡面呼叫navigationController的pushViewController方法跳轉到你自定義的控制器。
|
1 |
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath; |
看到這裡，如果你是個iOS初學者，應該覺得方式2的實現過於繁瑣，但方式2卻是個一勞永逸的方式。換句話說，如果你用方式2封裝了一個完整的設定頁面的框架，在下一個專案中，再有類似的設定頁面，你便可以直接把這個框架拷貝過去，改少量的程式碼便可以完美相容，肯定比你再重新拖Storyboard要便捷，因此本人是比較推崇這種方式的。