纯代码封装自定义View和XIB封装自定义View的区别

一、背景
如果一个view内部的子控件比较多,一般会考虑自定义一个view,把它内部子控件的创建屏蔽起来,不让外界关心,
外界可以传入对应的模型数据给view,view拿到模型数据后给内部的子控件设置对应的数据

二、纯代码封装View

1.封装控件的基本步骤
(1).在initWithFrame:方法中添加子控件,提供便利构造方法
(2).在layoutSubviews方法中设置子控件的frame(一定要调用super的layoutSubviews)
(3).增加模型属性,在模型属性set方法中设置数据到子控件上

2.编写代码需要注意
系统的调用流程:initWithFrame: —> layoutSubviews
(1).当重写init方法,用于创建和初始化子控件,在通过init方法创建View时,系统也会先调用对象的initWithFrame:方法,再调用对象的init方法;如果直接调用initWithFrame:方法初始化对象,则不会调用去调用init方法
(2).不能通过重写init方法设置子控件的Frame,因为系统是先调用initWithFrame:方法,initWithFrame:方法创建的对象Frame值默认为0,如果子控件的Frame不依赖于父控件的Frame就可以设置,但是一般都是通过父控件的Frame计算子控件的Frame
(3).不能通过重写initWithFrame:方法设置子控件的Frame,因为设置的子控件的Frame只有效一次,如果父控件的Frame被再次的修改了,就会调用layoutSubviews方法重新设置子控件的Frame,在layoutSubviews方法中没有重新设置子控件的Frame,且子控件的Frame与父控件的Frame有依赖,子控件的Frame就会被设置为0;如果要让子控件的Frame永远有效,子控件的Frame只要不依赖于父控件的Frame就可以,但是一般都是通过父控件的Frame计算子控件的Frame
(4).如果子控件的Frame依赖于父控件的Frame,就必须在layoutSubviews方法里面给子控件的Frame设置值
(5).系统不会去调用nitWithCoder:和awakeFromNib方法
3.代码举例

---------- 封装自定义的View的.h文件

#import <UIKit/UIKit.h>
#import "SSData.h"

@interface ANewView : UIView

@property (nonatomic,strong) SSData *data;

+ (instancetype)aNewView;

@end

---------- 封装自定义的View的.m文件

#import "ANewView.h"

@interface ANewView ()

@property (nonatomic,strong) UIButton *button;

@property (nonatomic,strong) UILabel *lable;

@end

@implementation ANewView

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

//重写initWithFrame:方法创建子控件和初始化子控件的属性(除属性Frame的值不可以在此设置)
- (instancetype)initWithFrame:(CGRect)frame {

  if (self = [super initWithFrame:frame]) {
    //创建子控件button
    self.button = [[UIButton alloc] init];
    self.button.backgroundColor = [UIColor orangeColor];
    [self addSubview: self.button];
    //创建子控件Lable
    self.lable = [[UILabel alloc] init];
    self.lable.backgroundColor = [UIColor yellowColor];
    self.lable.textAlignment = NSTextAlignmentCenter;
    [self addSubview:self.lable];

  }

  return self;
}

//只要父控件的Frame发生改变,就会调用layoutSubviews方法
//重写layoutSubviews方法,给子控件的Frame设置值
- (void)layoutSubviews {

   [super layoutSubviews];
  //设置子控件的Frame
  CGFloat superW = self.frame.size.width;
  CGFloat superH = self.frame.size.height;
  self.button.frame = CGRectMake(0, 0, superW, superH / 2);
  self.lable.frame = CGRectMake(0, superH / 2 + 5, superW, superH - (superH / 2 + 5));
}

//重写set方法给子控件设置数据
- (void)setData:(SSData *)data {

  //必须先给成员变量赋值,不赋值,以后调用get方法取值就取不到值
  _data = data;

  //设置成员变量的数据
  [self.button setTitle:data.buttonStr forState:UIControlStateNormal];
   self.lable.text = data.lableStr;
}

@end

---------- 数据模型的.h文件

#import <Foundation/Foundation.h>

@interface SSData : NSObject

@property (nonatomic,strong) NSString *buttonStr;

@property (nonatomic,strong) NSString *lableStr;

@end

---------- 数据模型的.m文件

#import "SSData.h"

@implementation SSData

@end

---------- 调用自定义的View

#import "ViewController.h"
#import "ANewView.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  //数据模型
  SSData *dataView = [[SSData alloc] init];
  dataView.buttonStr = @"Hello";
  dataView.lableStr = @"World";

  //创建View
  ANewView *newView = [[ANewView alloc] init];
  newView.frame = CGRectMake(100,100, 200, 100);
  newView.backgroundColor = [UIColor blueColor];
  newView.data = dataView;
  [self.view addSubview:newView];

  //重新给View对象赋值
  dataView.buttonStr = @"天天";
  dataView.lableStr = @"编程";
  newView.frame = CGRectMake(80,200, 250, 100);
  newView.data = dataView;

}

@end

三、XIB封装一个自定义的View

1.封装控件的基本步骤
(1).新建自定义控件类,必须继承自与之相关的类;如:封装的是view就要继承自UIView
(2).新建XIB文件,自定义View,修改xib中view的类名为新建的自定义控件类
(3).增加模型属性,在模型属性set方法中设置数据到子控件上

2.XIB的加载方法
方法1
NSArray *views = [[NSBundle mainBundle] loadNibNamed:@”xib文件名” owner:nil options:nil];
方法2
UINib *nib = [UINib nibWithNibName:@”xib文件名” bundle:nil];
NSArray *views = [nib instantiateWithOwner:nil options:nil];

3.编写代码需要注意
系统的调用流程: initWithCoder —> awakeFromNib —> layoutSubviews
(1).加载XIB后,系统会自动调用 - (id)initWithCoder:(NSCoder *)aDecoder 方法来初始化控件,其中aDecoder是一个解析器,对XIB进行解析;不能在这个方法中给XIB里自定义view的子控件进行初始化,因为initWithCoder:方法是‘处于正在初始化’,有些细节还没有初始化完毕,可能还没给子控件进行连线等;还可以在initWithCoder:方法里代码创建子控件并进行初始化,但不能设置它的Frame值;一般XIB的初始化操作在awakeFromNib里进行

(2).如过还需要用代码添加子控件,可以通过重写initWithCoder:方法,在方法里面用代码添加子控件和初始化,添加的子控件的Frame值也要在layoutSubviews方法里设置。

(3).当控件从XIB中创建完毕后会调用awakeFromNib方法,XIB的所有的初始化操作应该在这个方法里进行,但不能在这个方法中对子控件设置Frame的值

(4).如果需要重新设置子控件的Frame值,应该在layoutSubviews方法里进行设置,因为父控件的Frame只要改变就就会调用该方法

(5).用XIB封装自定义的View,控件从XIB中创建的过程不会调用init方法和initWithFrame:方法

(6).XIB里自定义View必须设置成自动布局,即把View的 ‘Show the File inspector’ 里面的 ‘Use Auto Layout’ 前面的钩去掉;这样设置后才可以在layoutSubviews里重新设置自定义View的子控件Button的Frame值

4.XIB封装自定义的View具体实现
(1).创建XIB,并自定义View和其子控件
A.设计自定义View的类并与类的属性连线
设置1
设置11
B.设置自定义View为可变的尺寸、隐藏电池图标,View的背景色
设置2
设置3
C.设置子控件的背景色
设置4
设置5
D.设置子控件的尺寸
设置6
设置7
E.关闭自动布局(Autolayout),才可以在layoutSubviews里重新设置Button的Frame值
设置8

5.新建自定义控件类的代码如下

---------- 新建自定义控件类的.h文件

#import <UIKit/UIKit.h>
#import "SSData.h"

@interface ANewView : UIView

@property (nonatomic,strong) SSData *data;

+ (instancetype)aNewView;

@end

---------- 新建自定义控件类的.m文件

#import "ANewView.h"

@interface ANewView ()

@property (weak, nonatomic) IBOutlet UIButton *button;


@property (nonatomic,weak) IBOutlet UILabel *lable;

@property (nonatomic,strong) UIImageView *imageView;

@end

@implementation ANewView

+ (instancetype)aNewView {
  //方式一
  //ANewView *view = [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass(self) owner:nil options:nil] lastObject];

  //方式二
  UINib *nib = [UINib nibWithNibName:NSStringFromClass(self) bundle:nil];
  ANewView *view = [[nib instantiateWithOwner:nil options:nil]lastObject];

  return view;
}

//重写initWithCoder:用代码添加子控件
- (id)initWithCoder:(NSCoder *)aDecoder {


  if (self = [super initWithCoder:aDecoder]) {

    //可以用代码创建子控件并对其初始化
    self.imageView = [[UIImageView alloc] init];
    [self addSubview:self.imageView];
    self.imageView.backgroundColor = [UIColor yellowColor];

  }

  return self;
}

//当XIB完全初始化完毕后,会调用这个方法,可以在这个方法中对XIB的子控件进行初始化
-(void)awakeFromNib {

  //一定要调用父类的awakeFromNib方法
  [super awakeFromNib];

  self.button.backgroundColor = [UIColor yellowColor];
  self.lable.backgroundColor = [UIColor orangeColor];

}

//给子控件重新布局
- (void)layoutSubviews {

  //一定要调用父类的layoutSubviews方法
  [super layoutSubviews];

  //设置子控件的Frame

  CGFloat superW = self.frame.size.width;
  CGFloat superH = self.frame.size.height;

  //XIB里自定义View必须设置成自动布局,不然Button的Frame不能成功赋值
  self.button.frame = CGRectMake(0, 0, superW, superH / 3 - 5);

  CGFloat lableY = self.button.frame.origin.y + self.button.frame.size.height + 5;
  self.lable.frame = CGRectMake(0, lableY, superW, superH / 3 - 5);

  CGFloat imageY = self.lable.frame.origin.y + self.lable.frame.size.height + 5;
  self.imageView.frame = CGRectMake(0,imageY, superW, superH / 3 - 5);

}

//重写set方法给子控件设置数据
- (void)setData:(SSData *)data {

  //必须先给成员变量赋值,不赋值,以后调用get方法取值就取不到值
  _data = data;

  //设置成员变量的数据
  [self.button setTitle:data.buttonStr forState:UIControlStateNormal];
   self.lable.text = data.lableStr;
}

@end

---------- 数据模型的.h文件

#import <Foundation/Foundation.h>

@interface SSData : NSObject

@property (nonatomic,strong) NSString *buttonStr;

@property (nonatomic,strong) NSString *lableStr;

@end

---------- 数据模型的.m文件

#import "SSData.h"

@implementation SSData

@end


---------- XIB封装的自定义View的调用

#import "ViewController.h"
#import "ANewView.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  //数据模型
  SSData *dataView = [[SSData alloc] init];
  dataView.buttonStr = @"Hello";
  dataView.lableStr = @"World";

  //创建View
  ANewView *newView = [ANewView aNewView];
  newView.frame = CGRectMake(100,100, 200, 100);
  newView.data = dataView;
  [self.view addSubview:newView];

  //重新给View对象赋值
  dataView.buttonStr = @"天天";
  dataView.lableStr = @"编程";
  newView.frame = CGRectMake(80,200, 250, 200);
  newView.data = dataView;

}

@end

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值