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
说明截图