利用MVVM设计快速开发我的中心、设置等模块

时间  2019-11-16
标签 利用 mvvm 设计 快速 开发 我的 中心 设置 模块 繁體版
原文   原文链接

咱们在作iOS开发过程当中，静态页面的开发比开发动态页面更让咱们开发者抓狂。由于动态页面一般是一个页面一种cell样式，做为开发者只须要专一于定制好一种样式以后，就可使用数据填充出较好的界面。而静态cell，则可能由于一个页面有多种cell样式，并且颇有可能不是标准的cell样式，须要咱们自定义，所以容易写出来的代码容易臃肿和重复、可读性差。这不符合开发者的代码优化原则（不主动重复）。我时常会由于开发这种页面抓狂，由于会纠结到底怎么写会让代码可读性好点，写重复代码的机会少点。本文就是我作过的几个项目中总结的一套利用MVVM设计模式实现我的中心等静态tableview界面的方法和代码介绍，并且能够在此基础上不断丰富咱们的模块。干货在个人demo里，你能够直接拿去用。为了你之后添加属于本身的自定义cell，建议认真看看这篇文章。设计模式

效果展现数组


 


　　本文Demo下载地址：http://pan.baidu.com/s/1kTPucgn
　　再顺便广告一下：欢迎你们关注个人微信公众号：丁丁的coding日记微信

实现思路
1.因为我的中心或者设置模块，使用了大量的通用Cell样式。一般cell左边现实图片加文字（或者只有文字），右侧则有可能有多种现实样式（如switch开怪，箭头，按钮，或者文字等）。所以咱们能够把这些通用的特性封装成ViewModel。
2.利用ViewModel填充咱们的Cell（View）。
3.给ViewModel填充数据(Model)，而后实现咱们的Cell数据和样式展现。
实现步骤
1.ViewModel实现代码：
HooUserCenterItemModel.hide

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

typedef NS_ENUM(NSInteger, HooUserCenterAccessoryType) {
    HooUserCenterAccessoryTypeNone,                   // don't show any accessory view
    HooUserCenterAccessoryTypeDisclosureIndicator,    // the same with system DisclosureIndicator
    HooUserCenterAccessoryTypeSwitch,                 //  swithch
};

@interface HooUserCenterItemModel : NSObject

@property (nonatomic,copy) NSString  *funcName;     /**<      功能名称*/
@property (nonatomic,strong) UIImage *img;          /**< 功能图片  */
@property (nonatomic,copy) NSString *detailText;    /**< 更多信息-提示文字  */
@property (nonatomic,strong) UIImage *detailImage;  /**< 更多信息-提示图片  */
@property (nonatomic,assign) HooUserCenterAccessoryType  accessoryType;    /**< accessory */
@property (nonatomic,copy) void (^executeCode)(); /**<      点击item要执行的代码*/
@property (nonatomic,copy) void (^switchValueChanged)(BOOL isOn); /**<  HooUserCenterAccessoryTypeSwitch下开关变化 */

@end

HooUserCenterSectionModel.h
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@interface HooUserCenterSectionModel : NSObject

@property (nonatomic,copy) NSString  *sectionHeaderName; /**< 传空表示分组无名称*/

@property (nonatomic,assign) CGFloat  sectionHeaderHeight; /**<      分组header高度*/

@property (nonatomic,strong) NSArray  *itemArray; /**< item模型数组*/

@property (nonatomic,strong) UIColor  *sectionHeaderBgColor; /**< 背景色*/

@end

 

 2.Cell(View)实现代码：
HooUserCenterCell.h

#import <UIKit/UIKit.h>
@class HooUserCenterItemModel;
@interface HooUserCenterCell : UITableViewCell
@property (nonatomic,strong) HooUserCenterItemModel  *item; /**< item data*/

@end

HooUserCenterCell.m优化

#import "HooUserCenterCell.h"
#import "HooUserCenterItemModel.h"
#import "UIView+XBExtension.h"
#import "HooConst.h"
@interface HooUserCenterCell()
@property (strong, nonatomic) UILabel *funcNameLabel;
@property (nonatomic,strong) UIImageView *imgView;

@property (nonatomic,strong) UIImageView *indicator;

@property (nonatomic,strong) UISwitch *aswitch;

@property (nonatomic,strong) UILabel *detailLabel;

@property (nonatomic,strong) UIImageView *detailImageView;

@end
@implementation HooUserCenterCell

- (void)setItem:(HooUserCenterItemModel *)item
{
    _item = item;
    [self updateUI];

}

