iOS开发初探篇——表视图中的MVC运用

概述

---

本初探篇为本人学习iOS开发中的一个总结系列，为工作和业余学习中遇到的初级问题的一个初步探究。本文初探的内容是MVC设计模式在表视图中的应用。主要以探究MVC为主，至于OC基本语法和表视图的使用上的优化等问题先不考虑。首先感谢博主KC写的精彩博文。

本文主要内容如下：

　　1.MVC基本介绍

      2.MVC在表视图中的应用

MVC基本介绍

---

MVC模式这个名词太熟悉，不过本人由于缺乏工程实践经验，对其理解目前还停留在理论的表面层次上。在iOS开发中MVC模式第一次在表视图设计中应用到，想借此机会对其有个初步的认识。

MVC在表视图中的对号入座，目前的理解为如下图所示：

MVC在表视图中的应用 

---

对上图再补充说明：在定制TableViewCell中，Cell即为MVC中的View，Model中的数据一般来自网络请求得到的数据，简单的模型可以封装成由各类属性组成字典，然后字典封装到可变数组中。具体用法会在下面的内容中进行介绍。严格意义上的MVC是不允许Model和View之间进行数据访问的。但实际情况有时也不一定严格遵守。下面做一个简单的具体工程实例。

首先UI需求如下图所示，显然我们需要定制TaleView中的Cell。

 

 

 

 

 

 

 

 

 

 

 

 1.Model的定制

　　我们需要通过网格请求获取到的数据有：具体的图片、具体的姓名、具体的昵称。在这里先包装成字典的形式，然后把字典传到Model中。Model根据字典的key获取Value组装成一个类供Cell使用。注意，不同的字典就可以生成不同的Model类。在这里做一个学生类的形式进行展现。具体的代码如下所示。

//
//  Student.h
//  CustomCellByCode
//
//  Created by hushunfeng on 15-6-20.
//  Copyright (c) 2015年 CMCC. All rights reserved.
//

#import <Foundation/Foundation.h>

@interface Student : NSObject
@property (strong, nonatomic) UIImage *icon;
@property (strong, nonatomic) NSString *name;
@property (strong, nonatomic) NSString *nickname;

-(Student*)initWithDictionary:(NSDictionary *)dic;
@end

 

//
//  Student.m
//  CustomCellByCode
//
//  Created by hushunfeng on 15-6-20.
//  Copyright (c) 2015年 CMCC. All rights reserved.
//

#import "Student.h"

@implementation Student


- (Student *) initWithDictionary:(NSDictionary *)dic{
    
    if(self = [super init]){
        self.icon = dic[@"image"];
        self.name = dic[@"name"];
        self.nickname = dic[@"nickname"];
    }
    return self;
}

@end

2.Cell的定制

　　Cell的定制根据UI界面的实际情况来就行。此设计中，姓名：，昵称：是写死在Cell中的。需要变动的只是图片、真实姓名和真实昵称。具体代码如下。

//
//  MyCell.h
//  CustomCellByCode
//
//  Created by hushunfeng on 14-8-27.
//  Copyright (c) 2014年 e世雕龙. All rights reserved.
//

#import <UIKit/UIKit.h>
#import "Student.h"

@interface MyCell : UITableViewCell

@property (strong, nonatomic) UIImageView *myImageView;//头像
@property (strong, nonatomic) UILabel *nameLabel;//姓名
@property (strong, nonatomic) UILabel *nicknameLabel;//昵称

@property (strong,nonatomic) Student *stu;


@end

//
//  MyCell.m
//  CustomCellByCode
//
//  Created by hushunfeng on 15-6-20.
//  Copyright (c) 2015年 CMCC. All rights reserved.
//

#import "MyCell.h"

@implementation MyCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        // Initialization code
        //创建自定义单元格中控件
        
        //写死的
        UILabel *nameLabel = [[UILabel alloc]initWithFrame:CGRectMake(160, 45, 51, 21)];
        nameLabel.text = @"姓名：";
        UILabel *nicknameLabel = [[UILabel alloc]initWithFrame:CGRectMake(160, 80, 51, 21)];
        nicknameLabel.text = @"昵称：";
        
        //根据model传进来的值要变动的
        self.nameLabel = [[UILabel alloc]initWithFrame:CGRectMake(239, 45, 51, 21)];
        self.myImageView = [[UIImageView alloc]initWithFrame:CGRectMake(10, 10, 120, 120)];
        self.nicknameLabel = [[UILabel alloc]initWithFrame:CGRectMake(239, 80, 51, 21)];
        //加入单元格内容视图中
        [self.contentView addSubview:self.myImageView];
        [self.contentView addSubview:nameLabel];
        [self.contentView addSubview:self.nameLabel];
        [self.contentView addSubview:nicknameLabel];
        [self.contentView addSubview:self.nicknameLabel];
        
    }
    return self;
}


- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
}
#pragma mark 绑定model传进来的数据的方法
- (void)bind:(Student *)stu {
    self.myImageView.image = stu.icon;
    self.nameLabel.text = stu.name;
    self.nicknameLabel.text = stu.nickname;
}
@end

3.ViewController

//
//  MainViewController.h
//  CustomCellByCode
//
//  Created by hushunfeng on 15-6-20.
//  Copyright (c) 2014年 CMCC. All rights reserved.
//

#import <UIKit/UIKit.h>


@interface MainViewController:UIViewController <UITableViewDataSource,UITableViewDelegate>


@end

//
//  MainViewController.m
//  CustomCellByCode
//
//  Created by hushufeng on 15-6-20.
//  Copyright (c) 2014年 CMCC. All rights reserved.
//

#import "MainViewController.h"
#import "Student.h"
#import "MyCell.h"

@interface MainViewController ()

@property (strong,nonatomic) UITableView *tableView;

@property (strong, nonatomic) NSMutableArray *students;//数据源


@end

@implementation MainViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height) style:UITableViewStylePlain];
    
    self.tableView.dataSource = self;
    self.tableView.delegate = self;
    
    [self.view addSubview:self.tableView];
    
    //准备数据源
    
    UIImageView *view1 = [[UIImageView alloc]init];
    view1.image = [UIImage imageNamed:@"guan"];
    
    UIImageView *view2 = [[UIImageView alloc]init];
    view2.image = [UIImage imageNamed:@"hejin"];
    
    UIImageView *view3 = [[UIImageView alloc]init];
    view3.image = [UIImage imageNamed:@"tang"];
   
    NSDictionary *dic1 = @{@"image":view1.image,
                           @"name":@"孙悟空",
                           @"nickname":@"猴子"};
    NSDictionary *dic2 = @{@"image":view2.image,
                           @"name":@"八戒",
                           @"nickname":@"呆子"};
    NSDictionary *dic3 = @{@"image":view3.image,
                           @"name":@"唐僧",
                           @"nickname":@"三藏"};
   
    Student *model1 = [[Student alloc]initWithDictionary:dic1];
    Student *model2 = [[Student alloc]initWithDictionary:dic2];
    Student *model3 = [[Student alloc]initWithDictionary:dic3];
//    
    self.students = [[NSMutableArray alloc]init];
    [self.students addObject:model1];
    [self.students addObject:model2];
    [self.students addObject:model3];
    
   // self.students = [NSArray arrayWithObjects:model1,model2,model3, nil];
    
}
#pragma mark - Table view data source
//该数据源方法指定表视图有几个分区
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    // Return the number of sections.
    return 1;
}
//该数据源方法指定表视图每个分区有几行数据
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    // Return the number of rows in the section.
    return self.students.count;
    
}

//该数据源方法指定表视图如何显示数据
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    //创建可重用标识符
    static NSString *cellID = @"cellID";
    //首先从出列可重用队列中获取单元格
    MyCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID];
    //如果没有则创建单元格
    if (!cell) {
        cell = [[MyCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellID];
    }
//    //获取Student对象
    Student *stu = [[Student alloc]init];
    stu = self.students[indexPath.row];
    [cell bind:stu];//绑定数据
    
    return cell;
}
#pragma mark 该数据源方法指定单元格的高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 141;
}

/*
// Override to support conditional editing of the table view.
- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath
{
    // Return NO if you do not want the specified item to be editable.
    return YES;
}
*/

/*
// Override to support editing the table view.
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (editingStyle == UITableViewCellEditingStyleDelete) {
        // Delete the row from the data source
        [tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];
    } else if (editingStyle == UITableViewCellEditingStyleInsert) {
        // Create a new instance of the appropriate class, insert it into the array, and add a new row to the table view
    }   
}
*/

/*
// Override to support rearranging the table view.
- (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)fromIndexPath toIndexPath:(NSIndexPath *)toIndexPath
{
}
*/

/*
// Override to support conditional rearranging of the table view.
- (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath
{
    // Return NO if you do not want the item to be re-orderable.
    return YES;
}
*/

/*
#pragma mark - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    // Get the new view controller using [segue destinationViewController].
    // Pass the selected object to the new view controller.
}
*/

@end

效果图：