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。
设置默认的constrain
同时还需要把刚刚新增的view设置为FaceView。

设置view的class

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。

原创粉丝点击