源码-03-封装

封装

#import "ViewController.h"
#import "XMGShop.h"

@interface ViewController ()
/** 存放所有商品的整体 */
@property (weak, nonatomic) IBOutlet UIView *shopsView;

/** HUD */
@property (weak, nonatomic) IBOutlet UILabel *hud;

// 文档注释
/** 添加按钮 */
@property (weak, nonatomic) UIButton *addBtn;
/** 删除按钮 */
@property (weak, nonatomic) UIButton *removeBtn;

/** 全部商品数据 */
@property (strong, nonatomic) NSArray *shops;
@end

@implementation ViewController

// 加载plist数据（比较大）
// 懒加载：用到时再去加载，而且也只加载一次
- (NSArray *)shops
{
    if (_shops == nil) {
        // 加载一个字典数组
 29         NSArray *dictArray = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"shops" ofType:@"plist"]];
 30         
 31         NSMutableArray *shopArray = [NSMutableArray array];
 32         for (NSDictionary *dict in dictArray) {
 33             XMGShop *shop = [XMGShop shopWithDict:dict];
 34             [shopArray addObject:shop];
 35         }
 36         _shops = shopArray;
    }
    return _shops;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 添加“添加按钮”
    self.addBtn = 。。。 47     
    // 添加“删除按钮”
    self.removeBtn = 。。。 50     self.removeBtn.enabled = NO;
}

#pragma mark 添加按钮
- (UIButton *)addButtonWithImage:(NSString *)image highImage:(NSString *)highImage disableImage:(NSString *)disableImage 
　　　　　　　　　　　　　　　　　　frame:(CGRect)frame action:(SEL)action
{
    // 创建按钮
    UIButton *btn = [[UIButton alloc] init];
    // 设置背景图片
    [btn setBackgroundImage:[UIImage imageNamed:image] forState:UIControlStateNormal];
    [btn setBackgroundImage:[UIImage imageNamed:highImage] forState:UIControlStateHighlighted];
    [btn setBackgroundImage:[UIImage imageNamed:disableImage] forState:UIControlStateDisabled];
    // 设置位置和尺寸
    btn.frame = frame;
    // 监听按钮点击
    [btn addTarget:self action:action forControlEvents:UIControlEventTouchUpInside];
    // 添加按钮
    [self.view addSubview:btn];
    return btn;
}

#pragma mark 添加
- (void)add
{
    
    CGFloat shopW = 80; // 每一个商品的尺寸
    CGFloat shopH = 90;
  
    int cols = 3;   // 一行的列数
    
    CGFloat colMargin = (self.shopsView.frame.size.width - cols * shopW) / (cols - 1); // 每一列之间的间距
    CGFloat rowMargin = 10; // 每一行之间的间距
    
    UIView *shopView = [[UIView alloc] init];  // 创建一个父控件（整体：存放图片和文字）
    shopView.backgroundColor = [UIColor redColor];
    
    NSUInteger index = self.shopsView.subviews.count;    // 商品的索引
    
    NSUInteger col = index % cols; // 商品的x值
    CGFloat shopX = col * (shopW + colMargin);
    
    NSUInteger row = index / cols;    // 商品的y值
    CGFloat shopY = row * (shopH + rowMargin);
    
    shopView.frame = CGRectMake(shopX, shopY, shopW, shopH);
    [self.shopsView addSubview:shopView];
    
        // 获得index位置对应的商品数据
        //    NSDictionary *dict = self.shops[index];
        //    Shop *shop = [Shop shopWithDict:dict];
        
    XMGShop *shop = self.shops[index];
    
    // 添加图片
    UIImageView *iconView = [[UIImageView alloc] init];
    iconView.image = [UIImage imageNamed:shop.icon];
    iconView.frame = CGRectMake(0, 0, shopW, shopW);
    iconView.backgroundColor = [UIColor blueColor];
    [shopView addSubview:iconView];
    
    // 添加文字
    UILabel *label = [[UILabel alloc] init];
    label.text = shop.name;
    label.frame = CGRectMake(0, shopW, shopW, shopH - shopW);
    label.font = [UIFont systemFontOfSize:11];
    label.textAlignment = NSTextAlignmentCenter;
    [shopView addSubview:label];
    
    // 控制按钮的可用性
    [self checkState];
}

#pragma mark 删除
- (void)remove
{
    [[self.shopsView.subviews lastObject] removeFromSuperview];
    
    // 控制按钮的可用性
    [self checkState];
}

#pragma mark 检查状态：按钮状态
- (void)checkState
{
    // 删除按钮什么时候可以点击：商品个数 > 0
    self.removeBtn.enabled = (self.shopsView.subviews.count > 0);
    // 添加按钮什么时候可以点击：商品个数 < 总数
    self.addBtn.enabled = (self.shopsView.subviews.count < self.shops.count);
    
    // 显示HUD
    NSString *text = nil;
    if (self.removeBtn.enabled == NO) { // 删光了
        text = @"已经全部删除";
    } else if (self.addBtn.enabled == NO) { // 加满了
        text = @"已经添加满了";
    }
    if (text == nil) return;
    
    self.hud.text = text;
    self.hud.alpha = 1.0;
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
151         self.hud.alpha = 0.0;
152     });
}

