在进行iOS开发的过程中,对于一些复杂的界面,我们可以通过Interface Builder这个Xcode集成的可视化界面编辑工具在完成,这回节省大部分时间以及代码量。它的使用方法这里不做介绍了,这次我要介绍是使用它来实现一个嵌套的自定义视图。解释一下就是,我们使用IB自定义了一个View,然后又在其他的xib文件中使用了这个View,那么这就是所谓的嵌套自定义视图。之所以要介绍它,是因为我自己在使用它的时候遇到了一些问题,一方面写下来做个记录供自己查看,另一方面我相信大家在使用的时候应该也会遇到这样的问题,方便大家。

Question

首先我们创建一个SingleView的工程,项目使用StoryBoard,(使用Xib也无所谓,因为有些老的项目可能还没有使用到StoryBoard),然后创建一个CustomView作为我们的自定义视图。

有时对于复杂的界面我们可能会拆分出来对它进行单独处理,又有可能它的界面布局很复杂,这时我们就会用Interface Builder对它的布局进行处理。这里的CustomView就是这样一个视图,所以我们为它创建一个xib文件,我们通常的作法就是把xib中的Viewcustom class更改为我们的CustomView

接下来对我们的界面进行布局,并连接输出口,编写响应逻辑,这里我放了一个ImageView和一个Label在这里,并把View背景色设置为浅灰色。

自定义的View制作完成,回到我们ViewControllerxib文件,拖入两个View并把他们的custom
class
更改为CustomView

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

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

Solution

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

这样做xib加载系统只会为我们创建一个CustomView的对象,但这并不包括CustomView所对应的xib文件中的部分,所以只创建了一个空白的View

解决他们有两种方式,不过最终的思路都是通过代码强制使CustomViewxib部分被加载。第一种是通过代码创建CustomView的对象,然后addSubviewviewControllerview上。第二种是在CustomView的实现文件里,通过重载一些方法,来完成加载xib文件。

这两种方法各有利弊,第一种使用起来方便也好理解,但是当嵌套的层级比较多的时候或者一个View中有多个这样的CustomView时,这种方式就会显得过于麻烦。而第二种虽然理解起来有些难度,但是当你处理好之后,直接在需要的xib文件中拖入view,改个custom class,就能直接生成需要的对象了,并且也能够在xib中对他们进行直接布局,不再需要用代码去布局了。

NO 1.

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

NO 2.

第二种方法是通过重载initWithCoder方法来实现,因为通过xib来创建一个对象会调用到这个方法,所以我们需要在这个方法里做一些处理,把这个CustomViewxib中的内容加载进来,这时同样是需要通过代码来来加载,首先附上代码

 
- (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的位置跟第一种方式有所不同,这里需要取消掉xibviewcustom class,再将跟它连接的图片与文字的输出口取消掉,在这里这个view只是被当做一个容器来处理,它跟Customview没有直接关系,它将来会被addSubviewCustomView上,除此之外还要把xibFile'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 Layoutself.translatesAutoresizingMaskIntoConstraints = NO;theRealThing.translatesAutoresizingMaskIntoConstraints = NO;// convince ARC that we're legit, unnecessary since at least Xcode 4.5CFRelease((__bridge const void*)self);CFRetain((__bridge const void*)theRealThing);return theRealThing;}return self;}

参考资料

