前言：本文章第一時間出現(xiàn)在一個程序猿的秘密基地專題中茁计，如果您喜歡類似的文章，請您點擊一個程序猿的秘密基地進(jìn)行關(guān)注谓松，在以后的日子里與小編共同成長簸淀！

本案例闡述了以下幾點：

1.封裝（低耦合思想）
2.九宮格的計算思路
3.使用plist文件承載數(shù)據(jù)
4.懶加載模式
5.MVC模式（雖然不是純正的MVC，不過也MVC的條件毒返，也算是個簡單的MVC）

//本案例是一套簡單的MVC租幕，不是純正的MVC。
#define SCREEN [[UIScreen mainScreen] bounds].size
#define COUNT self.myWhiteView.subviews.count
#import "ViewController.h"
#import "shops.h"
#import "ZLShopView.h"
@interface ViewController ()
@property(strong,nonatomic)UIView *myWhiteView;
@property(strong,nonatomic)NSArray *commodiyArray;
@property(strong,nonatomic)UIButton *deleteButton;
@property(strong,nonatomic)UIButton *addButton;
@property(strong,nonatomic)UILabel *HUD;
@end

@implementation ViewController
/** 重寫commodiyArray的Get方法,實現(xiàn)懶加載plist文件*/
-(NSArray *)commodiyArray{
    //重寫Get方法時拧簸，下面?和?處不能使用self打點調(diào)用劲绪，會造成死循環(huán)。（因為用self打點調(diào)用的就是此方法）
    if (!_commodiyArray) {//?
        NSArray *dictArray=[NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"Commodiy" ofType:@"plist"]];
        NSMutableArray *mutableArray=[[NSMutableArray alloc]init];
        for (NSDictionary *dict in dictArray) {
            shops *shop=[shops shopsWithDict:dict];
            [mutableArray addObject:shop];
        }
        _commodiyArray=mutableArray;
    }
    return _commodiyArray;//?
}
- (void)viewDidLoad {
    self.view.backgroundColor=[UIColor lightGrayColor];
    self.addButton=[self addButtonWithFrame:CGRectMake(70, 30, 50, 50) NormalImageNamed:@"add" HighlightedImageNamed:@"add_highlighted" DisabledImageNamed:@"add_disabled" action:@selector(buttonClick:) Tag:1];
    [self addLabel];
    self.deleteButton=[self addButtonWithFrame:CGRectMake(255, 30, 50, 50) NormalImageNamed:@"remove" HighlightedImageNamed:@"remove_highlighted" DisabledImageNamed:@"remove_disabled" action:@selector(buttonClick:) Tag:2];
    self.deleteButton.enabled=NO;
    [self addWhiteView];
}
#pragma mark- 添加商品
-(void)addCommodiyView{
    //此處會去調(diào)用shopView；
    ZLShopView *myCommodiyView=[ZLShopView shopView];
    NSUInteger index=COUNT;
    CGFloat myWhiteViewWidth=80;
    CGFloat myWhiteViewHeight=100;
    int columnNumber=3;
    CGFloat LineSpacing=10;
    CGFloat columnSpacing=(self.myWhiteView.frame.size.width-myWhiteViewWidth*columnNumber)/(columnNumber-1);
    NSUInteger i=index%columnNumber;
    CGFloat myWhiteViewX=(myWhiteViewWidth+columnSpacing)*i;
    NSUInteger j=index/columnNumber;
    CGFloat myWhiteViewY=(myWhiteViewHeight+LineSpacing)*j;
    //此處會觸發(fā)ZLShopView的layoutSubviews方法
    myCommodiyView.frame=CGRectMake(myWhiteViewX, myWhiteViewY, myWhiteViewWidth, myWhiteViewHeight);
    [self.myWhiteView addSubview:myCommodiyView];
    //此處在給ZLShopView里的模型屬性賦值
    myCommodiyView.shop=self.commodiyArray[index];
}
#pragma mark- 添加白色容納商品的view
-(void)addWhiteView{
    self.myWhiteView=[[UIView alloc]initWithFrame:CGRectMake(20, 140, 330, 400)];
    self.myWhiteView.backgroundColor=[UIColor whiteColor];
    [self.view addSubview:self.myWhiteView];
}
#pragma mark- 添加切換布局label
-(void)addLabel{
    UILabel *myLabel=[[UILabel alloc]initWithFrame:CGRectMake(150, 45, 70, 20)];
    myLabel.text=@"切換布局";
    myLabel.textColor=[UIColor blueColor];
    [self.view addSubview:myLabel];
}
#pragma mark- 封裝創(chuàng)建Button的方法
-(UIButton *)addButtonWithFrame:(CGRect)frame NormalImageNamed:(NSString *)normalString HighlightedImageNamed:(NSString *)highlightedString DisabledImageNamed:(NSString *)disabledString action:(nonnull SEL)action Tag:(NSInteger)tag{
    UIButton *myButton=[[UIButton alloc]initWithFrame:frame];
    [myButton setImage:[UIImage imageNamed:normalString] forState:UIControlStateNormal];
    [myButton setImage:[UIImage imageNamed:highlightedString] forState:UIControlStateHighlighted];
    [myButton setImage:[UIImage imageNamed:disabledString] forState:UIControlStateDisabled];
    myButton.tag=tag;
    [myButton addTarget:self action:action forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:myButton];
    return myButton;
}
#pragma mark- "添加"和"刪除"按鈕的點擊事件
-(void)buttonClick:(UIButton *)sender{
    if (sender.tag==1) {
        [self addCommodiyView];
        [self detectionButtonState:sender];
        return;
    }
    [[self.myWhiteView.subviews lastObject] removeFromSuperview];
    [self detectionButtonState:sender];
}
/** 檢查按鈕狀態(tài)*/
-(void)detectionButtonState:(UIButton *)sender{
    self.deleteButton.enabled=COUNT!=0?YES:NO;
    self.addButton.enabled=COUNT==self.commodiyArray.count?NO:YES;
    if (self.deleteButton.enabled==NO||self.addButton.enabled==NO) {
        [self addHUD];
        self.HUD.text=(self.deleteButton.enabled==NO)?@"商品已經(jīng)清空":@"商品已經(jīng)爆滿";
    }
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(4.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self.HUD removeFromSuperview];
    });
}
-(void)addHUD{
    self.HUD=[[UILabel alloc]init];
    self.HUD.center=self.myWhiteView.center;
    self.HUD.bounds=CGRectMake(0, 0, 105, 20);
    self.HUD.backgroundColor=[UIColor lightGrayColor];
    [self.view addSubview:self.HUD];
}
//HUD是專業(yè)術(shù)語贾富，又稱：蒙版歉眷、遮蓋、指示器颤枪。是為了讓用戶體驗更好汗捡，起到提示效果
@end