@end

 

 shops.h

#import <Foundation/Foundation.h>

@interface XMGShop : NSObject
/** 商品名称 */
@property (nonatomic, strong) NSString *name;
/** 图标 */
@property (nonatomic, strong) NSString *icon;

- (instancetype)initWithDict:(NSDictionary *)dict;
+ (instancetype)shopWithDict:(NSDictionary *)dict;
@end

shops.m

#import "XMGShop.h"

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

+ (instancetype)shopWithDict:(NSDictionary *)dict
{
    return [[self alloc] initWithDict:dict];
}
@end

 

控制器知道的太多，自定义封装控件

 

三大步骤：1.初始化的时候添加控件。2.layoutSubviews中布局子控件。3.重写模型的setter方法，拿到模型数据赋值给子控件。

（尺寸、位置、数据）

 

 ViewController.m

 

#import "ViewController.h"
#import "XMGShop.h"
#import "XMGShopView.h"

@interface ViewController ()
/** 存放所有商品的整体 */
@property (weak, nonatomic) IBOutlet UIView *shopsView;

/** HUD */
@property (weak, nonatomic) IBOutlet UILabel *hud;

// 文档注释
/** 添加按钮 */
@property (weak, nonatomic) UIButton *addBtn;
/** 删除按钮 */
@property (weak, nonatomic) UIButton *removeBtn;

/** 全部商品数据 */
@property (strong, nonatomic) NSArray *shops;
@end

@implementation ViewController

// 加载plist数据（比较大）
// 懒加载：用到时再去加载，而且也只加载一次
- (NSArray *)shops
{
    if (_shops == nil) {
        // 1、加载一个字典数组
        NSArray *dictArray = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"shops" ofType:@"plist"]];
        //2、字典数组转模型数组
        NSMutableArray *shopArray = [NSMutableArray array];
        for (NSDictionary *dict in dictArray) {
            XMGShop *shop = [XMGShop shopWithDict:dict];
            [shopArray addObject:shop];
        }
        //3.赋值
        _shops = shopArray;
    }
    return _shops;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 添加“添加按钮”
    self.addBtn = [self addButtonWithImage:@"add" highImage:@"add_highlighted" disableImage:@"add_disabled" 
　　　　　　　　　　　　　　　　　　　　　　　　frame:CGRectMake(30, 30, 50, 50) action:@selector(add)];
    
    // 添加“删除按钮”
    self.removeBtn = [self addButtonWithImage:@"remove" highImage:@"remove_highlighted" disableImage:@"remove_disabled" 
　　　　　　　　　　　　　　　　　　　　　　　　　　frame:CGRectMake(270, 30, 50, 50) action:@selector(remove)];
    self.removeBtn.enabled = NO;
}

#pragma mark 添加按钮
- (UIButton *)addButtonWithImage:(NSString *)image highImage:(NSString *)highImage disableImage:(NSString *)disableImage 
　　　　　　　　　　　　　　　　　　frame:(CGRect)frame action:(SEL)action
{
    // 创建按钮
    UIButton *btn = [[UIButton alloc] init];
    // 设置背景图片
    [btn setBackgroundImage:[UIImage imageNamed:image] forState:UIControlStateNormal];
    [btn setBackgroundImage:[UIImage imageNamed:highImage] forState:UIControlStateHighlighted];
    [btn setBackgroundImage:[UIImage imageNamed:disableImage] forState:UIControlStateDisabled];
    // 设置位置和尺寸
    btn.frame = frame;
    // 监听按钮点击
    [btn addTarget:self action:action forControlEvents:UIControlEventTouchUpInside];
    // 添加按钮
    [self.view addSubview:btn];
    return btn;
}

#pragma mark 添加
- (void)add
{
    // 每一个商品的尺寸
    CGFloat shopW = 80;
    CGFloat shopH = 90;
    
    // 一行的列数
    int cols = 3;
    
    // 每一列之间的间距
    CGFloat colMargin = (self.shopsView.frame.size.width - cols * shopW) / (cols - 1);
    // 每一行之间的间距
    CGFloat rowMargin = 10;
    
    // 创建一个父控件（整体：存放图片和文字）
    XMGShopView *shopView = [XMGShopView shopView];
    
    // 商品的索引
    NSUInteger index = self.shopsView.subviews.count;
    // 给商品控件传递商品模型
    shopView.shop = self.shops[index];
    
    // 商品的x值
    NSUInteger col = index % cols;
    CGFloat shopX = col * (shopW + colMargin);
    
    // 商品的y值
    NSUInteger row = index / cols;
    CGFloat shopY = row * (shopH + rowMargin);
    
    shopView.frame = CGRectMake(shopX, shopY, shopW, shopH);
    
    // 添加控件
    [self.shopsView addSubview:shopView];
    
    // 控制按钮的可用性
    [self checkState];
}