- (void)updateUI
{
    [self.contentView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];

    //若是有图片
    if (self.item.img) {
        [self setupImgView];
    }
    //功能名称
    if (self.item.funcName) {
        [self setupFuncLabel];
    }

    //accessoryType
    if (self.item.accessoryType) {
        [self setupAccessoryType];
    }
    //detailView
    if (self.item.detailText) {
        [self setupDetailText];
    }
    if (self.item.detailImage) {
        [self setupDetailImage];
    }

    //bottomLine
    UIView *line = [[UIView alloc]initWithFrame:CGRectMake(0, self.height - 1, XBScreenWidth, 1)];
    line.backgroundColor = XBMakeColorWithRGB(234, 234, 234, 1);
    [self.contentView addSubview:line];

}

-(void)setupDetailImage
{
    self.detailImageView = [[UIImageView alloc]initWithImage:self.item.detailImage];
    self.detailImageView.centerY = self.contentView.centerY;
    switch (self.item.accessoryType) {
        case HooUserCenterAccessoryTypeNone:
            self.detailImageView.x = XBScreenWidth - self.detailImageView.width - XBDetailViewToIndicatorGap - 2;
            break;
        case HooUserCenterAccessoryTypeDisclosureIndicator:
            self.detailImageView.x = self.indicator.x - self.detailImageView.width - XBDetailViewToIndicatorGap;
            break;
        case HooUserCenterAccessoryTypeSwitch:
            self.detailImageView.x = self.aswitch.x - self.detailImageView.width - XBDetailViewToIndicatorGap;
            break;
        default:
            break;
    }
    [self.contentView addSubview:self.detailImageView];
}

- (void)setupDetailText
{
    self.detailLabel = [[UILabel alloc]init];
    self.detailLabel.text = self.item.detailText;
    self.detailLabel.textColor = XBMakeColorWithRGB(142, 142, 142, 1);
    self.detailLabel.font = [UIFont systemFontOfSize:XBDetailLabelFont];
    self.detailLabel.size = [self sizeForTitle:self.item.detailText withFont:self.detailLabel.font];
    self.detailLabel.centerY = self.contentView.centerY;

    switch (self.item.accessoryType) {
        case HooUserCenterAccessoryTypeNone:
            self.detailLabel.x = XBScreenWidth - self.detailLabel.width - XBDetailViewToIndicatorGap - 2;
            break;
        case HooUserCenterAccessoryTypeDisclosureIndicator:
            self.detailLabel.x = self.indicator.x - self.detailLabel.width - XBDetailViewToIndicatorGap;
            break;
        case HooUserCenterAccessoryTypeSwitch:
            self.detailLabel.x = self.aswitch.x - self.detailLabel.width - XBDetailViewToIndicatorGap;
            break;
        default:
            break;
    }

    [self.contentView addSubview:self.detailLabel];
}

- (void)setupAccessoryType
{
    switch (self.item.accessoryType) {
        case HooUserCenterAccessoryTypeNone:
            break;
        case HooUserCenterAccessoryTypeDisclosureIndicator:
            [self setupIndicator];
            break;
        case HooUserCenterAccessoryTypeSwitch:
            [self setupSwitch];
            break;
        default:
            break;
    }
}

- (void)setupSwitch
{
    [self.contentView addSubview:self.aswitch];
}

- (void)setupIndicator
{
    [self.contentView addSubview:self.indicator];

}

- (void)setupImgView
{
    self.imgView = [[UIImageView alloc]initWithImage:self.item.img];
    self.imgView.x = XBFuncImgToLeftGap;
    self.imgView.centerY = self.contentView.centerY;
    self.imgView.centerY = self.contentView.centerY;
    [self.contentView addSubview:self.imgView];
}

- (void)setupFuncLabel
{
    self.funcNameLabel = [[UILabel alloc]init];
    self.funcNameLabel.text = self.item.funcName;
    self.funcNameLabel.textColor = XBMakeColorWithRGB(51, 51, 51, 1);
    self.funcNameLabel.font = [UIFont systemFontOfSize:XBFuncLabelFont];
    self.funcNameLabel.size = [self sizeForTitle:self.item.funcName withFont:self.funcNameLabel.font];
    self.funcNameLabel.centerY = self.contentView.centerY;
    self.funcNameLabel.x = CGRectGetMaxX(self.imgView.frame) + XBFuncLabelToFuncImgGap;
    [self.contentView addSubview:self.funcNameLabel];
}

- (CGSize)sizeForTitle:(NSString *)title withFont:(UIFont *)font
{
    CGRect titleRect = [title boundingRectWithSize:CGSizeMake(FLT_MAX, FLT_MAX)
                                           options:NSStringDrawingUsesLineFragmentOrigin
                                        attributes:@{NSFontAttributeName : font}
                                           context:nil];

    return CGSizeMake(titleRect.size.width,
                      titleRect.size.height);
}

