IOS设置菜单界面的设计思路

我们常见的APP的设计节目会是下面这个样子的

那我们在设计这样的界面的时候有没有更好的设计思路呢。

1. 定义数据模型，因为每个设置项都有图片，文字等内容

#import <Foundation/Foundation.h>

@interface WQSettingsItem : NSObject
    @property(nonatomic,copy)NSString *title;
    @property(nonatomic,copy)NSString *icon;
    @property(nonatomic,assign) Class vcClass; //要跳转的控制器

-(instancetype)initWithIcon:(NSString *)icon andTitle:(NSString *)title;
+(instancetype)itemWithIcon:(NSString *)icon andTitle:(NSString *)title;
+(instancetype)itemWithIcon:(NSString *)icon andTitle:(NSString *)title vcClass:(Class) vcClass;

@end

1.1 m文件的写法

#import "WQSettingsItem.h"

@implementation WQSettingsItem

-(instancetype)initWithIcon:(NSString *)icon andTitle:(NSString *)title{
    if (self = [super init]) {
        self.icon = icon;
        self.title = title;
    }
    return self;
}


+(instancetype)itemWithIcon:(NSString *)icon andTitle:(NSString *)title{
    return [[self alloc] initWithIcon:icon andTitle:title];
    
}

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

@end

2. 自定义一个ViewController 继承UITableViewController

h文件

#import <UIKit/UIKit.h>

@interface WQSettingController : UITableViewController

@end

m文件：

#import "WQSettingController.h"
#import "WQSettingsItem.h"
#import "WQArrowItem.h"
#import "WQSwitchItem.h"
#import "WQTableViewCell.h"
#import "WQMessageViewController.h"

@interface WQSettingController ()
@property(nonatomic,strong) NSMutableArray *cellData;

@end

@implementation WQSettingController


-(NSMutableArray *)cellData{
    if (!_cellData) {
        _cellData = [NSMutableArray array];
    }
    return _cellData;
}




- (void)viewDidLoad {
    [super viewDidLoad];
    
    //第一组数据
    WQSettingsItem *item1 = [WQArrowItem itemWithIcon:@"tab_normal_4"
                                             andTitle:@"推送" vcClass:[WQMessageViewController class]];
    WQSettingsItem *item2 = [WQSwitchItem itemWithIcon:@"tab_normal_4" andTitle:@"摇一摇"];
    WQSettingsItem *item3 = [WQSwitchItem itemWithIcon:@"tab_normal_4" andTitle:@"声音和效果"];
    NSArray *group1 = @[item1,item2,item3];
    
    WQSettingsItem *item4 = [WQArrowItem itemWithIcon:@"tab_normal_4" andTitle:@"检查版本"];
    WQSettingsItem *item5 = [WQArrowItem itemWithIcon:@"tab_normal_4" andTitle:@"帮助"];
    WQSettingsItem *item6 = [WQArrowItem itemWithIcon:@"tab_normal_4" andTitle:@"分享"];
    WQSettingsItem *item7 = [WQArrowItem itemWithIcon:@"tab_normal_4" andTitle:@"产品推荐"];
    WQSettingsItem *item8 = [WQArrowItem itemWithIcon:@"tab_normal_4" andTitle:@"关于"];
    NSArray *group2 = @[item4,item5,item6,item7,item8];
    
    [self.cellData addObject:group1];
    [self.cellData addObject:group2];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

#pragma mark - Table view data source

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return self.cellData.count;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

    NSArray *array = self.cellData[section];
    return array.count;

}


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 
    WQTableViewCell *cell = [WQTableViewCell initCellWithTableView:tableView];
    NSArray *array = self.cellData[indexPath.section];
    WQSettingsItem *item = array[indexPath.row];
    [cell setSettingItem:item];
    return cell;
}


-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    NSArray *array = self.cellData[indexPath.section];
    WQSettingsItem *item = array[indexPath.row];
    if (item.vcClass) {
        id vc = [[item.vcClass alloc]init];
        [self.navigationController pushViewController:vc animated:YES];
    }
}

-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
    return @" ";
}

-(NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section{
    return @" ";
}

@end

3.从上面的写法可以看出，我们自定义了cellview

h文件：

#import <UIKit/UIKit.h>

@class WQSettingsItem;
@interface WQTableViewCell : UITableViewCell

@property(nonatomic,strong) WQSettingsItem *settingItem;

+(instancetype)initCellWithTableView:(UITableView *)tableView;
@end

m文件：

#import "WQTableViewCell.h"
#import "WQSettingsItem.h"
#import "WQArrowItem.h"
#import "WQSwitchItem.h"

@implementation WQTableViewCell

+(instancetype)initCellWithTableView:(UITableView *)tableView{
    NSString *identify = @"cell";
    WQTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identify];
    if (!cell) {
        cell = [[WQTableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identify];
        
    }
    return cell;
}


-(void)setSettingItem:(WQSettingsItem *)settingItem{
    _settingItem = settingItem;
    self.textLabel.text = settingItem.title;
    self.imageView.image = [UIImage imageNamed:settingItem.icon];
    
    if ([settingItem isKindOfClass:[WQArrowItem class]]) {
        self.accessoryView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"arrow_right"]];
    }else if([settingItem isKindOfClass:[WQSwitchItem class]]){
        self.accessoryView = [[UISwitch alloc]init];
    }

}

@end

自定义了CellView 的好处可以把业务逻辑独立在自定义的CEll当中处理。

但问题是： 不同的设置项的显示效果不一样：有的右边是箭头，有点右边是开关按钮。怎么解决呢？

方案：新建2中item类，继承上面的SettingsItem类。

然后在表格的协议方法中去判断：如：

f ([settingItem isKindOfClass:[WQArrowItem class]]) {
        self.accessoryView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"arrow_right"]];
    }else if([settingItem isKindOfClass:[WQSwitchItem class]]){
        self.accessoryView = [[UISwitch alloc]init];
    }