使用IBInspectable和IBDesignable实现实时预览

Xcode6提供了这样一个激动人心的feature,在设计项目的时候建立一个自定义的界面来使你可以配置自定义的属性并控制它们实时显示出来,用IBInspectable和IBDesignable来完成。

IBInspectable

IBInspectable 属性提供了访问旧功能的新方式:用户自定义的运行时属性。从目前的身份检查器(identity inspector)中访问,这些属性在 Interface Builder 被整合到 Xcode 之前就可用了。他们提供了一个强有力的机制来配置一个 NIB,XIB,或者 storyboard 实例中的任何键值编码(key-value coded)属性

keyPath.png

虽然功能强大,运行时属性可能会使工作很繁琐。一个属性的关键字路径,类型和属性值需要在每个实例设置,没有任何自动完成或输入提示,这就需要前往文档或自定义子类的源代码仔细检查设置。 IBInspectable 属性彻底的解决了这个问题:在 Xcode 6,你现在可以指定任何属性作为可检查项并为你的自定义类建立了一个用户界面。

如果我们想要单纯的让项目中的view都改变某个样式,并且可以在inspect中显示出来,但是storyboard并不会实时更新的话,扩展UIView,重写属性即可。

123456789101112
MARK: - 扩展UIView,能出现在inspect栏里extension UIView {    @IBInspectable var cornalRadius: CGFloat {        get {            return layer.cornerRadius        }        set {            layer.cornerRadius = newValue            layer.masksToBounds = newValue > 0        }    }}

可检查属性仅仅是用户定义的运行时属性顶部的接口,所以支持相同的类型列表:布尔,字符串和数字(即,NSNumber 或任何数值类型),以及 CGPoint、CGSize、CGRect、UIColor 和 NSRange,额外增加了 UIImage。

这样所有view都可以改变圆角半径了。

但是我们想实时预览,并且可以指定某个view改变,就要用到IBDesignable

IBDesignable

如果这还不够,IBDesignable 自定义视图也在 Xcode 6 中亮相了。当应用到 UIView 或 NSView 子类中的时候,@ IBDesignable 让 Interface Builder 知道它应该在画布上直接渲染视图。你会看到你的自定义视图在每次更改后不必编译并运行你的应用程序就会显示。

标记一个自定义视图为 IBDesignable,只需在类名前加上 @IBDesignable 的前缀(或是 Objective-C 里的 IB_DESIGNABLE 宏)。你的初始化、布置和绘制方法将被用来在画布上渲染你的自定义视图:

12345678910111213141516171819202122232425262728
import UIKit

/// 实时渲染自定义类@IBDesignableclass RoundImageView: UIImageView {

/// 自定义圆角半径    @IBInspectable var cornerRadius: CGFloat = 0 {        didSet{            layer.cornerRadius = cornerRadius            layer.masksToBounds = cornerRadius > 0        }    }

/// 自定义边框宽度    @IBInspectable var borderWidth: CGFloat = 0 {        didSet{            layer.borderWidth = borderWidth        }    }

/// 自定义边框颜色    @IBInspectable var borderColor: UIColor? {        didSet{            layer.borderColor = borderColor?.CGColor        }    }}

写完后,切回storyboard,点击show the identity inspector,选中要改变属性的view,指定它的Class为自定义的Class,接着会看到designables updating

update.png

最后的效果如下图所示:

roundImage.png

IBCalculatorConstructorSet

把自定义 IBDesignable 视图和视图里的 IBInspectable 属性结合在一起,你能干点啥?作为一个例子,让我们更新老式经典 Apple folklore:在“Steve Jobs Roll Your Own Calculator Construction Set”,Xcode 6 的风格:

calculator.gif

时间: 2025-01-27 20:33:05

使用IBInspectable和IBDesignable实现实时预览的相关文章

word2007实时预览功能怎么启用

  依次单击"文件"→"选项"命令,打开"Word选项"对话框,在"常规"选项卡中选中或取消"启用实时预览"复选框,将打开或关闭实时预览功能.完成设置后单击"确定"按钮即可

如何打开Word 2013的实时预览功能

