美文网首页
iOS 基于MVVM设计模式练习UITableView使用

iOS 基于MVVM设计模式练习UITableView使用

作者: 爪爪123 | 来源:发表于2020-06-20 16:41 被阅读0次

原文链接:https://blog.csdn.net/hero_wqb/article/details/50890159
写了个简单的例子,控制器继承UITableViewController,不需要再去手动添加协议,设置代理。遵循MVVM设计模式,自定义头部视图、Cell、Model、viewModel,效果如图33-1:

Simulator Screen Shot - iPhone 6s - 2020-06-20 at 16.35.38.png
下面贴上代码:
HWTableViewController:

#import <UIKit/UIKit.h>
 
@interface HWTableViewController : UITableViewController
 
@end
 
 
#import "HWTableViewController.h"
#import "HWHeaderView.h"
#import "HWTableViewCell.h"
#import "HWCellViewModel.h"
 
@interface HWTableViewController ()
 
@property (nonatomic, strong) HWCellViewModel *viewModel;
 
@end
 
@implementation HWTableViewController
 
- (void)viewDidLoad {
    [super viewDidLoad];
    
    //创建头部视图
    self.tableView.tableHeaderView = [[HWHeaderView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 100)];
    
    self.viewModel = [[HWCellViewModel alloc] init];
}
 
#pragma mark - Table view data source
//组数
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return [self.viewModel numberOfSections];
}
 
//组中行数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [self.viewModel numberOfItemsInSection:section];
}
 
//cell内容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return [self.viewModel tableView:tableView cellForRowAtIndexPath:indexPath];
}
 
//点击事件
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    [self.viewModel tableView:tableView didSelectRowAtIndexPath:indexPath];
}
 
//设置行高
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return [self.viewModel tableView:tableView heightForRowAtIndexPath:indexPath];
}
 
//设置头部标题
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
    return [self.viewModel titleForHeaderInSection:section];
}
 
//设置尾部标题
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section
{
    return [self.viewModel titleForFooterInSection:section];
}
 
@end

HWHeaderView:

#import <UIKit/UIKit.h>
 
@interface HWHeaderView : UIView
 
@end
 
 
#import "HWHeaderView.h"
 
@implementation HWHeaderView
 
//重写init方法
- (id)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        //创建一个标签作为头部视图
        UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, 100)];
        label.text = @"这是头部视图";
        label.textAlignment = NSTextAlignmentCenter;
        label.textColor = [UIColor whiteColor];
        label.backgroundColor = [UIColor grayColor];
        [self addSubview:label];
    }
    
    return self;
}
 
@end

HWTableViewCell:

#import <UIKit/UIKit.h>
 
@class HWCellModel;
 
@interface HWTableViewCell : UITableViewCell
 
@property (nonatomic, weak) UILabel *lable;
@property (nonatomic, strong) HWCellModel *model;
 
+ (instancetype)cellWIthTableView:(UITableView *)tableView;
 
@end
 
 
#import "HWTableViewCell.h"
#import "HWCellModel.h"
 
@interface HWTableViewCell ()
 
@property (nonatomic, weak) UIImageView *imgView;
@property (nonatomic, weak) UILabel *subLabel;
 
@end
 
@implementation HWTableViewCell
 
+ (instancetype)cellWIthTableView:(UITableView *)tableView
{
    //cell复用,唯一标识
    static NSString *identifier = @"HWCell";
    //先在缓存池中取
    HWTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
    //缓存池中没有再创建,并添加标识,cell移出屏幕时放入缓存池以复用
    if (cell == nil) {
        cell = [[HWTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
    }
    
    return cell;
}
 
//重写init方法构建cell内容
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        //图片
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(5, 5, 80, 60)];
        [self.contentView addSubview:imageView];
        self.imgView = imageView;
        
        //标题
        UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(CGRectGetMaxX(imageView.frame) + 10, 15, 200, 20)];
        label.font = [UIFont systemFontOfSize:20.0f];
        [self.contentView addSubview:label];
        self.lable = label;
        
        //副标题
        UILabel *subLabel = [[UILabel alloc] initWithFrame:CGRectMake(CGRectGetMaxX(imageView.frame) + 10, 40, 200, 13)];
        subLabel.font = [UIFont systemFontOfSize:13.0f];
        [self.contentView addSubview:subLabel];
        self.subLabel = subLabel;
        
        self.backgroundColor = [UIColor whiteColor];
    }
    
    return self;
}
 
