文档章节

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

hejunbinlan
 hejunbinlan
发布于 2015/06/01 10:49
字数 900
阅读 12
收藏 0

译者:CocoaChina翻译小组成员dada(git主页),欢迎加入我们的译者小组(support@cocoachina.com,并注明社区ID、工作状态、电话以及个人博客等任何让我们更了解你的方式)

 

原文:How to make awesome UI components in iOS 8 using Swift and XCode 6 (原文作者Andrei Puni )   

 

苹果在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

 

举个小栗子

class OverCustomizableView : UIView {     @IBInspectable var integer: Int = 0     @IBInspectable var float: CGFloat = 0     @IBInspectable var double: Double = 0     @IBInspectable var point: CGPoint = CGPointZero     @IBInspectable var size: CGSize = CGSizeZero     @IBInspectable var customFrame: CGRect = CGRectZero     @IBInspectable var color: UIColor = UIColor.clearColor()     @IBInspectable var string: String = "We ? Swift"     @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文件里包含:

import UIKit  class CustomView: UIView {      init(frame: CGRect) {         super.init(frame: frame)         // Initialization code     }      /*     // Only override drawRect: if you perform custom drawing.     // An empty implementation adversely affects performance during animation.     override func drawRect(rect: CGRect)     {         // Drawing code     }     */  }

 

移除生成的方法。

import UIKit  class CustomView: UIView {  }

告诉Xcode用@IBDesignable 关键字来渲染你的视图。

 

添加三个属性:borderColor: UIColor, borderWidth: CGFloat以及cornerRadius: CGFloat。

 

设置默认值,并让它们是可检验的:

@IBDesignable class CustomView : UIView {     @IBInspectable var borderColor: UIColor = UIColor.clearColor()      @IBInspectable var borderWidth: CGFloat = 0      @IBInspectable var cornerRadius: CGFloat = 0  }

 

为视图层属性添加逻辑

为每个属性添加[property observers](观察者属性),并根据layer更新。

class CustomView : UIView {     @IBInspectable var borderColor: UIColor = UIColor.clearColor() {         didSet {             layer.borderColor = borderColor.CGColor         }     }      @IBInspectable var borderWidth: CGFloat = 0 {         didSet {             layer.borderWidth = borderWidth         }     }      @IBInspectable var cornerRadius: CGFloat = 0 {         didSet {             layer.cornerRadius = cornerRadius         }     } }

 

编译框架

 

测试自定义视图

打开Main.storyboard,从组件库里添加一个视图。

 

在Identity Inspector里把视图类改成CustomView。

调整视图,如果需要可添加自动布局约束。

 

Tip:按住选中视图并拖动鼠标到另一个视图可以添加自动布局约束。

 

上手玩了一下`cornerRadius`,我发现当添加一些比较大的值时会创建一个有意思的模式。

 

 你可以在github上查看代码


本文转载自:http://www.cocoachina.com/industry/20140619/8883.html

hejunbinlan
粉丝 41
博文 596
码字总数 21569
作品 0
浦东
高级程序员
私信 提问
15个快速学习苹果Swift编程语言的入门教程

要说今年最火的编程语言是什么。那就非Swift莫属了。当然最主要还是市场炒的比较热,加上官方Swift教程《The Swift Programming Language》在北航的大三学生发起在github上进行协同翻译获得了...

欲思
2014/07/24
20.2K
7
那些在学习iOS开发前就应该知道的事(part 1)

英文原文:Things I wish I had known before starting iOS development—Part 1 设计师设计出来了一个不错的引导界面,然而当我看到设计稿的时候,我们的app也没几天就要上线了。这个界面模...

TomatosX
2015/06/12
115
0
App Store上下载和安装Xcode

App Store上下载和安装Xcode Xcode的下载和安装 要编写一个Sprite Kit程序,需要使用到Xcode开发工具。本节将主要讲解此工具的两种下载和安装方式:一种是在App Store上进行下载和安装;另一...

大学霸
2015/03/24
2.8K
1
10个最佳的 Swift 教程实例

Swift 是一门相对比较新的编程语言,深受广大苹果社区开发者的喜爱。在短短不到一年的时间,很多很多开发者已经转向使用 Swift 编程语言了。苹果开发者们接受 Swift,纯粹是因为 Swfit 更加先...

noeticforce
2015/12/09
17.3K
6
fir.im Weekly - iOS 开发中的 Git 流程

本期 fir.im Weekly 收集了微博上的热转资源,包含 Android、iOS 开发工具、源码等好用的轮子,还有一些 APP 设计的 Tips,希望对你有用。 精仿知乎日报 iOS 端 @我偏笑_NSNirvana花了将近一...

风起云飞fir_im
2015/11/03
100
0

没有更多内容

加载失败,请刷新页面

加载更多

Handler消息传递机制分析

Handler的用途和用法 写过Android程序的人大概都会遇到ANR(Application Not Responding)。如果程序在一段时间内没有响应,系统就会弹出一个对话框,让用户选择继续等待还是强制关闭应用。为...

tommwq
今天
5
0
JS前端MD5加密

Bootstrap官网获得md5 js地址:https://www.bootcdn.cn/blueimp-md5/ <!--MD5加密--><script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script> 使用方法: md5(pwd)......

被毒打的程序猿_先瑞
今天
6
0
BigDecimal 去后面无用的0的方法

BigDecimal a=new BigDecimal("0.1000"); System.out.println(a.stripTrailingZeros().toPlainString());...

xiaodong16
今天
7
0
JAVA--高级基础开发

[集合版双色球] 十二、双色球规则:双色球每注投注号码由6个红色球号码和1个蓝色球号码组成。红色球号码从1—33中选择;蓝色球号码从1—16中选择;请随机生成一注双色球号码。(要求同色号码...

李文杰-yaya
昨天
26
0
聊聊rocketmq broker的CONSUMER_SEND_MSG_BACK

序 本文主要研究一下rocketmq broker的CONSUMER_SEND_MSG_BACK CONSUMER_SEND_MSG_BACK rocketmq/common/src/main/java/org/apache/rocketmq/common/protocol/RequestCode.java public class......

go4it
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部