使用XIB实现嵌套自定义视图的更多相关文章

  1. iOS-xib(使用XIB实现嵌套自定义视图)

    参考:http://wtlucky.github.io/geekerprobe/blog/2014/08/10/nested-xib-views/?utm_source=tuicool 因为主要练习x ...

  2. XIB自定义视图的整理

    - (void)setAppInfo:(AppInfo *)appInfo { _appInfo = appInfo; _icon.image = appInfo.image; _label.text ...

  3. 【转】ANDROID自定义视图——onMeasure,MeasureSpec源码 流程 思路详解

    原文地址:http://blog.csdn.net/a396901990/article/details/36475213 简介: 在自定义view的时候,其实很简单,只需要知道3步骤: 1.测量—— ...

  4. iOS 开发 Xib 的嵌套使用

    最近公司项目需要使用 Xib 中嵌套 Xib来布局界面的, 研究了很久才实现!!! 分享给大家,希望帮助到更多的开发者...... 开发中自定义界面有两种方式 一: 纯代码实现 适合单个极度复杂的界面 ...

  5. ANDROID自定义视图——onMeasure,MeasureSpec源码 流程 思路详解

    简介: 在自定义view的时候,其实很简单,只需要知道3步骤: 1.测量--onMeasure():决定View的大小 2.布局--onLayout():决定View在ViewGroup中的位置 3. ...

  6. 《连载 | 物联网框架ServerSuperIO教程》- 13.自定义视图显示接口开发,满足不同的显示需求

    1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...

  7. Android中的自定义视图控件

    简介 当现有控件不能满足需求时,就需要自定义控件. 自定义控件属性 自定义控件首先要继承自View,重写两个构造函数. 第一个是代码中使用的: public MyRect(Context contex ...

  8. 自定义视图引擎,实现MVC主题快速切换

    一个网站的主题包括布局,色调,内容展示等,每种主题在某些方面应该或多或少不一样的,否则就不能称之为不同的主题了.每一个网站至少都有一个主题,我这里称之为默认主题,也就是我们平常开发设计网站时的一个固定 ...

  9. SpringMVC自定义视图 Excel视图和PDF视图

    一.自定义视图-Excel视图 1.Maven依赖 引入POI <dependency> <groupId>org.apache.poi</groupId> < ...

随机推荐

  1. 初学者第二节之HelloWorld

    ava具有简单性.面向对象.分布式.健壮性.安全性.平台独立与可移植性.多线程.动态性等特点.Java可以编写桌面应用程序.Web应用程序.分布式系统和嵌入式系统应用程序等. 一.首先创建一个Hell ...

  2. Luogu P1410 子序列

    题目大意: 给定一个长度为\(N\)(\(N\)为偶数)的序列,] 问能否将其划分为两个长度为\(\frac{N}{2}\)的严格递增子序列, 输入一共有\(50\)组数据,每组数据保证\(N \le ...

  3. [Luogu4175][CTSC2008]网络管理Network

    又是权限题qwq 一句话题意:带修改树上路径第k大 sol 数据结构?还是再见吧.学一手合格的整体二分,只有思维强大,才能见题拆题. 如果你做过整体二分的动态区间第k大就会发现这是一样的题. 无非是区 ...

  4. iBrand 教程 0.1:Windows + Homestead 5 搭建 Laravel 开发环境

    统一开发环境 为了保证在学习和工作过程中避免因为开发环境不一致而导致各种各样的问题,Laravel 官方为了我们提供了一个完美的开发环境 Laravel Homestead,让我们无需再本地安装 PH ...

  5. Spring9:Autowire(自动装配)机制

    为什么Spring要支持Autowire(自动装配) 先写几个类,首先定义一个Animal接口表示动物: public interface Animal { public void eat(); } ...

  6. 初探WebSocket

    初探WebSocket node websocket socket.io 我们平常开发的大部分web页面都是主动'拉'的形式,如果需要更新页面内容,则需要"刷新"一个,但Slack ...

  7. Rotation Proposals

    Rotation Proposals 论文Arbitrary-Oriented Scene Text Detection via Rotation Proposals 这篇论文提出了一个基于Faste ...

  8. maven导入多模块项目

    maven导入多模块项目   一.SVN上Maven多模块项目结构 使用eclipse导入SVN上的Maven多模块项目 Maven多模块项目所在SVN目录 二.eclipse通过SVN导入到工作空间 ...

  9. 本地mysql无法连接原来是这里有问题啊。。。。。。

    1.怎么解决localhost无法链接本地mysql数据库问题_百度经验http://jingyan.baidu.com/article/d45ad14896d1cd69542b805c.html 2 ...

  10. 对于最近线上服务以及京东等大型互联网公司对java工程师要求的一些思考

    当下线上服务为了减少上线,经常搞成配置化,配置化对于版本以及持续集成本身是很大破坏,对于此,我个人持保留态度, 是反对过多东西进行配置化,其实配置化本身没有什么问题,关键是动态对配置进行修改而没有与代 ...