shops.h

#import <Foundation/Foundation.h>

@interface shops : NSObject
/** 圖片名*/
@property(copy,nonatomic)NSString *imageName;
/** 商品名字*/
@property(copy,nonatomic)NSString *name;
//字典轉(zhuǎn)模型方法
-(instancetype)initWithDict:(NSDictionary *)dict;
//此為便利構(gòu)造方法
+(instancetype)shopsWithDict:(NSDictionary *)dict;
@end

shops.m

#import "shops.h"

@implementation shops
-(id)initWithDict:(NSDictionary*)dict{
    if (self=[super init]) {
        self.name=dict[@"imageName"];
        self.imageName=dict[@"image"];
    }
    return self;
}
+(id)shopsWithDict:(NSDictionary *)dict{
    return [[self alloc]initWithDict:dict];
}
@end

ZLShopView.h

//view的封裝思想：如果一個View的內(nèi)部的子控件比較多，一般會考慮自定義一個view畏纲，把它內(nèi)部的子控件屏蔽起來扇住，不讓外界關(guān)心
//外界可以傳入對應(yīng)的模型數(shù)據(jù)給View，view拿到模型數(shù)據(jù)后給內(nèi)部的子控件設(shè)置對應(yīng)的數(shù)據(jù)
#import <UIKit/UIKit.h>
@class shops;
//此是每件商品的創(chuàng)建類盗胀，在這個類中就應(yīng)該設(shè)置商品的圖片以及商品的名字艘蹋，更重要的是商品的信息應(yīng)該是設(shè)置在內(nèi)部，而不是把商品的信息暴露在外部票灰，也就是說一個商品的創(chuàng)建應(yīng)該是它自己的事女阀，至于它叫什么長什么樣也應(yīng)該是它自己的事，外界的ViewController不應(yīng)該知道屑迂。所以關(guān)于商品的屬性應(yīng)該是寫在.m
@interface ZLShopView : UIView
/** 模型對象*/
@property(strong,nonatomic)shops *shop;
//此為便利構(gòu)造方法
+(instancetype)shopView;
@end
/*
 封裝控件的基本步驟：
 1.在initWithFrame：方法中添加子控件浸策，提供便利構(gòu)造的方法
 2.在layoutSubviews方法中設(shè)置子控件的frame（一定要調(diào)用父類的layoutSubviews）
 3.增加模型屬性，在模型屬性set方法中設(shè)置數(shù)據(jù)到子控件上
 */