//重写set方法,模型传递
- (void)setModel:(HWCellModel *)model
{
    _model = model;
    
    self.imgView.image = [UIImage imageNamed:model.image];
    self.lable.text = model.title;
    self.subLabel.text = model.subTitle;
}
 
@end

HWCellModel:

#import <Foundation/Foundation.h>
 
@interface HWCellModel : NSObject
 
@property (nonatomic, copy) NSString *image;
@property (nonatomic, copy) NSString *title;
@property (nonatomic, copy) NSString *subTitle;
 
- (id)initWithDictionary:(NSDictionary *)dict;
+ (id)HWInfoWithDictionary:(NSDictionary *)dict;
 
@end
 
 
#import "HWCellModel.h"
 
@implementation HWCellModel
 
- (id)initWithDictionary:(NSDictionary *)dict
{
    self = [super init];
    if (self) {
        [self setValuesForKeysWithDictionary:dict];
    }
    return self;
}
 
+ (id)HWInfoWithDictionary:(NSDictionary *)dict
{
    return [[self alloc] initWithDictionary:dict];
}
 
@end

HWCellViewModel:

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
 
@class HWTableViewCell, UITableView;
 
@interface HWCellViewModel : NSObject
 
@property (nonatomic, strong) NSMutableArray *HWInfoArray;
 
- (NSInteger)numberOfSections;
- (NSInteger)numberOfItemsInSection:(NSInteger)section;
- (NSString *)titleForHeaderInSection:(NSInteger)section;
- (NSString *)titleForFooterInSection:(NSInteger)section;
- (HWTableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;
 
@end
 
 
#import "HWCellViewModel.h"
#import "HWCellModel.h"
#import "HWTableViewCell.h"
 
@implementation HWCellViewModel
 
- (NSMutableArray *)HWInfoArray
{
    if (_HWInfoArray == nil) {
        _HWInfoArray = [NSMutableArray array];
    }
    return _HWInfoArray;
}
 
- (instancetype)init
{
    self = [super init];
    if (self) {
        [self getInfo];
    }
    return self;
}
 
- (void)getInfo
{
    //实际开发数据是网络获取到的,这里模拟给出一个数据
    NSArray *array = @[@[@{@"image" : @"hero", @"title" : @"标题1", @"subTitle" : @"副标题1"},
                         @{@"image" : @"hero", @"title" : @"标题2", @"subTitle" : @"副标题2"}],
                       @[@{@"image" : @"hero", @"title" : @"标题3", @"subTitle" : @"副标题3"},
                         @{@"image" : @"hero", @"title" : @"标题4", @"subTitle" : @"副标题4"},
                         @{@"image" : @"hero", @"title" : @"标题5", @"subTitle" : @"副标题5"},
                         @{@"image" : @"hero", @"title" : @"标题6", @"subTitle" : @"副标题6"},
                         @{@"image" : @"hero", @"title" : @"标题7", @"subTitle" : @"副标题7"}]];
    
    //解析数据,转模型保存
    for (int i = 0; i < array.count; i++) {
        NSMutableArray *tempArray = [NSMutableArray array];
        for (NSDictionary *dict in array[i]) {
            [tempArray addObject:[HWCellModel HWInfoWithDictionary:dict]];
        }
        [self.HWInfoArray addObject:tempArray];
    }
}
 
- (NSInteger)numberOfSections
{
    return self.HWInfoArray.count;
}
 
- (NSInteger)numberOfItemsInSection:(NSInteger)section
{
    return [self.HWInfoArray[section] count];
}
 
- (HWTableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    HWTableViewCell *cell = [HWTableViewCell cellWIthTableView:tableView];
    
    cell.model = self.HWInfoArray[indexPath.section][indexPath.row];
    
    return cell;
}
 
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    //获取到当前被点击的cell
    HWTableViewCell *cell = (HWTableViewCell *)[tableView cellForRowAtIndexPath:indexPath];
    
    NSString *str = [NSString stringWithFormat:@"点击了第%ld组第%ld行", indexPath.section, indexPath.row];
    
    cell.lable.text = str;
}
 
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 70.0f;
}
 
- (NSString *)titleForHeaderInSection:(NSInteger)section
{
    if (section == 0) {
        return @"第一组";
    }
    return @"第二组";
}
 
- (NSString *)titleForFooterInSection:(NSInteger)section
{
    return @"这是尾部标题";
}
 
@end

相关文章

网友评论

      本文标题:iOS 基于MVVM设计模式练习UITableView使用

      本文链接:https://www.haomeiwen.com/subject/fyhgxktx.html