iOS回顾笔记(03) -- 自定义View的封装和xib文件的使用详解

iOS开发中,我们常常将一块View封装起来,以便于统一管理内部的子控件。如iOS回顾笔记(02)中的"书"这一自定义View。

下面就来说说自定义View的封装以及它的多种实现方式

自定义UIView(控件)的封装

什么是View的封装

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

封装自定义控件的基本步骤

  • 重写 - (instancetype)initWithFrame方法,在此方法中创建并添加子控件。
  • 提供一个便利的构造方法,通常为 类方法,快速创建一个实例对象
  • 重写 - (void)layoutSubviews方法,在此方法中设置子控件的frame,一定要调用[super layoutSubviews]
  • 设置模型属性,在set方法中,给对应的子控件赋值。

看代码

XYBookView.h 头文件

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

@interface XYBookView : UIView

// 只放一个数据属性用来赋值,内部布局,放到.m 中自己管,不暴露给外界
@property (nonatomic, strong) XYBook *book;

@end


实现文件 .m文件
#import "XYBookView.h"
#include "XYBook.h"

@interface XYBookView ()

// 两个内部子控件在内部包装起来,不给外界看到
@property (nonatomic, weak) UIImageView *icon;

@property (nonatomic, weak) UILabel *label;

@end

@implementation XYBookView

// 1.重写initWithFrame:方法,创建子控件并添加到自己上面
- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {

        // 1. 创建书图标
        UIImageView *icon = [UIImageView new];
        self.icon = icon;
        [self addSubview:self.icon];

        // 2.书名
        UILabel *bookName = [UILabel new];
        bookName.textAlignment = NSTextAlignmentCenter;
        self.label = bookName;
        [self addSubview:self.label];

    }
    return self;
}

// 2.重写layoutSubviews,给自己内部子控件设置frame
- (void)layoutSubviews
{
    [super layoutSubviews];
    CGSize size = self.frame.size;
    self.icon.frame = CGRectMake(0, 0, size.width , size.height * 0.7);
    self.label.frame = CGRectMake(0, size.height * 0.7, size.width, size.height *(1 - 0.7));

}

// 3.调用模型的set方法,给书的子控件赋值,
- (void)setBook:(XYBook *)book
{
    _book = book;
    self.icon.image = [UIImage imageNamed:book.icon];
    self.label.text = book.name;
}
@end

以上是纯代码实现的View的封装,写起来有些麻烦。

开发中另一种常用的封装方式是Xib,下面介绍Xib的相关知识。

XIB和Storyboard的比较

共同点

  • 都是用来描述软件界面
  • 最后都是 Interface Builder工具来编译
  • 本质上都是转化成代码去创建控件

不同点

  • Xib是轻量级的,用来描述局部的UI界面
  • Storyboard是重量级的,不仅可以用来描述整个应用的多个页面,而且可以展示页面间的跳转关系。

Xib的创建

2017-03-03 23.43.06.gif

Xib的使用

Xib的加载方式

Xib作为局部UI的描述文件,它也是一种项目内的资源文件,在项目中查找路劲也是在[UIBundle mainBundle]中,它的加载方式有两种

方式1

在对应的mainBundle中加载XYBookView类型的nib文件,返回是数组,取数组中对应的view即可

NSArray *views = [[NSBundle mainBundle] loadNibNamed:@"XYBookView" owner:nil options:nil];
XYBookView *bookView = views.firstObject;

方式2

Xib/Storyboard文件编译之后生成的都是 Nib文件,加载XYBookView.xib对应的.nib文件,通过.nib文件实例化的数组中取到对应的XYBookView实例对象。

UINib *nib = [UINib nibWithNibName:@"XYBookView" bundle:nil];
XYBookView *bookView = [[nib instantiateWithOwner:nil options:nil] firstObject];

使用注意

  • 进行类绑定,告诉Xib它是什么类型,用来描述那个文件
  • 通常Xib文件名和要描述的文件同名,易于辨认和管理
Snip20170304_1.png

Xib的使用细节完善

  • Xib用来描述控件,是把原来代码创建的内容直接用图形化来展示了
  • Xib里面的子控件需要拖线到对应文件中,以便文件内赋值和其他使用
Snip20170304_2.png

封装Xib的加载过程


#import "XYBookView.h"
@interface XYBookView ()
// 封装一个快速返回实例对象的类方法
+ (instancetype)bookView;

@end

@implementation XYBookView

+ (instancetype)bookView
{
    // 封装Xib的加载过程
    return [[NSBundle mainBundle] loadNibNamed:@"XYBookView" owner:nil options:nil].firstObject;
    
}

小结

一个控件有两种创建方式

  • 通过代码创建
    • 初始化一定会调用 -(instancetype)initWithFrame:方法
  • 通过Xib\StoryBoard创建
    • 初始化不会调用 -(instancetype)initWithFrame:方法,只会调用-(instancetype)initWithCoder:方法
    • 初始化完成之后,回调用awakeFromNib方法

通过两种加载方式,可以发现:有时候我们希望在控件初始化时做一些初始化的操作,如添加子控件,设置属性等,这时候需要根据控件的加载方式来选择-(instancetype)initWithFrame:-(instancetype)initWithCoder:awakeFromNib三个方法中的哪个方法进行初始化。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容