iOS开发之使用xib自定义View的步骤
iOS开发之使用xib自定义View的步骤
shenhuniurou 发表于2年前
iOS开发之使用xib自定义View的步骤
  • 发表于 2年前
  • 阅读 19
  • 收藏 0
  • 点赞 1
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

1、首先创建一个view对象文件继承自UIView

2、再创建一个xib文件,命名和自定义view相同(其实Xcode创建view文件的时候就有一个选项提示:Also create XIB file,我猜想是创建View文件时同时创建同名的xib文件,但是现在是无法勾选的,我还不知道原因,所以现在只能单独创建),注意要选择User Interface里面的View

这样就得到了三个同名的文件(我就以Book为例)


3、修改xib文件中的类名,因为我们原先创建的xib文件是UIView类型,但是要把它改成我自定义的view类型

把UIView改成我刚刚创建的自定义View名:XXBookView

4、把xib的加载过程封装到自定义view的构造方法中,还要给自定义view增加一个XXBook的模型属性,用来设置数据。

模型XXbook:

//
//  XXBook.h
//  CustomViewWithXib
//
//  Created by Daniel on 16/3/3.
//  Copyright © 2016年 Daniel. All rights reserved.
//

#import <Foundation/Foundation.h>

@interface XXBook : NSObject

/** 图书封面 */
@property(nonatomic, strong) NSString *bookImage;

/** 图书作者 */
@property(nonatomic, strong) NSString *bookAuthor;

/** 图书价格 */
@property(nonatomic, strong) NSString *bookPrice;

@end

自定义View:

//
//  XXBookView.h
//  CustomViewWithXib
//
//  Created by Daniel on 16/3/3.
//  Copyright © 2016年 Daniel. All rights reserved.
//

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

@interface XXBookView : UIView

/** 图书模型属性 */
@property(nonatomic, strong) XXBook *book;

+ (instancetype)bookView;

+ (instancetype)bookViewWithBook:(XXBook *)book;


@end
//
//  XXBookView.m
//  CustomViewWithXib
//
//  Created by Daniel on 16/3/3.
//  Copyright © 2016年 Daniel. All rights reserved.
//

#import "XXBookView.h"
#import "XXBook.h"

@implementation XXBookView

+ (instancetype)bookView {
    
    return [self bookViewWithBook:nil];
    
}

+ (instancetype)bookViewWithBook:(XXBook *)book {
    
    //这里用同名xib的好处就体现了,用NSStringFromClass方法获得的类名也就是xib文件名,不用手动输,避免写错
    XXBookView *bookView = [[[NSBundle mainBundle]loadNibNamed:NSStringFromClass(self) owner:nil options:nil] firstObject];
    
    bookView.book = book;
    return bookView;
    
}


@end

5、在类扩展中增加子控件属性,关联xib中的子控件

//
//  XXBookView.m
//  CustomViewWithXib
//
//  Created by Daniel on 16/3/3.
//  Copyright © 2016年 Daniel. All rights reserved.
//

#import "XXBookView.h"
#import "XXBook.h"

/** 类扩展中增加子控件属性,关联xib中的子控件 */
@interface XXBookView()

@property (weak, nonatomic) IBOutlet UIImageView *bookView;

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

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

@end

@implementation XXBookView

+ (instancetype)bookView {
    
    return [self bookViewWithBook:nil];
    
}

+ (instancetype)bookViewWithBook:(XXBook *)book {
    
    //这里用同名xib的好处就体现了,用NSStringFromClass方法获得的类名也就是xib文件名,不用手动输,避免写错
    XXBookView *bookView = [[[NSBundle mainBundle]loadNibNamed:NSStringFromClass(self) owner:nil options:nil] firstObject];
    
    bookView.book = book;
    return bookView;
    
}


@end

6、模型属性的setter方法中将数据设置到子控件上去。

//
//  XXBookView.m
//  CustomViewWithXib
//
//  Created by Daniel on 16/3/3.
//  Copyright © 2016年 Daniel. All rights reserved.
//

#import "XXBookView.h"
#import "XXBook.h"

/** 类扩展中增加子控件属性,关联xib中的子控件 */
@interface XXBookView()

@property (weak, nonatomic) IBOutlet UIImageView *bookImage;

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

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

@end

@implementation XXBookView

+ (instancetype)bookView {
    
    return [self bookViewWithBook:nil];
    
}

+ (instancetype)bookViewWithBook:(XXBook *)book {
    
    //这里用同名xib的好处就体现了,用NSStringFromClass方法获得的类名也就是xib文件名,不用手动输,避免写错
    XXBookView *bookView = [[[NSBundle mainBundle]loadNibNamed:NSStringFromClass(self) owner:nil options:nil] firstObject];
    
    bookView.book = book;
    return bookView;
    
}

//setter方法:将数据设置到子控件上去
- (void)setBook:(XXBook *)book {
    
    _book = book;
    
    //设置子控件的数据
    self.bookImage.image = [UIImage imageNamed:book.bookImage];
    self.authorLable.text = book.bookAuthor;
    self.priceLable.text = book.bookPrice;
    
}


@end

当然,数据在模型的自定义构造方法中加载就行了,在ViewController中添加这个自定义view就行了

[self.view addSubview:[XXBookView bookView]];

运行的效果图:

我没有在模型中加载数据,所以看到view只有我手动改的背景色和文字。


共有 人打赏支持
粉丝 21
博文 78
码字总数 63826
×
shenhuniurou
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: