iOS开发UI篇—从代码的逐步优化看MVC

iOS开发UI篇—从代码的逐步优化看MVC

一、要求

要求完成下面一个小的应用程序。

二、一步步对代码进行优化

注意：在开发过程中，优化的过程是一步一步进行的。（如果一个人要吃五个包子才能吃饱，那么他是否直接吃第五个，前面四个不用吃就饱了？）

1.完成基本要求的代码（使用了字典转模型和xib连线）

（1）文件结构

（2）主要代码

　　字典转模型部分：

 TXApp.h头文件

//  屌丝逆天-应用管理01
//
//  Created by 鑫 on 14-10-4.
//  Copyright (c) 2014年 梁镋鑫. All rights reserved.
//

#import <Foundation/Foundation.h>

@interface TXApp : NSObject
/**
 * 图标的名称
 */
@property(nonatomic,copy)NSString *name;
/**
 *  图标
 */
@property(nonatomic,copy)NSString *icon;
/**
 *  通过字典初始化模型对象
 *
 *  @param dict 字典对象
 *
 *  @return 一初始化完毕的模型对象
 */
-(instancetype)initWithDict:(NSDictionary *)dict;
+(instancetype)appWithDict:(NSDictionary *) dict;
@end

TXApp.m文件

//  TXApp.m
//  屌丝逆天-应用管理01
//
//  Created by 鑫 on 14-10-4.
//  Copyright (c) 2014年 梁镋鑫. All rights reserved.
//

#import "TXApp.h"

@implementation TXApp
-(instancetype)initWithDict:(NSDictionary *)dict
{
    if (self = [super init]) {
        self.name = dict[@"name"];
        self.icon = dict[@"icon"];
    }
    return self;
}
+(instancetype)appWithDict:(NSDictionary *)dict
{
    return [[self alloc]initWithDict:dict];
}
@end

　xib部分（TXAppView.h文件）：

注：（xib视图和TXAppView.m进行了关联，三个属性均进行了连线）　　

#import <UIKit/UIKit.h>
@class TXApp;
@interface TXAppView : UIView
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
@property (weak, nonatomic) IBOutlet UILabel *namelable;
/**
 *  模型
 */
@property(nonatomic ,strong)TXApp *app;
/**
 *  通过模型数据来创建一个view
 */
+(instancetype)appViewWithApp:(TXApp *)app;
@end

主要功能实现部分：

TXViewController.m文

#import "TXViewController.h"
#import "TXApp.h"
#import "TXAppView.h"
@interface TXViewController ()
/**
 *  传放应用信息
 */
@property(nonatomic ,strong)NSArray *apps;


@end

@implementation TXViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    //添加应用信息
    
    //总列数（一行最多3列）
    int totalColumns = 3;
    
    //应用尺寸
    CGFloat appW = 85;
    CGFloat appH = 90;
    
    //间隙 ＝ （控制器view的宽度-3* 应用宽度）/4
    CGFloat marginX = (self.view.frame.size.width - totalColumns * appW) / (totalColumns + 1);
    CGFloat marginY = 15;
    
    //根据应用个数创建对用框框
    
    for (int index = 0; index < self.apps.count; index++) {
        //3.1.创建view
        NSBundle *bundle = [NSBundle mainBundle];
        //读取xib文件（会创建xib中的描述的所有对象，并且安顺序放到数组中返回；
        NSArray * objs = [bundle  loadNibNamed:@"TXAppView" owner:nil options:nil];
        TXAppView *appView = [objs lastObject];
        
        //3.2添加view
        [self.view addSubview:appView];
        
        //// 3.3.设置frame
        int row = index / totalColumns;
        int col = index % totalColumns;
        // 计算x和y
        CGFloat appX = marginX + col * (appW + marginX);
        CGFloat appY = 30 + row * (appH + marginY);
        appView.frame = CGRectMake(appX, appY, appW, appH);
        
        //3.4设置数据
        TXApp *app = self.apps[index];
        
        //3.4.1设置图标
        appView.iconView.image = [UIImage imageNamed:app.icon];
        //3.4.2设置名称
        appView.namelable.text = app.name;
        //设置数据放到view里面进行
    
    }
    
    
}
-(NSArray *)apps
{
    if (_apps ==nil) {
        //初始化
        
        //1.获取plist的全路径
        NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];
        
        //2.加载数组
       NSArray *dictArray  = [NSArray arrayWithContentsOfFile:path];
        //将dictArray里面所有的字典转成模型对象，方到新的数组中
        NSMutableArray * appArray = [NSMutableArray array];
        for (NSDictionary *dict in dictArray) {
            //创建模型对象
            TXApp *app = [TXApp appWithDict:dict];
            
            //把模型对象放到数组中
            
            [appArray addObject:app];
            
            
            
        }
        _apps = appArray;
        
    }
    return _apps;
}


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

2.对1进行优化（把数据呈现部分封装到视图）

说明：在1的基础上寻找还会有那些可以优化的部分

1）改进思路：

（1）1中主文件的66~67行对控件属性的设置能否拿到视图中进行？

（2）1中61~62行是从xib文件中读取信息的操作，且和主控制器没有什么太大的关联，能否把它也封装到视图中进行？

（3）当上述两个步骤完成后，主文件69行以后的按钮操作和按钮单击事件就显得很突兀，放在主控制器中已经不再合适，是否可以把它放到视图中进行处理

2）按照上述思路优化后的代码如下：

　　优化视图，在视图部分之对外提供一个接口，把数据的处理封装在内部

3.对2进一步优化（把数据处理部分拿到模型中去进行）

（1）思路：把字典转模型部分的数据处理操作，拿到模型中去处理，这样外界不需要再关心数据处理的内部细节。

（2）优化后的代码如下

TXAppView.m文件中的数据处理

#import "TXAppView.h"
#import "TXApp.h"
@implementation TXAppView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}

+(instancetype)appViewWithApp:(TXApp *)app
{
    NSBundle *bundle = [NSBundle mainBundle];
    //读取xib文件（会创建xib中描述的所有对象，并且安顺序放到数组中
    NSArray *objs= [bundle loadNibNamed:@"TXAppView" owner:nil
                                options:nil];
    TXAppView * appView = [objs lastObject];
    appView.app =app;
    return appView;
}
/**
 *  从写set方法，设计内部控件的数据
 *
 *  @param 用传如的模型设置数据
 */
-(void)setApp:(TXApp *)app
{
    _app = app;
    //1.设置图标
     self.iconView.image = [UIImage imageNamed:app.icon];
     // 2.设置名称
    self.namelable.text = app.name;
}
@end

实现效果：

4.补充说明

 View的封装思路

（1） 如果一个view内部的子控件比较多，一般会考虑自定义一个view，把它内部子控件的创建屏蔽起来，不让外界关心

（2） 外界可以传入对应的模型数据给view，view拿到模型数据后给内部的子控件设置对应的数据

三、mvc机制简单说明

说明：

（1）在开发过程中，作为控制器处理的量级应该很轻，不该操心的不操心。协调好模型和视图就ok了，要学会当一个好老板。

（2）三个部分各司其职，数据模型只负责数据的处理，视图部分只负责把拿到的数据进行显示，两个部分都是被动的，等待着大管家控制器的调遣。

（3）在OC中，如果视图和数据模型之间有通道，那控制器是否处于失控状态呢？