五分钟搭建App设置页面

2019-11-14 18:11:18

字体：大中小

来源：转载

供稿：网友

原文出处：陈燕翔（@燕翔de专注）欢迎分享原创到伯乐头条

本节主题（Storyboard/模型思想搭建设置页面）

设置（Setting）页面的搭建(实现效果)
开发方式（这里提供两种，个人感觉第二种重用性较高，推荐使用。但第一种较为简单，视开发需求选择）
- （1）纯代码 + StoryBoard混合开发
- （2）纯代码 + 模型思想
设置页面的搭建
假设你已经搭建出了这个基本框架
《十分钟搭建App主流框架》
但这毕竟是个空壳，下面让我们把设置页面简单的搭建一下吧
注：本文仅仅提供简略的搭建方式与实现思路，更加详细的功能需要读者深入探究。

方式一（纯代码 + StoryBoard混合开发）

第一步

新建StoryBoard文件，注意：命名与控制器相同

第二步

往StoryBoard一顿狂拖，你懂的

注意点：记得勾选第一个页面 is Initial View Controller

设置TableViewCell的样式

第三步（回到CYXTabBarController.m文件）
这里只需要改第四个控制器的代码,由于是从Storyboard中加载的控制器，与前三个不同。

/**

* 添加所有子控制器

- (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

@interface CYXGroupItem : NSObject

/** 头部标题 */

@PRoperty (strong, nonatomic) NSString * headerTitle;

/** 尾部标题 */

@property (strong, nonatomic) NSString * footerTitle;

/** 组中的行数组 */

@property (strong, nonatomic) NSArray * items;

@end

行模型的设计(CYXSettingItem.h)，分析每一行的所有元素：比如只有标题

@interface CYXSettingItem : NSObject

@property (strong, nonatomic) NSString * title;/**< 标题 */

+ (instancetype)itemWithtitle:(NSString *)title;/**< 设置标题值类方法 */

@end

类方法的实现(CYXSettingItem.m)

+ (instancetype)itemWithtitle:(NSString *)title{

CYXSettingItem *item = [[CYXSettingItem alloc]init];

item.title = title;

return item;

}

第三步回到设置页面的控制器(CYXFourViewController.m)
- (1) 实现< UITableViewDataSource >协议的3个方法
- (2) 给对应的模型设置值

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要便捷，因此本人是比较推崇这种方式的。

全能程序员交流QQ群290551701，群内程序员都是来自，百度、阿里、京东、小米、去哪儿、饿了吗、蓝港等高级程序员，拥有丰富的经验。加入我们，直线沟通技术大牛，最佳的学习环境，了解业内的一手的资讯。如果你想结实大牛，那就加入进来，让大牛带你超神！

上一篇：捏合图片放大缩小与移动

下一篇：RDVTabBarController--可自由定制的iOS底部导航控件