IOS开发之Views自定义布局
来源:互联网 发布:销售票据打印软件 编辑:程序博客网 时间:2024/06/07 21:05
IOS开发之Views自定义布局
学习IOS也有快一周了,作为在CSDN的第一篇博客,我将会记录下我的学习笔记。接下来将会做一个draw函数,自定义画出笑脸。
关于位置的布局
首先需要知道Swift里面,bound和frame的区别。bound指的是当前view中的相对位置,而frame值得是当前view的上一级(superview)的相对位置。
let skullRadius = min(bounds.size.width, bounds.size.height)/2let centerPoint = CGPoint(x:bounds.midX,y:bounds.midY)
关于UIBezierPath
好的,这个到底是什么东西呢?查阅了苹果的Document,看到了如下一段文字。
The UIBezierPath class lets you define a path consisting of straight and curved line segments and render that path in your custom views. You use this class initially to specify just the geometry for your path. Paths can define simple shapes such as rectangles, ovals, and arcs or they can define complex polygons that incorporate a mixture of straight and curved line segments. After defining the shape, you can use additional methods of this class to render the path in the current drawing context.
简单来说,UIBezierPath就是一种通过中心点、半径、开始角和终止角(2pi作为360度)以及方向来定义椭圆类型的曲线。需要知道的是里面的终止角不能填float而是要填入CGFloat。这两者的区别在于,CGFloat是类库,它是个对象,是CG框架里的类的实例。而float就是普通的基本数据类型。
let skull = UIBezierPath(arcCenter: centerPoint, radius: skullRadius, startAngle: 0.0, endAngle: CGFloat(2*M_PI), clockwise: true)
设置了这样的一段路径以后,需要把他画在view中才能被看到。那么接下来要给他设置边线的粗细、填充和边线的颜色。可以重点留意代码里面对于自定义RGB的设置(每一个数值都是CGFloat类型)。
skull.lineWidth = 5.0UIColor.init(red: 255.0, green: 255.0, blue: 0.0, alpha: 1.0).set()skull.stroke()
那么是否现在就可以运行这个app然后看到这个圆圈了吗?并不是!要让他显示,要进行一个小的设置。首先需要storyboard里面拖入一个新的view控件。在进行确定位置的时候,可以使用默认的constrain。
同时还需要把刚刚新增的view设置为FaceView。
Boom!出来了!
但是加入翻转以后,这个圆形就不再是圆形。
要解决这个问题,只需要把content mode设置为redraw。
接下来我们来绘制嘴巴。我们设置一个smileFactor来控制嘴巴的笑和悲伤(1是最开心、-1是最悲伤)。因为嘴巴是弧线,我们使用一方式设置起始点和终点来控制嘴巴的弧度。
private func pathForMouth(smileFactor: CGFloat) -> UIBezierPath{ let smileOffset = CGFloat(max(-1, min(smileFactor, 1)) * 70.0) let start = CGPoint(x:centerPoint.x - offset.mouthWidth/2, y:centerPoint.y + offset.mouthOffset) let end = CGPoint(x:centerPoint.x + offset.mouthWidth/2, y:centerPoint.y + offset.mouthOffset) let cp1 = CGPoint(x:centerPoint.x + offset.mouthWidth/3, y:centerPoint.y + offset.mouthOffset + smileOffset) let cp2 = CGPoint(x:centerPoint.x - offset.mouthWidth/3, y:centerPoint.y + offset.mouthOffset + smileOffset) let path = UIBezierPath() path.move(to: start) path.addCurve(to: end, controlPoint1: cp1, controlPoint2: cp2) path.lineWidth = 5.0 return path }
看看最后的结果:
这个是smileFactor是1的结果。
这个是smileFactor是0的结果。
这个是smileFactor是-1的结果。
接下来将会继续学习如何写好接口让viewcontroller来完成完整的MVC。
- IOS开发之Views自定义布局
- iOS开发 - UICollectionViewLayout 自定义布局
- iOS之UICollectionView自定义布局
- iOS之UICollectionView自定义布局
- iOS开发之自动布局
- ios开发-UI-自定义Tabbar 图书布局
- iPad开发之Split Views
- 【iOS】UICollectionView自定义Layout之蜂窝布局
- iOS开发之自定义表情键盘(组件封装与自动布局)
- iOS开发之自定义表情键盘(组件封装与自动布局)
- iOS开发之自定义表情键盘(组件封装与自动布局)
- Android开发之自定义布局和控件
- IOS开发之自定义UIActionSheet
- ios开发之自定义UITabBarController
- iOS开发之自定义View
- iOS开发之自定义pageControl
- iOS开发之自定义View
- iOS开发之自定义View
- UCOSII软件定时器
- 广播通知操作
- readonly和disabled
- js排序算法详解-基数排序
- Android App的设计架构:MVC,MVP,MVVM与架构经验谈
- IOS开发之Views自定义布局
- 关于thinkphp里面公用模板的调用
- 【java基础】两个变量互换不使用第三方变量的方法
- 字符串的slice(),substr(),substring()
- [poj1155] TELE 树形DP 01背包
- 并发编程复习(六):使用wait和notify模拟阻塞队列
- 3379: [Usaco2004 Open]Turning in Homework 交作业
- 关于手机功能NFC(以华为V9为例)
- hdu 1698 Just a Hook