如何在iOS 8中使用Swift和Xcode 6制作精美的UI组件

发布于:2014-06-19 10:55阅读数:

在Xcode6中加入了两个新的Interface Builder(下文用IB简称)属性声明:IBInspectable和IBDesignable。IBInspectable在IB的Attribute Inspector(属性检查器)中查看类的属性,而IBDesignable能实时更新视图,很厉害吧

译者:CocoaChina翻译小组成员dada(git主页),欢迎加入我们的译者小组(support@cocoachina.com,并注明社区ID、工作状态、电话以及个人博客等任何让我们更了解你的方式)
 
 
苹果在Xcode 6中加入了两个新的Interface Builder(下文用IB简称)属性声明:IBInspectable和IBDesignable。IBInspectable在IB的Attribute Inspector(属性检查器)中查看类的属性,而IBDesignable能实时更新视图,很厉害吧!
 
这里用一个简短的[视频教程](得爬墙哦!)说明下怎样使用IBInspectable和IBDesignable。10分钟就能看完所有的步骤。代码在[github]
 
IBInspectable
以下是我发现的适用于IBInspectable的类型:
 
下面这些数据都对IBInspectable有效:
Int
CGFloat
Double
String
Bool
CGPoint
CGSize
CGRect
UIColor
UIImage
 
举个小栗子
  1. class OverCustomizableView : UIView { 
  2.     @IBInspectable var integer: Int = 0 
  3.     @IBInspectable var float: CGFloat = 0 
  4.     @IBInspectable var double: Double = 0 
  5.     @IBInspectable var point: CGPoint = CGPointZero 
  6.     @IBInspectable var size: CGSize = CGSizeZero 
  7.     @IBInspectable var customFrame: CGRect = CGRectZero 
  8.     @IBInspectable var color: UIColor = UIColor.clearColor() 
  9.     @IBInspectable var string: String = "We ? Swift" 
  10.     @IBInspectable var bool: Bool = false 
 
在属性检查器的上面是这样:
这一切添加了一些用户定义的运行时属性,这些属性将会在view加载时设置它的初始值。
 
运行时属性的创建:
IBDesignable
来看个好玩的地方。IBDesignable告诉IB它可以加载并渲染视图。这个视图类必须在一个框架里面才能正常工作。不过这种方式也不会太麻烦,我们下面会看到方法。 我认为IB是隐式地将UIView的代码转换成NSView的代码,这样就能动态地加载框架并渲染组件。
 
创建新工程
打开Xcode6,创建一个新的“Single Page Application” (单页面应用)并选择Swift作为编程语言。
 
添加新的Target
在导航选中工程文件点击“+”按钮添加新的target
 
选择Framework & Application Library和choose the Cocoa Touch Framework,如图
 
命名为MyCustomView。Xcode会自动链接MyCustomView.framework到你的工程。
 
创建自定义视图类
创建一个新的swift文件,并添加到MyCustomView框架里。
 
右键单击框架的目录。
选择Cocoa Touch文件
给它命名为CustomView,作为UIView的子视图
CustomView.swift文件里包含:
  1. import UIKit 
  2.  
  3. class CustomView: UIView { 
  4.  
  5.     init(frame: CGRect) { 
  6.         super.init(frame: frame) 
  7.         // Initialization code 
  8.     } 
  9.  
  10.     /* 
  11.     // Only override drawRect: if you perform custom drawing. 
  12.     // An empty implementation adversely affects performance during animation. 
  13.     override func drawRect(rect: CGRect) 
  14.     { 
  15.         // Drawing code 
  16.     } 
  17.     */ 
  18.  
 
移除生成的方法。
  1. import UIKit 
  2.  
  3. class CustomView: UIView { 
  4.  
告诉Xcode用@IBDesignable 关键字来渲染你的视图。
 
添加三个属性:borderColor: UIColor, borderWidth: CGFloat以及cornerRadius: CGFloat。
 
设置默认值,并让它们是可检验的:
  1. @IBDesignable class CustomView : UIView { 
  2.     @IBInspectable var borderColor: UIColor = UIColor.clearColor()  
  3.     @IBInspectable var borderWidth: CGFloat = 0  
  4.     @IBInspectable var cornerRadius: CGFloat = 0  
 
为视图层属性添加逻辑
为每个属性添加[property observers](观察者属性),并根据layer更新。
  1. class CustomView : UIView { 
  2.     @IBInspectable var borderColor: UIColor = UIColor.clearColor() { 
  3.         didSet { 
  4.             layer.borderColor = borderColor.CGColor 
  5.         } 
  6.     } 
  7.  
  8.     @IBInspectable var borderWidth: CGFloat = 0 { 
  9.         didSet { 
  10.             layer.borderWidth = borderWidth 
  11.         } 
  12.     } 
  13.  
  14.     @IBInspectable var cornerRadius: CGFloat = 0 { 
  15.         didSet { 
  16.             layer.cornerRadius = cornerRadius 
  17.         } 
  18.     } 
 
编译框架
 
测试自定义视图
打开Main.storyboard,从组件库里添加一个视图。
 
在Identity Inspector里把视图类改成CustomView。
调整视图,如果需要可添加自动布局约束。
 
Tip:按住选中视图并拖动鼠标到另一个视图可以添加自动布局约束。
 
上手玩了一下`cornerRadius`,我发现当添加一些比较大的值时会创建一个有意思的模式。
 

CocoaChina是全球最大的苹果开发中文社区,官方微信每日定时推送各种精彩的研发教程资源和工具,介绍app推广营销经验,最新企业招聘和外包信息,以及Cocos2d引擎、Cocos Studio开发工具包的最新动态及培训信息。关注微信可以第一时间了解最新产品和服务动态,微信在手,天下我有!

请搜索微信号“CocoaChina”关注我们!

搜索CocoaChina微信公众号:CocoaChina

顶部