iOS UI进阶-1.3网易彩票设置模块

概述

基本上,每一款APP都有相应的设置模块。怎么设置才能更灵活和通用呢,这也是大家一直思考的。下面说说在网易彩票中,设置模块的设置思想。

基本上有三种方案:

  1. static cell(呆板,完全没有动态)
  2. 使用代码,条件判断逐个编写(麻烦,代码冗长)
  3. 使用plist加载(能够动态配置跳转控制器,不能配置请求代码;由于使用字符串配置跳转控制器名,容易出现运行时错误)
  4. 使用模型封装每个cell的数据(item),使用Class作为跳转控制器属性(这样就能经过编译检测)

最终我们使用的是第4种方式来实现,效果:

实现

思路:

1.创建cell的数据模型group(头部标题、尾部标题及items)

2.创建cell的数据模型item(图标、标题、block、跳转到控制器)

3.自定义cell,根据不同的item模型创建不同的cell外观(箭头、开头、文本等)

4.自定一个基类控制器,实现

  • 加载解析group和item数据
  • 根据group数据创建table的样式(组底部、组尾部)
  • 加载自定义的cell
  • 如果item类是跳转类型的,需要配置跳转目标控制器
  • 如果item类是代码执行型的,需要配置要执行的block代码

5.设置界面实现基类控制器,只需要简单配置要显示的item

1.创建cell的数据模型group

MJSettingGroup.h

#import <Foundation/Foundation.h>

@interface MJSettingGroup : NSObject

/** 头部标题*/
@property (nonatomic, copy) NSString *header;
/** 尾部标题*/
@property (nonatomic, copy) NSString *footer;
/** 存放这组行的所有的模型*/
@property (nonatomic, copy) NSArray *items;

@end

2.创建cell的数据模型item

    

单元Cell中有好几种类型:

  • 开头
  • 箭头
  • 文本

因此,为了在界面上更容易区别,我们分别为这几个类型定义一个模型。当前,这几种类型的中,左边显示图标和不显示图标都是一样的,因此,定义一个单元Cell模型基类,其它都继续于这个基类。

(基类)MJSettingItem.h

#import <Foundation/Foundation.h>

typedef void (^MJSettingItemOption)();

@interface MJSettingItem : NSObject

/**    图标    */
@property (nonatomic, copy) NSString *icon;
/**    标题    */
@property (nonatomic, copy) NSString *title;
/**    点击cell要做的事情    */
@property (nonatomic, copy) MJSettingItemOption option;

+(instancetype)itemWithIcon:(NSString *)icon title:(NSString *)title;
+(instancetype)itemWithTitle:(NSString *)title;
@end

(基类)MJSettingItem.m

#import "MJSettingItem.h"

@implementation MJSettingItem

+(instancetype)itemWithTitle:(NSString *)title
{
    return [self itemWithIcon:nil title:title];
}

+(instancetype)itemWithIcon:(NSString *)icon title:(NSString *)title
{
    MJSettingItem *item = [[self alloc] init];
    item.icon = icon;
    item.title = title;
    return item;
}

@end

MJSettingLabelItem(文本)、MJSettingSwitchItem(开关)、MJSettingArrowItem(箭头)都分别继承MJMJSettingItem

MJSettingArrowItem.h

#import "MJSettingItem.h"

@interface MJSettingArrowItem : MJSettingItem
/**
 *  点击这行cell需要跳转的控制器
 */
@property (nonatomic, assign) Class destVcClass;

+ (instancetype)itemWithIcon:(NSString *)icon title:(NSString *)title destVcClass:(Class)destVcClass;
+ (instancetype)itemWithTitle:(NSString *)title destVcClass:(Class)destVcClass;

@end

MJSettingArrowItem.m

#import "MJSettingArrowItem.h"

@implementation MJSettingArrowItem

+ (instancetype)itemWithIcon:(NSString *)icon title:(NSString *)title destVcClass:(Class)destVcClass
{
    MJSettingArrowItem *item = [self itemWithIcon:icon title:title];
    item.destVcClass = destVcClass;
    return item;
}

+ (instancetype)itemWithTitle:(NSString *)title destVcClass:(Class)destVcClass
{
    return [self itemWithIcon:nil title:title destVcClass:destVcClass];
}

@end

3.自定义cell

根据不同的item模型创建不同的cell外观(箭头、开头、文本等)

4.自定一个基类控制器,实现

  • 加载解析group和item数据
  • 根据group数据创建table的样式(组底部、组尾部)
  • 根据不同的item模型创建不同的cell外观(箭头、开头、文本等)
  • 如果item类是跳转类型的,需要配置跳转目标控制器
  • 如果item类是代码执行型的,需要配置要执行的block代码

MJBaseSettingViewController.h

#import <UIKit/UIKit.h>

@interface MJBaseSettingViewController : UITableViewController
@property (nonatomic, strong) NSMutableArray *data;
@end
时间: 2024-10-08 11:21:57

