Nested Xib Views - 使用XIB实现嵌套自定义视图

在进行iOS开发的过程中,对于一些复杂的界面,我们可以通过Interface Builder,这个Xcode集成的可视化界面编辑工具在完成,这回节省大部分时间以及代码量。它的使用方法这里不做介绍了,这次我要介绍是使用它来实现一个嵌套的自定义视图。解释一下就是,我们使用IB自定义了一个View,然后又在其他的xib文件中使用了这个View,那么这就是所谓的嵌套自定义视图。之所以要介绍它,是因为我自己在使用它的时候遇到了一些问题,一方面写下来做个记录供自己查看,另一方面我相信大家在使用的时候应该也会遇到这样的问题,方便大家。
下面使用的示例代码我已经放到Github上了,项目地址,有需要的朋友可以去查看,Demo非常简单,主要是介绍这个知识点。Question首先我们创建一个SingleView的工程,项目使用StoryBoard,(使用Xib也无所谓,因为有些老的项目可能还没有使用到StoryBoard),然后创建一个CustomView作为我们的自定义视图。


有时对于复杂的界面我们可能会拆分出来对它进行单独处理,又有可能它的界面布局很复杂,这时我们就会用Interface Builder对它的布局进行处理。这里的CustomView就是这样一个视图,所以我们为它创建一个xib文件,我们通常的作法就是把xib中的View的custom class更改为我们的CustomView。
接下来对我们的界面进行布局,并连接输出口,编写响应逻辑,这里我放了一个ImageView和一个Label在这里,并把View的背景色设置为浅灰色。
自定义的View制作完成,回到我们ViewController的xib文件,拖入两个View并把他们的custom class更改为CustomView。

这时,我们算是工作做完了,运行程序,结果悲剧了,怎么不是我们想要的结果,为什么只生成了两个空白的视图,我们视图上的图片和文字哪里去了?



在CustomView中的awakeFromeNib方法中增加断点调试发现,在CustomView初始化完成后,ImageView和Label并没有被初始化,他们仍然是nil。这就是在嵌套使用xib自定义视图时非常容易出现的问题,我们觉得被嵌套的视图能够正常显示出来,但是实际上它并没有被按照我们在xib上指定的方式被初始化。



Solution
那么如何解决这种问题,以及这种问题又是如何出现的呢?其实这主要是由于我们对xib文件的加载原理不熟悉所导致的,我们以为定义一个View,创建一个xib文件并布局好它的子视图,让后将它使用在另外一个xib文件中,把custom class改成它,然后xib的加载系统会自动为我们做好其余的一切。其实并不是这样的。

这样做xib加载系统只会为我们创建一个CustomView的对象,但这并不包括CustomView所对应的xib文件中的部分,所以只创建了一个空白的View。
解决他们有两种方式,不过最终的思路都是通过代码强制使CustomView的xib部分被加载。第一种是通过代码创建CustomView的对象,然后addSubview到viewController的view上。第二种是在CustomView的实现文件里,通过重载一些方法,来完成加载xib文件。
这两种方法各有利弊,第一种使用起来方便也好理解,但是当嵌套的层级比较多的时候或者一个View
中有多个这样的CustomView时,这种方式就会显得过于麻烦。而第二种虽然理解起来有些难度,但是当你处理好之后,直接在需要的xib文件中拖入view,改个custom class,就能直接生成需要的对象了,并且也能够在xib中对他们进行直接布局,不再需要用代码去布局了。

  • NO 1.
    先来介绍第一种方法,很简单,就是找到xib文件,生成对象,设置属性,addsubview到视图上。


  • NO 2.
    第二种方法是通过重载initWithCoder方法来实现,因为通过xib来创建一个对象会调用到这个方法,所以我们需要在这个方法里做一些处理,把这个CustomView的xib中的内容加载进来,这时同样是需要通过代码来来加载,首先附上代码
- (id)initWithCoder:(NSCoder *)aDecoder
{
    if (self = [super initWithCoder:aDecoder]) {
        UIView *containerView = [[[UINib nibWithNibName:@"CustomView" bundle:nil] instantiateWithOwner:self options:nil] objectAtIndex:0];
        CGRect newFrame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
        containerView.frame = newFrame;
        [self addSubview:containerView];
    }
    return self;
}

此外,还要这里的输出口以及设置custom class的位置跟第一种方式有所不同,这里需要取消掉xib中view的custom class,再将跟它连接的图片与文字的输出口取消掉,在这里这个view只是被当做一个容器来处理,它跟Customview没有直接关系,它将来会被addSubview到CustomView上,除此之外还要把xib的File's ower的custom class改成CustomView,表示这个xib文件的持有者是CustomView。再把它与图片和文字通过输出口连接起来。


这个时候在运行程序就看到了我们想要的结果了。_

其实想要实现第二种解决方案所要的效果,还有一种方式,它是通过重载awakeAfterUsingCoder:
方法来实现的,这个方法的返回值会替换掉真正的加载对象,所以在具体的加载CustomView
的方式又与第一种相同,所以xib
的输出口连接与custom class
的设置也与第一种解决方案相同。不过这种方式是更复杂也更难于理解的,不推荐使用,因为上一个方法就能很好的解决这个问题了,这里只是贴出这个方法的代码,有想仔细研究的请参看文章底部的参考文章。

- (id) awakeAfterUsingCoder:(NSCoder*)aDecoder {
    BOOL isJustAPlaceholder = ([[self subviews] count] == 0);
    if (isJustAPlaceholder) {
        CustomView* theRealThing = [[self class] getClassObjectFromNib];

        theRealThing.frame = self.frame;

        // make compatible with Auto Layout
        self.translatesAutoresizingMaskIntoConstraints = NO;
        theRealThing.translatesAutoresizingMaskIntoConstraints = NO;

        // convince ARC that we're legit, unnecessary since at least Xcode 4.5
        CFRelease((__bridge const void*)self);
        CFRetain((__bridge const void*)theRealThing);

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

推荐阅读更多精彩内容