ZLShopView.m

#import "ZLShopView.h"
#import "shops.h"
//此處是類擴(kuò)展惹盼。類擴(kuò)展用的是（）的榛，里面不要寫東西，寫了東西就是類別
@interface ZLShopView()
/** 圖片視圖*/
@property(weak,nonatomic)UIImageView *myImageView;
/** 文字視圖*/
@property(weak,nonatomic)UILabel *myLabel;
@end

@implementation ZLShopView
#pragma mark- 加載子控件第一種是重寫init方法逻锐，在view被創(chuàng)建時加載子控件
/*
 //重寫一個控件的初始化方法夫晌，就重寫initWithFrame，init方法內(nèi)部會自動調(diào)用initWithFrame方法昧诱。
 -(instancetype)initWithFrame:(CGRect)frame{
 //雖然這里frame已經(jīng)有了晓淀，但是不建議用這個frame,因為不能排除傳進(jìn)來的frame是空的。還是應(yīng)該去重寫layoutSubviews盏档，因為只要本類有了尺寸或尺寸在后面進(jìn)行了修改凶掰，它都會來調(diào)用layoutSubviews這個方法，所以在layoutSubviews方法內(nèi)設(shè)置子控件的尺寸才是最準(zhǔn)確的蜈亩。
 if (self=[super initWithFrame:frame]) {
 UIImageView *myImageView=[[UIImageView alloc]init];
 [self addSubview:myImageView];
 _myImageView=myImageView;
 UILabel *myLabel=[[UILabel alloc]init];
 myLabel.textAlignment=NSTextAlignmentCenter;
 [self addSubview:myLabel];
 _myLabel=myLabel;
 }
 return self;
 }
*/
#pragma mark- 加載子控件第二種是懶加載懦窘，當(dāng)系統(tǒng)訪問控件的get方法時在來創(chuàng)建子控件
//懶加載imageView子控件
-(UIImageView *)myImageView{
    if (!_myImageView) {
        UIImageView *myImageView=[[UIImageView alloc]init];
        [self addSubview:myImageView];
        _myImageView=myImageView;
    }
    return _myImageView;
}
-(UILabel *)myLabel{
    if (!_myLabel) {
        UILabel *myLabel=[[UILabel alloc]init];
        myLabel.textAlignment=NSTextAlignmentCenter;
        [self addSubview:myLabel];
        _myLabel=myLabel;
    }
    return _myLabel;
}
//便利構(gòu)造方法的實現(xiàn)
+(instancetype)shopView{
    return [[self alloc]init];
}
/*
 這個方法專門用來布局子控件，一般在這里設(shè)置子控件的frame;
 當(dāng)控件本身的尺寸發(fā)生改變的時候稚配，系統(tǒng)會自動調(diào)用此方法畅涂。
 本案例中是因為ViewController里的
   myCommodiyView.frame=CGRectMake(myWhiteViewX, myWhiteViewY, myWhiteViewWidth, myWhiteViewHeight);
 這個方法觸發(fā)了這個方法。
 */
-(void)layoutSubviews{
    //一定要調(diào)用父類的layoutSubviews道川；
    [super layoutSubviews];
    CGFloat myWhiteViewWidth=self.frame.size.width;
    CGFloat myWhiteViewHeight=self.frame.size.height;
    self.myImageView.frame=CGRectMake(0, 0, myWhiteViewWidth, myWhiteViewWidth);
    self.myLabel.frame=CGRectMake(0, myWhiteViewWidth, myWhiteViewWidth, myWhiteViewHeight-myWhiteViewWidth);
}
//重寫模型的set方法午衰，拿到模型立宜，賦值給子控件
-(void)setShop:(shops *)shop{
    _shop=shop;
    self.myImageView.image=[UIImage imageNamed:shop.imageName];
    self.myLabel.text=shop.name;
}
@end

屏幕快照 2016-06-05 下午1.03.25.png

效果圖及效果要求如下：

屏幕快照_2016-06-05_下午1_08_24.png