源码-0103-xib文件

 

xib和stroyboard的对比

共同点

　　都是用来描述软件界面的

　　都是用interface Builder 工具来编辑的

　　本质都是转换成代码去创建控件

不同点

　　xib是轻量级的，用来描述局部的UI界面

　　strorboard是重量级的，用来描述真个软件的多个界面的，并且能展示多个界面之间的跳转关系。

 

//
//  ViewController.m
//  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) {
        // 加载一个字典数组
        NSArray *dictArray = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"shops" ofType:@"plist"]];
        
        NSMutableArray *shopArray = [NSMutableArray array];
        for (NSDictionary *dict in dictArray) {
            XMGShop *shop = [XMGShop shopWithDict:dict];
            [shopArray addObject:shop];
        }
        _shops = shopArray;
    }
    return _shops;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 添加“添加按钮”
    self.addBtn = 。。// 添加“删除按钮”
    self.removeBtn = 。。
    self.removeBtn.enabled = NO;
    
    // 加载xib文件
    // Test.xib --编译--> Test.nib
    // 方式1
//    NSArray *objs = [[NSBundle mainBundle] loadNibNamed:@"Test" owner:nil options:nil]; //拿到Test.xib文件中所有的控件的一个数组；
//    [self.view addSubview:objs[1]];
    
    // 方式2
    // 一个UINib对象就代表一个xib文件
//    UINib *nib = [UINib nibWithNibName:@"Test" bundle:[NSBundle mainBundle]];
    // 一般情况下，bundle参数传nil，默认就是mainBundle
//    UINib *nib = [UINib nibWithNibName:@"Test" bundle:nil];
//    NSArray *objs = [nib instantiateWithOwner:nil options:nil];
//    [self.view addSubview:[objs lastObject]];
}

#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 = [[[NSBundle mainBundle] loadNibNamed:@"XMGShopView" owner:nil options:nil] lastObject];

    
    // 商品的索引
    NSUInteger index = self.shopsView.subviews.count;
    // 给商品控件传递商品模型
//    shopView.shop = self.shops[index];
    XMGShop *shop = self.shops[index];
    
    UIImageView *iconView = (UIImageView *)[shopView viewWithTag:10];
    iconView.image = [UIImage imageNamed:shop.icon];
    
    UILabel *nameLabel = (UILabel *)[shopView viewWithTag:20];
    nameLabel.text = shop.name;
    
    // 商品的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

 

xib文件的封装

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

@interface ViewController ()
/** 存放所有商品的整体 */@end

@implementation ViewController
- (void)viewDidLoad
{
    [super viewDidLoad];

}
#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;
    
    // 商品的索引
    NSUInteger index = self.shopsView.subviews.count;
    
    // 创建一个父控件（整体：存放图片和文字）
    XMGShopView *shopView = [XMGShopView shopViewWithShop: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];
}

@end

 

同名

#import <UIKit/UIKit.h>
@class XMGShop;

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

+ (instancetype)shopView;
+ (instancetype)shopViewWithShop:(XMGShop *)shop;

// 接口的设计
// 接口：提供给外界的方法、属性等工具

//+ (NSString *)xibName;
@end

 

//
//  XMGShopView.m
#import "XMGShopView.h"
#import "XMGShop.h"
#import "XMGMyButton.h"
#import "XMGNameLabel.h"

@interface XMGShopView()
/** 图标 */
//@property (weak, nonatomic) IBOutlet UIImageView *iconView;
@property (weak, nonatomic) IBOutlet XMGMyButton *iconView;

/** 名字 */
//@property (weak, nonatomic) IBOutlet UILabel *nameLabel;
@property (weak, nonatomic) IBOutlet XMGNameLabel *nameLabel;
@end

@implementation XMGShopView
//
//- (void)xib的加载过程
//{
//    XMGShopView *shopView = [[XMGShopView alloc] init];
//    shopView.frame = CGRectMake(0, 0, 80, 90);
//    
//    XMGMyButton *imageView = [[XMGMyButton alloc] init];
//    imageView.frame = CGRectMake(0, 0, 80, 80);
//    [shopView addSubview:imageView];
//    shopView.iconView = imageView;
//
//    XMGNameLabel *label = [[XMGNameLabel alloc] init];
//    label.frame = CGRectMake(0, 80, 80, 10);
//    label.textAlignment = NSTextAlignmentCenter;
//    label.font = [UIFont systemFontOfSize:11];
//    [shopView addSubview:label];
//    shopView.nameLabel = label;
//}

//+ (NSString *)xibName
//{
//    return NSStringFromClass(self);
//}

//+ (instancetype)shopView
//{
//    return [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass(self) owner:nil options:nil] lastObject];
//}
//
//+ (instancetype)shopViewWithShop:(XMGShop *)shop
//{
//    XMGShopView *shopView = [self shopView];
//    shopView.shop = shop;
//    return shopView;
//}

+ (instancetype)shopView
{
    
    return [self shopViewWithShop:nil];
}

+ (instancetype)shopViewWithShop:(XMGShop *)shop
{
    XMGShopView *shopView = [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass(self) owner:nil options:nil] lastObject];
    shopView.shop = shop;
    return shopView;
}

- (void)setShop:(XMGShop *)shop
{
    _shop = shop;
    
    // 设置子控件的数据
//    UIImageView *iconView = [self viewWithTag:10];
//    UIImageView *iconView = [self.subviews firstObject];
    self.iconView.image = [UIImage imageNamed:shop.icon];
    
//    UILabel *nameLabel = [self viewWithTag:20];
//    UILabel *nameLabel = [self.subviews lastObject];
    self.nameLabel.text = shop.name;
}

@end

 

 说明截图