自定义View控件(2—手写实例代码)
1、 步骤:
+ 1.自定义一个类继承于UIView
+ 2.在initWithFrame方法中添加子控件
+ 3.在layoutSubviews中设置子控件的位置
+ 4.提供一个属性保存外界传入的数据(模型对象), 重写setter方法设置子控件的数据
- 类工厂方法(便利构造器)
+ 按照苹果的风格和规范, 一般情况一个用于创建对象的对象方法会对应一个类方法
+ 可以通过类工厂方法, 快速的根据数据创建一个对象
- 注意点:
+ 返回值一定要使用instancetype, 不要使用id
+ 在类工厂方法中创建对象, 使用self, 不要使用类名
// **************************************************************************************************
2. 实现自定义View:
/* 1. 定义字典模型 */
// 1> 对应plist文件中的模型数据如:Shop
// 2> 在Shop.h中设置属性,然后声明写字典转模型方法如:
@property (nonatomic, strong) NSString *name; @property (nonatomic, strong) NSString *icon; - (Shop *)initWithDict:(NSDictionary *)dict; + (Shop *)shopWithDict:(NSDictionary *)dict;
// 3> 然后Shop.m中实现Shop.h中的方法:
- (Shop *)initWithDict:(NSDictionary *)dict { if (self = [super init]) { [self setValuesForKeysWithDictionary:dict]; } return self; } + (Shop *)shopWithDict:(NSDictionary *)dict { return [[self alloc] initWithDict:dict]; }
//**************************************************************************************************
/* 2. 定义自定义View,继承UIView,例如:ShopView */
// 1> ShopView.h中设置自定义控件拥有那些类型的子控件,
1. 以及拥有一个模型数据(即将展示到自定义控件上的模型),
2. 以及声明工厂方法,达到快速创建自定义控件及其上的数据模型
// 在ShopView.h中
@class Shop; @interface ShopView : UIView @property (nonatomic, weak)UIImageView *iconView; @property (nonatomic, weak)UILabel *nameView; @property (nonatomic, strong) Shop *shop; - (instancetype)initWithShop:(Shop *)shop; + (instancetype)shopViewWithShop:(Shop *)shop; @end
// 2> ShopView.m中:实现.m 中的
1. 实现.h文件中声明的工厂等快速创建自定义控件的方法,
2. 然后因为要设置模型数据和自定义控件上的子控件的数据,所以要重写模型数据的setter方法进行其操作。
3. 因为要实现添加子控件到自定义控件上所以要重写 initWithFrame方法。(因为自定义控件在调用init方法初始化的时候,init方法会调用initWithFrame方法,从而即可将子控件加入到自定义控件上的目的),你也可以选用其他方法来实现增加子控件,而不是必须用initWithFrame才行,只要能达到添加子控件的效果即可。
注意:(不在initWithFrame方法中不要设置其子控件的frame,因为此时自定义控件可能只是做了初始化,而并未设置其frame,所以子控件就无法根据其frame来设置子控件的frame了),
4. 因为要设置自定义控件上子控件的frame,所以要实现其layoutSubViews方法。(layoutSubViews:专门用于设置子控件的frame)
#import "ShopView.h" #import "Shop.h" @implementation ShopView - (instancetype)initWithShop:(Shop *)shop{ if (self = [super init]) { self.shop = shop; } return self; } + (instancetype)shopViewWithShop:(Shop *)shop{ return [[self alloc] initWithShop:shop]; } - (nonnull instancetype)initWithFrame:(CGRect)frame{ if (self = [super initWithFrame:frame]) { // 1. 子控件imageView创建 UIImageView *subImageView = [[UIImageView alloc] init]; [self addSubview:subImageView]; self.iconView = subImageView; // 2. 子控件lable创建 UILabel *subLable = [[UILabel alloc] init]; subLable.text = self.shop.name; subLable.textAlignment = UITextAlignmentCenter; [self addSubview:subLable]; self.nameView = subLable; } return self; } - (void)layoutSubviews{ [super layoutSubviews]; self.iconView.frame = CGRectMake(0, 0, 70, 70); self.nameView.frame = CGRectMake(0, 70, 70 , 30); } - (void)setShop:(Shop *)shop{ _shop = shop; self.iconView.image = [UIImage imageNamed:self.shop.icon]; self.nameView.text = self.shop.name; } @end
// **************************************************************************************************
// 3. 在控制器文件中,要做的就是获取模型数据,然后依次将模型数据展示到自定义控件上显示即可。
1. 拥有模型数据:
1> 在控制器中设置一个保存模型plist文件中模型数组的属性。
@property (nonatomic, strong) NSArray *shops;
2> 重写shops属性模型的getter方法,从而得到我们想要的模型数组集合,我们可以解析plist文件获取到模型数组。设置模型数组,通过懒加载解析plist文件中数据进行初始化操作即可。
// 懒加载
- (NSArray *)shops{ NSArray *dictArray = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"shops.plist" ofType:nil]]; NSMutableArray *shopsArray = [NSMutableArray array]; for (NSDictionary *dict in dictArray) { Shop *shop = [Shop shopWithDict:dict]; [shopsArray addObject:shop]; } _shops = shopsArray; return _shops; }
2. 现在我们即可初始化一个自定义控件出来,然后设置其模型数据,最后将其添加到控制器的view中即可显示
ShopView *shopView = [ShopView shopViewWithShop:self.shops[index]]; // 声明并初始化指定模型的数据到自定义的控件上。
//(你要明白:这句代码将要干什么事情:
// @1:它会调用在shopViewWithShop:从而间接调用init方法,然而在init方法中系统会自动调用initWithFrame方法,所有这时它又会调用initWithFrame方法从而实现了添加子控件到自定义控件上。
// @2:ShopView类的shopViewWithShop:方法 -》对象方法initWithShop:来初始化一个自定义的控件,从而间接调用init方法,然而在init方法中系统会自动调用initWithFrame方法,所有这时它又会调用initWithFrame方法从而实现了添加子控件到自定义控件上。并且将传入的模型将其设置到自定义控件的模型数据属性,这样就会调用其set方法setShop:,在set方法中就会完成,将模型数据展示到控件上展示数据了。
)
// 4. 计算自定义控件添加到的frame
shopView.frame = CGRectMake(subViewX, subViewY, subViewWidth, 70);
// 5. 将搭建好的自定义控件添加到控制器的view上
[self.view addSubview:shopView];