在Word2013文档窗口中,当鼠标悬停在选项卡的命令按钮上时,会自动显示应用该功能后的文档预览效果,这就是Word2013的实时预览功能.例如在设置标题效果时,选中目标文字并将鼠标指向标题选项,则Word2013文档将实时显示最终效果,鼠标指针离开以后将恢复原貌,如图2013041504所示. 图2013041504 实时预览效果 用户可以打开或关闭Word2013的实时预览功能,操作步骤如下所述: 第1步,打开Word2013文档窗口,依次单击"文件"→"选项"

Word 2007中使用实时预览功能

所谓实时预览就是指在Word2007文档中,当鼠标悬停在不同功能选项上时,显 示该功能的文档效果预览.例如在设置文本颜色时,选中目标文字并将鼠标指针 指向颜色选项,则Word文档将实时显示最终效果,鼠标指针离开以后将恢复原貌 ,如图2012032401所示. 图2012032401 实时预览效果 Word2007默认启用了实 时预览功能,在Word2007中打开和关闭"实时预览"功能的步骤如下所述: 第1步,打开Word2007文档窗口,依次单击"Office按钮"

在Word 2010中打开和关闭实时预览功能

所谓实时预览就是指在Word 2010文档中,当鼠标悬停在不同功能选项上时,显示该功能的文档效果预览.例如在设置文本颜 色时,选中目标文字并将鼠标指针指向颜色选项,则Word文档将实时显示最终效果,鼠标指针离开以后将恢复原貌,如图 2011120201所示. 图2011120201 实 时预览效果 Word 2010默认启用了实时预览功能,在Word 2010中打开和关闭"实时预览"功能的步骤如下所述: 第1步,打开Word 2010文档窗口,依次单击"文件"→&q

Word2013怎么取消启用实时预览的功能呢?

  "实时预览"是指在文件处理过程当中,当鼠标悬停在不同功能选项上时显示该功能的文档效果预览.那么,Word2013怎么取消启用实时预览的功能呢?下面我们一起来看看吧! 步骤 一.在电脑桌面的Word2013文档程序图标上双击鼠标左键,将其打开运行.点击"空白文档"选项,新建一个空白文档.如图所示; 二.在打开的Word2013文档窗口中,点击左上角的"文件"命令选项.如图所示; 三.在打开的"文件"命令窗口中,点击"

js实现Select头像选择实时预览代码_javascript技巧

本文实例讲述了js实现Select头像选择实时预览代码.分享给大家供大家参考.具体如下: 这里演示js实现Select头像选择,实时预览效果,在留言或评论的时候,让用户简易的选择头像,以前最常见的方式是使用单选框,当然使用其它的形式也可以,比如今天这个Select,下拉选框选择头像,也是不错的体验. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-ico-pic-view-codes/ 具体代码如下: <!DOCTYPE ht

Android UI实时预览和编写的各种技巧

一.啰嗦 之前有读者反馈说,你搞这个所谓的最佳实践,每篇文章最后就给了一个库,感觉不是很高大上.其实,我在写这个系列之初就有想过这个问题.我的目的是:给出最实用的库来帮助我们开发,并且尽可能地说明这个库是如何编写的,希望让初创公司的程序员少写点给后人留坑的代码(想必大家对此深有体会). 我之前给出的库都是很简单基础的,基本是一看就懂(但足够精妙),如果以后的文章涉及到了复杂的库,我会专门附加一篇库的讲解文. 如果一个库的原理你知道,此外这个库很容易扩展和维护,而且它还用到了很多最佳实践的经验,你

C# 海康威视,实时预览的时间如何改?

问题描述 始终是初始化的1970...,如何改成实时时间? 解决方案

百度网盘全平台评测:实时预览+离线下载

云存储带给我们的两大好处,一是再也不用拿着U盘在各个电脑之间将工作文档拷来拷去,麻烦不说还容易传染病毒,用网盘工具往自己的免费空间一丢,所有支持的平台都能见到它的踪影;第二就是,不管泰国再发多大洪水,硬盘多缺货,我们也都有能够暂时保存资料的一亩三分地儿,而且还不收钱~~ 近来百度和谷歌接连的都推出了自己的网盘服务,进军云存储领域,搜索巨头带给我们的云存储能有什么整合自己看家本事.或者实惠更多的服务呢?今天我们就先来拿刚刚在百度开发者大会上推出.并且还在邀请测试阶段的百度网盘来看个究竟. 无上限的