自定义视图是iOS开发中经常做的操作，它有助于创建美观个性的页面，同时也方便模块化管理。最长做的自定义视图差不多就是自定义cell了，苹果很人性化的为自定义cell添加了xib文件，方便通过xib快速的拖拽控件。而自定义其他的视图时，苹果又默认禁止添加对应的xib文件，不知道有没有小伙伴为此困惑呢？首先说一下一般的自定义视图的思想，一提到自定义视图，比如自定义一个label，恐怕最早想到的就是继承于UILabel，创建子类MyLabel，并在MyLabel中做一些自定义的操作。这里用到的是继承，纯代码也的确经常这样写。但是通过xib自定义视图，一般不是继承的关系，而是组合的关系。即xib文件中包含的视图对象只是自定义类中的一个属性，比如ViewController，xib中的view只是controller的一个view属性；再比如cocos2d中，自定义一个MySprite，也往往不是直接继承于CCSprite，而是组合的关系，继承于CCNode，包含一个属性为CCSprite对象。
本节将会使用xib的方式自定义上节中的HeaderView。demo地址：https://github.com/huibaoer/Demo_xib
1.创建工程，添加RootViewController。
2.创建Class HeaderView，File -> New -> File -> iOS Source (Cocoa Touch Class) -> Next -> Class命名为’HeaderView’，Subclass of选择’UIView’，此时’Also create XIB file’为禁止选择状态 -> Next -> 创建好HeaderView。
3.创建HeaderView.xib，File -> New -> File -> 左侧选项卡选择iOS下的User Interface -> 右侧选择View -> 点击Next按钮 -> 填写xib文件名称为‘HeaderView’ -> 点击create创建xib文件。
4.编辑xib文件，选中文件中的默认view，在右侧选中其属性设置栏，Simulated Metrics下设置Size为Freeform，Status Bar为None，这样就可以自由的拖拽view的大小且没有顶部状态栏。调整大小为320*100。在view上添加一个imageView作为头像，一个label作为标题，再一个label作为描述，修改一下背景颜色，方便识别。
5.关联HeaderView Class与xib文件，使用组合的方式将xib文件与HeaderView Class关联，即将xib中编辑好的视图拖拽到HeaderView Class中作为一个属性。选中xib文件的File’ Owner，选择右侧第三个选项卡，修改File’ Owner的Class为’HeaderView’。选择Xcode右上侧的一个两个圈的按钮，Xcode编辑区被分成两部分，左侧为xib，右侧为xib对应的File’s Owner(HeaderView)，选中编辑好的视图，点击右键，会有该视图支持的操作，选中New Referencing Outlet，拖拽到右侧HeaderView上，创建一个outlet（引用输出口，也就是一个属性）。将其他需要outlet的控件以同样的方法拖拽好。需要暴露在外边的属性拖拽到接口文件，不需要暴露给外面的尽量拖拽到延展中。
xib_demo_03_1
6.xib文件与HeaderView已经关联好，但是还差一步，自己添加的xib文件并不会像controller自带的xib文件会在loadView中自动加载，所以需要在HeaderView的init方法中加载xib文件，并将加载好的视图作为子视图贴到HeaderView上，参见setupXib方法。代码如下：
#import "UIKit/UIKit.h";
@interface HeaderView : UIView
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
@property (weak, nonatomic) IBOutlet UILabel *titleLabel;
@property (weak, nonatomic) IBOutlet UILabel *descriptionLabel;
@end
#import "HeaderView.h"
@interface HeaderView ()
@property (strong, nonatomic) IBOutlet UIView *contentView;
@end
@implementation HeaderView
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self setupXib];
}
return self;
}
- (void)setupXib {
[[NSBundle mainBundle] loadNibNamed:@"HeaderView" owner:self options:nil];
[self addSubview:self.contentView];
}
7.一切准备就绪，最后在RootViewController的viewDidLoad方法中创建HeaderView对象并展示：
// 1. create HeaderView
HeaderView *headerView = [[HeaderView alloc] initWithFrame:CGRectMake(0, 100, 320, 100)];
headerView.titleLabel.text = @"test title";
headerView.descriptionLabel.text = @"test description";
[self.view addSubview:headerView];
xib_demo_03_2
网友评论