iOS UI进阶-1.3网易彩票设置模块的相关文章

iOS UI进阶-1.4网易彩票设置模块二

产品推荐 产品推荐使用的是UICollectionView控件,UICollectionView 和 UICollectionViewController 类是iOS6 新引进的API,用于展示集合视图,布局更加灵活,可实现多列布局,用法类似于UITableView 和 UITableViewController 类. 思路: 模型:建立一个MJProduct模型,存放产品的相关信息(标题.图标) 视图:创建xib,继承于UICollectionViewCell 控制器:创建MJProductV

iOS UI进阶-1.0网易彩票框架搭建

仿网易彩票,最终要做成的效果如下: 一.分层搭建 1.新建一个项目,Lottery.只支持7.1以上坚屏. 2.将素材全部图片全部拉到相应的文件夹里. 3.选中Lottery--右键Show in Finder ,在Lottery文件夹下新建一个Classes,并分别分层成MVC文件夹. 4.把Classes拉到Lottery项目里,整个框架结构如 二.UI搭建 分层好之后,接下来,我们搭建一下界面.使用Storyboard进行搭建. 1.点击Main.storyboard,删除原来的界面,分别

iOS UI进阶-1.2网易彩票常见设置

Navigation导航设置 为了统一管理导航控制器,需要自定义导航控制器MJNavigationController,继承于UINavigationController.分别设置5个Navigation的控制器Class为此控制器. 白色状态栏 统一背景头部导航栏 设置所有Navigation导航栏字体颜色 二级页面隐藏底部导航条 1.白色状态栏.使用application管理状态栏 设置不使用控制器控制状态栏 在MJAppDelegate中设置: - (BOOL)application:(U

iOS UI进阶-1.1网易彩票框架搭建-代码重构

在上一篇中,我们基本已经把整个框架都搭建出来了,下面进行代码重构一下. 思路: 导航按钮,按下时,会变灰,那是系统自带了,通过自定义UIButton,实现按下按钮立即切换效果. MJTabBarController管得太多了,只需要传图片过去,即创建好一个TabBar. 通过代理实现底部tabbar的切换. 一.自定义UIButton,继承自UIButton.MJTabBarButton.m #import "MJTabBarButton.h" @implementation MJTa

[iOS UI进阶 - 2.0] 彩票Demo v1.0

A.需求 1.模仿"网易彩票"做出有5个导航页面和相应功能的Demo 2.v1.0 版本搭建基本框架 B.搭建基本框架 1.拖入TaBarController,5个NavigationController和对应的5个UIViewController 2.配置图标和启动画面 AppIcon直接拖入图片 LaunchImage在Xcode6中需要先更改启动图使用图库的图片,而不是LaunchImage.xib 2.引入图片包 4. 按照模块分类代码包 3.底部导航--自定义TabBar (

[iOS UI进阶 - 2.3] 彩票Demo v1.3

A.需求 真机调试 "关于”模块 存储开关状态 打电话.发短信 应用评分 打开其他应用 cell 在iOS6 和 iOS7的适配 block的循环引用 屏幕适配 code source:  code source: https://github.com/hellovoidworld/HelloLottery B.iOS真机测试小功能 (1)打电话 a.方法1 最简单最直接的方式:直接跳到拨号界面 1 NSURL *url = [NSURL URLWithString:@"tel://1

[iOS UI进阶 - 2.1] 彩票Demo v1.1

A.需求 1.优化项目设置 2.自定义导航栏标题按钮 3.多版本处理 4.iOS6和iOS7的适配 5.设置按钮背景 6.设置值UIBarButtonItem样式 B.实现 1.项目配置 (1)程序启动期间隐藏状态栏 (2)程序启动完成显示状态栏 AppDelegate: 1 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

[iOS UI进阶 - 2.4] 彩票Demo v1.4 转盘动画

A.需求 幸运广场界面中有一个幸运转盘,平时能够自动缓缓转动 能够选择星座 点击“开始选号”开速旋转转盘,旋转一定周数 转盘转动速度节奏:开始-慢-块-慢-结束 设置其余的背景和按钮 code source: 彩票Demo https://github.com/hellovoidworld/HelloLottery 转盘Demo https://github.com/hellovoidworld/LuckyWheelDemo B.实现 1.使用xib设计转盘 2.自定义类 (1)自定义一个继承U

[iOS UI进阶 - 2.2] 彩票Demo v1.2 UICollectionView基本

A.需要掌握的 设计.实现设置界面 cell的封装 UICollectionView的使用 自定义UICollectionView 抽取控制器父类 “帮助”功能 code source: https://github.com/hellovoidworld/HelloLottery B.实现 1.探讨“设置”界面的实现方案 (1)“设置”界面可以采用的做法 static cell(呆板,完全没有动态) 使用代码,条件判断逐个编写(麻烦,代码冗长) 使用模型.plist加载(能够动态配置跳转控制器,