- (UIImageView *)indicator
{
    if (!_indicator) {
        _indicator = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"icon-arrow1"]];
        _indicator.centerY = self.contentView.centerY;
        _indicator.x = XBScreenWidth - _indicator.width - XBIndicatorToRightGap;
    }
    return _indicator;
}

- (UISwitch *)aswitch
{
    if (!_aswitch) {
        _aswitch = [[UISwitch alloc]init];
        _aswitch.centerY = self.contentView.centerY;
        _aswitch.x = XBScreenWidth - _aswitch.width - XBIndicatorToRightGap;
        [_aswitch addTarget:self action:@selector(switchTouched:) forControlEvents:UIControlEventValueChanged];
    }
    return _aswitch;
}

- (void)switchTouched:(UISwitch *)sw
{
    __weak typeof(self) weakSelf = self;
    self.item.switchValueChanged(weakSelf.aswitch.isOn);
}

@end

 

3.最后就能够给咱们的ViewModel添加数据，实现咱们的页面了。实现代码以下：
给DemoMeController.m添加一个属性atom

/*HooUserCenterSectionModelsection模型数组*/
@property (nonatomic,strong) NSArray  *sectionArray;

 

给DemoMeController.m添加一个方法，给sectionArray添加数据spa

- (void)setupSections
{

    //************************************section1
    HooUserCenterItemModel *item1 = [[HooUserCenterItemModel alloc]init];
    item1.funcName = @"个人任务1";
    item1.executeCode = ^{
        NSLog(@"个人任务1");
    };
    item1.img = [UIImage imageNamed:@"icon-list01"];
    item1.detailText = @"作任务赢大奖";
    item1.accessoryType = HooUserCenterAccessoryTypeDisclosureIndicator;


    HooUserCenterItemModel *item2 = [[HooUserCenterItemModel alloc]init];
    item2.funcName = @"个人任务2";
    item2.img = [UIImage imageNamed:@"icon-list01"];
    item2.accessoryType = HooUserCenterAccessoryTypeDisclosureIndicator;

    HooUserCenterItemModel *item3 = [[HooUserCenterItemModel alloc]init];
    item3.funcName = @"个人任务3";
    item3.img = [UIImage imageNamed:@"icon-list01"];
    item3.accessoryType = HooUserCenterAccessoryTypeDisclosureIndicator;

    HooUserCenterItemModel *item4 = [[HooUserCenterItemModel alloc]init];
    item4.funcName = @"个人任务4";
    item4.img = [UIImage imageNamed:@"icon-list01"];
    item4.accessoryType = HooUserCenterAccessoryTypeDisclosureIndicator;

    HooUserCenterSectionModel *section1 = [[HooUserCenterSectionModel alloc]init];
    section1.sectionHeaderHeight = 18;
    section1.itemArray = @[item1,item2,item3,item4];

    HooUserCenterItemModel *item5 = [[HooUserCenterItemModel alloc]init];
    item5.funcName = @"充值中心";
    item5.img = [UIImage imageNamed:@"icon-list01"];
    item5.executeCode = ^{
        NSLog(@"充值中心");
    };
    item5.accessoryType = HooUserCenterAccessoryTypeDisclosureIndicator;

    HooUserCenterItemModel *item6 = [[HooUserCenterItemModel alloc]init];
    item6.funcName = @"设置";
    item6.img = [UIImage imageNamed:@"icon-list01"];
    item6.executeCode = ^{

    };
    item6.accessoryType = HooUserCenterAccessoryTypeDisclosureIndicator;

    HooUserCenterSectionModel *section2 = [[HooUserCenterSectionModel alloc]init];
    section2.sectionHeaderHeight = 18;
    section2.itemArray = @[item5,item6];

    self.sectionArray = @[section1,section2];
}

 

使用sectionArray数据装配咱们的tableView的cell。设计

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *identifier = @"setting";
    HooUserCenterSectionModel *sectionModel = self.sectionArray[indexPath.section];
    HooUserCenterItemModel *itemModel = sectionModel.itemArray[indexPath.row];

    HooUserCenterCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
    if (!cell) {
        cell = [[HooUserCenterCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
    }
    cell.item = itemModel;
    return cell;
}

 

总结
这是咱们利用MVVM设计快速帮助咱们开发我的中心、设置等模块。使用这个方式建立的好处，就是解放了Controller和View,让代码的可读性变得更好，同时也帮助咱们封装了一些通用模块，将ViewModel和View与Controller解耦，方便咱们将ViewModel和View的代码带到其余项目中，而且能够扩展咱们的这ViewModel和View。code

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程