跟着斯坦福白胡子老头学自定义UIView(附iOS10 Swift代码)

Swift很屌,开发自定义View可以说so easy。

大部分iOS初学者都会看斯坦福白胡子老头的视频, 讲的确实挺好的。 在最新的iOS9第4课讲了自定义UIView, 根据视频写个Demo,并使用定时器实现一个简单的动画。

自定义View动画的实现思路: 使用定时器或子线程每隔一段时间刷新一次界面, 界面重绘时要使用不同的参数, 实现视觉上的动画效果, 其实就是帧动画。

先介绍一下定时器, 在iOS10版本里使用Timer类实现定时器的功能。 基本用法是

timer = Timer.scheduledTimer(withTimeInterval: 0.01, repeats: true, block: { (param) in  /*注意param是Timer类型的参数, 等于当前Timer类实例的引用*/

self.count += 1  //自增1

let tmp: Double = Double(self.count) / 100.0  //画嘴的角度

print("current mouthCur: \(tmp)")

self.faceView.mouthCurvature = tmp

self.faceView.setNeedsDisplay()  //UIView的方法, 即需要刷新view

//self.faceView.setNeedsLayout()

//self.faceView.layoutIfNeeded()

if self.count == 100 {

param.invalidate()  //停止定时器

}

print("counter current: \(self.count)")

})

在Android里自定义View会重写onDraw函数, 相当于iOS UIView的的drawRect函数。 注意: drawRect不能直接被调用, 跟Android里不能指教调用onDraw方法一样。 在自定义UIView时, Xcode的注释里已经说明了drawRect函数的作用。

iOS的UIBezierPath类似于Android Canvas的drawLine/drawRect, 使用UIBezierPath可以绘制线条和图形。 老头在例子里也是使用UIBezierPath类绘制笑脸的。  iOS没有画布的概念, 设置颜色时直接使用UIColor类, 不像Android那样使用Canvas的引用。

UIView绘制界面的方法:

override func draw(_ rect: CGRect) {

print("function draw is called")

// Drawing code

UIColor.blue.set()

pathForCircleCenterAtPoint(midPoint: skullCenter, withRadius: skullRadius)  //画圆圈

UIColor.black.set()  //切换颜色, 显示黑色眼睛

pathforEye(eye: .Left)  //画左眼

pathforEye(eye: .Right)  //画右眼

UIColor.red.set()

pathForMouth()

}

自定义UIView在预览时默认是空白的, 但Swift提供个关键字支持预览自定义View。 仅仅需要再自定义UIView的上面加一行代码@IBDesignable

最上面的gif动画是通过定时器修改mouthCurature参数改变嘴的形状,Swift还支持使用@IBInspectable将自定义UIView的参数作为属性, 在storyboard里预览。 示例:


注意类属性添加@IBInspectable
FaceView多了Scale和Mouth Curvature属性


原文:http://blog.csdn.net/brycegao321/article/details/53817222

代码下载地址: http://download.csdn.net/detail/brycegao321/9719939

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,802评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,109评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,683评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,458评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,452评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,505评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,901评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,550评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,763评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,330评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,898评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2 342

推荐阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,089评论 5 13
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,455评论 6 30
  • 前言 本文只要描述了iOS中的Core Animation(核心动画:隐式动画、显示动画)、贝塞尔曲线、UIVie...
    GitHubPorter阅读 3,597评论 7 11
  • 1.自定义控件 a.继承某个控件 b.重写initWithFrame方法可以设置一些它的属性 c.在layouts...
    圍繞的城阅读 3,338评论 2 4
  • 143 七夕情人节是我们中国的传统情人节。大家都有不同的祝福,有心之人还是很在意的,无心之人什么都不会意。 我们今...
    馨之芬芳阅读 261评论 3 2