#pragma mark 删除
- (void)remove
{
    [[self.shopsView.subviews lastObject] removeFromSuperview];
    
    // 控制按钮的可用性
    [self checkState];
}

#pragma mark 检查状态：按钮状态
- (void)checkState
{
    // 删除按钮什么时候可以点击：商品个数 > 0
    self.removeBtn.enabled = (self.shopsView.subviews.count > 0);
    // 添加按钮什么时候可以点击：商品个数 < 总数
    self.addBtn.enabled = (self.shopsView.subviews.count < self.shops.count);
    
    // 显示HUD
    NSString *text = nil;
    if (self.removeBtn.enabled == NO) { // 删光了
        text = @"已经全部删除";
    } else if (self.addBtn.enabled == NO) { // 加满了
        text = @"已经添加满了";
    }
    if (text == nil) return;
    
    self.hud.text = text;
    self.hud.alpha = 1.0;
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        self.hud.alpha = 0.0;
    });
}

@end

//  XMGShop.h//  存放商品数据的模型

#import <Foundation/Foundation.h>

@interface XMGShop : NSObject
/** 商品名称 */
@property (nonatomic, strong) NSString *name;
/** 图标 */
@property (nonatomic, strong) NSString *icon;

- (instancetype)initWithDict:(NSDictionary *)dict;
+ (instancetype)shopWithDict:(NSDictionary *)dict;
@end

// XMGShop.m
@implementation XMGShop
- (instancetype)initWithDict:(NSDictionary *)dict
{
    if (self = [super init]) {
        self.name = dict[@"name"];
        self.icon = dict[@"icon"];
        
       
    }
    return self;
}

+ (instancetype)shopWithDict:(NSDictionary *)dict
{
    return [[self alloc] initWithDict:dict];
}
@end

 

自定义的View（封装插件）

XMGShopView.h

XMGShopView.m

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

@class XMGShop;

@interface XMGShopView : UIView
/** 商品模型 */
@property (nonatomic, strong) XMGShop *shop;

+ (instancetype)shopView;
@end

//  XMGShopView.m
//  03-综合使用

#import "XMGShopView.h"
#import "XMGShop.h"

@interface XMGShopView()
/** 图片控件 */
@property (nonatomic, strong) UIImageView *iconView;
/** 名字控件 */
@property (nonatomic, strong) UILabel *nameLabel;
@end

@implementation XMGShopView

+ (instancetype)shopView
{
    return [[self alloc] init];
}

- (UIImageView *)iconView
{
    if (_iconView == nil) {
        UIImageView *iconView = [[UIImageView alloc] init];
        iconView.backgroundColor = [UIColor blueColor];
        [self addSubview:iconView];
        _iconView = iconView;
    }
    return _iconView;
}

- (UILabel *)nameLabel
{
    if (_nameLabel == nil) {
        UILabel *nameLabel = [[UILabel alloc] init];
        nameLabel.font = [UIFont systemFontOfSize:11];
        nameLabel.textAlignment = NSTextAlignmentCenter;
        nameLabel.backgroundColor = [UIColor redColor];
        [self addSubview:nameLabel];
        _nameLabel = nameLabel;
    }
    return _nameLabel;
}

/**
 init方法内部会自动调用initWithFrame:方法
// */
//- (instancetype)initWithFrame:(CGRect)frame
//{
//    if (self = [super initWithFrame:frame]) {
//        self.backgroundColor = [UIColor orangeColor];
//        
//        // 添加图片
//        UIImageView *iconView = [[UIImageView alloc] init];
//        iconView.backgroundColor = [UIColor blueColor];
//        [self addSubview:iconView];
//        self.iconView = iconView;
//        
//        // 添加文字
//        UILabel *nameLabel = [[UILabel alloc] init];
//        nameLabel.font = [UIFont systemFontOfSize:11];
//        nameLabel.textAlignment = NSTextAlignmentCenter;
//        nameLabel.backgroundColor = [UIColor redColor];
//        [self addSubview:nameLabel];
//        self.nameLabel = nameLabel;
//    }
//    return self;
//}

/**
 * 这个方法专门用来布局子控件，一般在这里设置子控件的frame
 * 当控件本身的尺寸发生改变的时候，系统会自动调用这个方法layoutSubviews
 * 
 */
- (void)layoutSubviews{
    // 一定要调用super的layoutSubviews
    [super layoutSubviews];
    
    CGFloat shopW = self.frame.size.width;
    CGFloat shopH = self.frame.size.height;
    self.iconView.frame = CGRectMake(0, 0, shopW, shopW);
    self.nameLabel.frame = CGRectMake(0, shopW, shopW, shopH - shopW);
}

- (void)setShop:(XMGShop *)shop
{
    _shop = shop;
    
    self.nameLabel.text = shop.name;
    self.iconView.image = [UIImage imageNamed:shop.icon];
}
@end

 

自定义控件使用

导入头文件

1.创建对象，2.传模型，3.设置尺寸；