在进行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 owercustom 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;}

参考资料

转载于:https://www.cnblogs.com/melons/p/5792014.html

使用XIB实现嵌套自定义视图相关推荐

  1. 使用XIB实现嵌套自定义XIB视图

    在进行 iOS 开发的过程中,对于一些复杂的界面,我们可以通过 Interface Builder 这个 Xcode 集成的可视化界面编辑工具在完成,这回节省大部分时间以及代码量.它的使用方法这里不做 ...

  2. 设置视图IOS开发(97)之自定义视图之使用XIB自定义一个UIView

    本文纯属个人见解,是对前面学习的总结,如有描述不正确的地方还请高手指正~ 1 前言 Xcode中集成的BI中的控件非常丰富,但有时候不免不能满足我们的需求,今天我们来学习一下如何使用XIB自定义一个U ...

  3. Android自定义控件学习(三)----- 自定义视图组件

    自定义视图组件 说明 Android提供了用于构建UI的基础上,基本布局类一个复杂和强大的组件化模式:View和 ViewGroup.首先,该平台包含各种预构建的View和ViewGroup子类 - ...

  4. Android自定义视图四:定制onMeasure强制显示为方形

    这个系列是老外写的,干货!翻译出来一起学习.如有不妥,不吝赐教! Android自定义视图一:扩展现有的视图,添加新的XML属性 Android自定义视图二:如何绘制内容 Android自定义视图三: ...

  5. Xamarin XAML语言教程ContentView视图作为自定义视图的父类

    Xamarin XAML语言教程ContentView视图作为自定义视图的父类 自定义视图的父类:ContentView视图可以作为自定义视图的父类. [示例14-2]以下将自定义一个颜色视图.具体的 ...

  6. ​Xamarin iOS教程之自定义视图

    ​Xamarin iOS教程之自定义视图 Xamarin iOS自定义视图 工具栏中的视图在实际应用开发中用的很多,但是为了吸引用户的眼球,开发者可以做出一些自定义的视图. [示例2-33]以下将实现 ...

  7. Android Studio自定义视图无法预览

    Android Studio自定义视图没有办法预览 我想大家应该都和我一样,如果看到布局的编码的时候如果右边能够非常直观地显示出对应的视图,心里会非常舒心,像官方提供的tools命名空间就是为了这个目 ...

  8. MVC自定义视图规则

    自定义规则: using System.Web.Mvc; using System.Configuration;namespace Research {public class ViewConfig{ ...

  9. 【eoe教程】Android中自定义视图的绘制方法

    原文链接 :http://android.eoe.cn/topic/ui 自定义视图最重要的部分是它的外观.你可以根据应用的需求简单或复杂的实现它. 这个教程包含了最常见的操作. 重写onDraw() ...

最新文章

  1. jquery .parents(), .parent() 和 closest()方法
  2. boost.asio包装类st_asio_wrapper开发教程(2014.5.23更新)(一)-----转
  3. 如何制作在线参考手册
  4. 大型网站核心要素--伸缩性
  5. Sublime Text 3 注册激活码
  6. mysql 权限命令 revoke_mysql 权限管理使用 grant/revoke
  7. 我心中的ASP.NET Core 新核心对象WebHost(二)
  8. c#养老院老人信息管理系统源码 论文_辽宁吃的好的社区养老院位置,爱心养老院_抚顺市望花区社会养老中心...
  9. python 无序列表中第k大元素_Python要求O(n)复杂度求无序列表中第K的大元素实例...
  10. luogu P4070 [SDOI2016]生成魔咒
  11. 基于Prometheus+Grafana监控SQL Server数据库
  12. python编程案例教程第四章_Python编程入门-第四章 流程控制 -学习笔记
  13. LINUX下载编译Which
  14. pythonpm2.5空气质量提醒_Python实现抓取城市的PM2.5浓度和排名
  15. .NET CLR之垃圾回收(GC)
  16. 从零开始学编程系列汇总
  17. 线性方程组解的数目判定
  18. ERROR command failed: npm install --loglevel error --legacy-peer-deps
  19. QT读写文本文件编码设置
  20. python字典求平均值_查找字典中值的平均值

热门文章

  1. 程序员转行房屋设计师,本来不信,当看到楼梯后,我信了!
  2. MDFR :基于人脸图像复原和人脸转正联合模型的人脸识别方法
  3. 提供基于transformer的pipeline、准确率达SOTA
  4. 总结 | “卷积”其实没那么难以理解
  5. Github | 如何用神经网络识别系外行星?
  6. 你还在担心开车看不到路标吗?我这这有个路标分类的来玩玩啊(有源码有数据集)
  7. 730阵列卡支持多大硬盘_730元/瓶的光瓶李渡酒销售过亿后,李渡还有哪些大招?...
  8. php判断与网站访问时间,织梦CMS模板用php判断某个时间段显示和隐藏内容
  9. linux ioctl 设备只读,linux – 尝试SSH时设备的ioctl不合适
  10. 浪潮服务器2016销售额,Gartner:2016年前三季度浪潮服务器销售额中国第一