xml地图|网站地图|网站标签 [设为首页] [加入收藏]

UI第一周总结,如何开发一个评分控件

来源:http://www.ccidsi.com 作者:呼叫中心培训课程 人气:54 发布时间:2020-05-05
摘要:评分控件在APP中拾叁分常用,日平日见的造型为圆锥形或然心型。日常大家比较常用的方法是三个一个图纸也许按键去堆砌,可是如此应付轻巧整数能够,比如4.7分这么非整数就并不好

评分控件在APP中拾叁分常用,日平日见的造型为圆锥形或然心型。日常大家比较常用的方法是三个一个图纸也许按键去堆砌,可是如此应付轻巧整数能够,比如4.7分这么非整数就并不好呈现。本文将落到实处一个能复用的评分控件,不仅能够标准地展现非整数的评分,也能够灵活地自定义差异的参数,以致安装各样不一致的模样。

图片 1评分控件的最终效果

Window :

大家根本是接纳UIBezier帕特h对象来贯彻星星可能心的形制,我们自个儿用代码去写不一致的造型就比较复杂了,这里我们会使用PaintCode来减弱职业量。PaintCode的具体操作就非常的少做牵线了,我们可以参见上边包车型地铁文章:

前一篇文章已经把UIBezierPath对象的一部分操作根底都做了验证,今后离最后效果只差最终一步了。供给精通前面小说的故事情节,能够点击链接怎么着支付一个评分控件举行查看。假诺只想平昔使用已经封装好的控件,能够一向点击

1. UIWindow的父类为UIView.
2. window 窗口,一个应用想要展示在屏幕上,
至少要有一个window,
一个手机应用程序一般只有一个window。
3.应用程序中的所有的界面全部是展示在window上的

PaintCode 教程一PaintCode 课程二使用paitcode来实现applewatch刻度盘动漫成效使用paintcode 制作三个少于评分视图

下边发轫正文吧, 大家将会利用二种差异的主意来落实,一种是在UIView的drawRect艺术中一直绘制,一种是利用CAShapeLayer的mask来实现。

一、UIView的骨干品质和措施

1. UIView:是ios中所有视图(控件)直接/间接的父类;
所以UIView的属性和方法,对于其它类型的视图都有效。
2. 视图:在屏幕上能看到的所有的东西都属于视图。

实际在上头的篇章已经有一些儿评分控件的一种完结形式了,不过存在着不可能动用非纯色或然透明色背景颜色的毛病,并且也从未打开打包。大家会由此UIBezierPath对象的运算操作来改过这么些主题素材。

率先我们必要先下载一张svg矢量图,比方twitter的鸟儿Logo,然后svg拖动到PaintCode里面,就足以自动生成UIBezierPath对象的代码了。

1.创建UIView的对象

let redView = UIView.init()

说明:
想要将视图显示在显示器上的八个须要条件:
a. 必得设置坐标和尺寸(暗中认可坐标是(0,0)),大小(0,0卡塔尔State of Qatar;
b. 将视图增加到已经展现在显示屏上的视图上。

大家首先将PaintCode生成代码复制到自定义UIView的- drawRect:rect措施中,代码如下:

图片 2PaintCode矢量图.png

2. 设置frame属性

由坐标(x,y)和大小(width,height)两个部分组成

redView.frame = CGRectMake(10, 10, 100, 100)

** 说明:**
IOS中装有的布局体都有多个心心相印的Make方法来火速的创始一个构造体变量。

- drawRect:rect { UIBezierPath* starPath = [UIBezierPath bezierPath]; [starPath moveToPoint: CGPointMake]; [starPath addLineToPoint: CGPointMake(64.82, 25.86)]; [starPath addLineToPoint: CGPointMake(79.78, 30.27)]; [starPath addLineToPoint: CGPointMake(70.27, 42.64)]; [starPath addLineToPoint: CGPointMake(70.69, 58.23)]; [starPath addLineToPoint: CGPointMake]; [starPath addLineToPoint: CGPointMake(41.31, 58.23)]; [starPath addLineToPoint: CGPointMake(41.73, 42.64)]; [starPath addLineToPoint: CGPointMake(32.22, 30.27)]; [starPath addLineToPoint: CGPointMake(47.18, 25.86)]; [starPath closePath]; [UIColor.grayColor setFill]; [starPath fill];}

因此PaintCode生成的UIBezierPath对象代码,大家只须求UIBezierPath的目的,无需颜色填充,收拾后代码如下:

3. 将视图加多到分界面上

self.view.addSubview(redView)

代码生成的分界面也比超粗略,正是多个碳灰的一定量。

 UIBezierPath* path3611Path = [UIBezierPath bezierPath]; [path3611Path moveToPoint: CGPointMake(93.72, 242.19)]; [path3611Path addCurveToPoint: CGPointMake(267.68, 68.23) controlPoint1: CGPointMake(206.18, 242.19) controlPoint2: CGPointMake(267.68, 149.02)]; [path3611Path addCurveToPoint: CGPointMake(267.5, 60.33) controlPoint1: CGPointMake(267.68, 65.58) controlPoint2: CGPointMake(267.62, 62.95)]; [path3611Path addCurveToPoint: CGPointMake(298, 28.67) controlPoint1: CGPointMake(279.44, 51.7) controlPoint2: CGPointMake(289.82, 40.93)]; [path3611Path addCurveToPoint: CGPointMake(262.89, 38.29) controlPoint1: CGPointMake(287.05, 33.54) controlPoint2: CGPointMake(275.26, 36.82)]; [path3611Path addCurveToPoint: CGPointMake(289.78, 4.48) controlPoint1: CGPointMake(275.51, 30.72) controlPoint2: CGPointMake(285.2, 18.75)]; [path3611Path addCurveToPoint: CGPointMake(250.95, 19.32) controlPoint1: CGPointMake(277.96, 11.48) controlPoint2: CGPointMake(264.88, 16.57)]; [path3611Path addCurveToPoint: CGPointMake(206.32, 0) controlPoint1: CGPointMake(239.79, 7.43) controlPoint2: CGPointMake(223.91, 0)]; [path3611Path addCurveToPoint: CGPointMake(145.18, 61.13) controlPoint1: CGPointMake(172.56, 0) controlPoint2: CGPointMake(145.18, 27.38)]; [path3611Path addCurveToPoint: CGPointMake(146.76, 75.07) controlPoint1: CGPointMake(145.18, 65.93) controlPoint2: CGPointMake(145.71, 70.6)]; [path3611Path addCurveToPoint: CGPointMake(20.74, 11.19) controlPoint1: CGPointMake(95.95, 72.52) controlPoint2: CGPointMake(50.89, 48.19)]; [path3611Path addCurveToPoint: CGPointMake(12.46, 41.92) controlPoint1: CGPointMake(15.49, 20.23) controlPoint2: CGPointMake(12.46, 30.72)]; [path3611Path addCurveToPoint: CGPointMake(39.67, 92.82) controlPoint1: CGPointMake(12.46, 63.13) controlPoint2: CGPointMake(23.25, 81.86)]; [path3611Path addCurveToPoint: CGPointMake(11.98, 85.17) controlPoint1: CGPointMake(29.64, 92.51) controlPoint2: CGPointMake(20.21, 89.75)]; [path3611Path addCurveToPoint: CGPointMake(11.97, 85.95) controlPoint1: CGPointMake(11.97, 85.43) controlPoint2: CGPointMake(11.97, 85.68)]; [path3611Path addCurveToPoint: CGPointMake(61.02, 145.88) controlPoint1: CGPointMake(11.97, 115.56) controlPoint2: CGPointMake(33.04, 140.28)]; [path3611Path addCurveToPoint: CGPointMake(44.9, 148.04) controlPoint1: CGPointMake(55.88, 147.28) controlPoint2: CGPointMake(50.48, 148.04)]; [path3611Path addCurveToPoint: CGPointMake(33.41, 146.93) controlPoint1: CGPointMake(40.96, 148.04) controlPoint2: CGPointMake(37.13, 147.65)]; [path3611Path addCurveToPoint: CGPointMake(90.52, 189.4) controlPoint1: CGPointMake(41.19, 171.23) controlPoint2: CGPointMake(63.76, 188.9)]; [path3611Path addCurveToPoint: CGPointMake(14.58, 215.57) controlPoint1: CGPointMake(69.6, 205.8) controlPoint2: CGPointMake(43.23, 215.57)]; [path3611Path addCurveToPoint: CGPointMake(-0, 214.72) controlPoint1: CGPointMake(9.66, 215.57) controlPoint2: CGPointMake(4.79, 215.29)]; [path3611Path addCurveToPoint: CGPointMake(93.72, 242.19) controlPoint1: CGPointMake(27.06, 232.07) controlPoint2: CGPointMake(59.19, 242.19)]; path3611Path.miterLimit = 4;

4.设置背景颜色

说明:视图的背景颜色暗中同意是透明色

颜色的创办方式:
a. 通过品种方法创设钦定颜色

redView.backgroundColor = UIColor.redColor()

**b. **透过三原色来创立颜色
参数1,2,3: 红、 绿、 蓝的值 (0~1)
参数4: 透明度(0~1)

redView.backgroundColor = UIColor.init(red: 30/255.0, green: 133/255.0, blue: 26/255.0, alpha: 1)

c. 创造水晶色

redView.backgroundColor = UIColor.init(white: 0.4, alpha: 1)

图片 3水草绿星星.png

大家将这段代码复制到drawRect办法中,并将上一篇文章中的复制平移的代码复制过来:

演练:创立叁个香艳的矩形,突显在中湖蓝视图的中部地方,大小是(50,50)

方式一:

// 创建视图对象并且设置frame属性
let yellowView = UIView.init(frame: CGRectMake(35, 35, 50, 50))
 // 添加到界面上
self.view.addSubview(yellowView)
// 设置
yellowView.backgroundColor = UIColor.yellowColor()

方式二 :

let yellowView = UIView.init(frame: CGRectMake(25, 25, 50, 50))
redView.addSubview(yellowView)
yellowView.backgroundColor = UIColor.yellowColor()

总结:
计量视图的坐标的时候,注意相对性。
脚下视图被增加到哪个视图上,
这正是说当视图的坐标正是相对于何人来算的

个别已经获取了,以往我们想要只展示半颗星星,那样就足以完毕大家想要的0.5分的功能了。那如何做啊?办法当然有了,大家得以得到UIBezierPath对象的职位和尺寸,然后拿三个四方去覆盖它的半边,那不就能够了。继续在自定义UIView的- drawRect:rect方式后边增加代码:

 //复制平移操作 CGRect pathBounds = path3611Path.bounds; UIBezierPath *totalPath = [UIBezierPath bezierPath]; for (int i = 0; i < 5; i   ) { UIBezierPath *copyPath = [UIBezierPath bezierPath]; [copyPath appendPath:path3611Path]; [copyPath applyTransform:CGAffineTransformMakeTranslation((pathBounds.size.width   5.0)*i,0)]; [totalPath appendPath:copyPath]; } //缩放操作 CGRect totalPathRect = totalPath.bounds; CGFloat scale; if (totalPathRect.size.width / totalPathRect.size.height >= rect.size.width / rect.size.height) { scale = rect.size.width / totalPathRect.size.width; }else { scale = rect.size.height / totalPathRect.size.height; } [totalPath applyTransform:CGAffineTransformMakeScale(scale,scale)]; //修正origin的x,y值, 使path位置居中 totalPathRect = totalPath.bounds; CGFloat x = (rect.size.width - totalPathRect.size.width) / 2.0; x = x - totalPathRect.origin.x; CGFloat y = (rect.size.height - totalPathRect.size.height) / 2.0; y = y - totalPathRect.origin.y; [totalPath applyTransform:CGAffineTransformMakeTranslation]; [[UIColor greenColor] setFill]; [totalPath fill];

二、Frame相关属性

小编们先来成立一个视图对象:

//创建一个视图对象
let redView = UIView.init()
// 添加到界面上
self.view.addSubview(redView)
// 设置背景颜色
redView.backgroundColor = UIColor.redColor()
 //获取path的尺寸和位置 CGRect pathBounds = starPath.bounds; pathBounds.size.width = pathBounds.size.width * 0.5; UIBezierPath *rectPath = [UIBezierPath bezierPathWithRect:pathBounds]; [UIColor.redColor setFill]; [rectPath fill];

和我们预料的同一,多只小鸟出来了!

1. frame(坐标和分寸卡塔尔国

 redView.frame = CGRectMake(100, 100, 100, 100)

图片 4覆盖的星星.png

图片 5三只小鸟.png

2. center(中央点坐标卡塔尔

a. 通过frame和明显视图的宗旨点坐标

print(redView.center)

b.可以透过改造center的值,去修改视图的坐标

redView.center = CGPointMake(200, 200)
print(redView.frame)

只要把颜色改成洋红的,那么半个少于已经高达了。

现行反革命我们继续和上一篇作品相像,画出3.5分的效用,便是让3.5只小鸟一种颜色,2.5只小鸟,中间的那只小鸟会有三种颜色,这和大家上一篇文章绘制半个少于的规律是一成不改变的。

3. bounds(坐标和大小卡塔尔国

掌握:

默认情况下bounds的坐标是(0,0), 
大小和视图的frame大小一样

 print(redView.bounds)

说明:
倘若更正bounds的坐标,不影响当下视图的岗位,
不过影响增加到日前视图上的子视图的坐标,
不影响修改bounds.

redView.bounds = CGRectMake(20, 20, 100, 100)
let yellowView = UIView.init(frame: CGRectMake(10, 10, 40, 40))
yellowView.backgroundColor = UIColor.yellowColor()
redView.addSubview(yellowView)

整合与裁剪

上边我们将透过一层层的魔法来落实星星,半边是革命的,半边是铁黄的,那一个法力就是UIBezierPath对象的结合和剪裁方法。使用- appendPath:(UIBezierPath *)*bezierPath*能够加上任何的UIBezierPath对象,而设置usesEvenOddFillRule就足以垄断最终的渠道是长短不一(Intersection卡塔尔或是并集,进而完成大家想要的剪裁效果。

好了,大家后续在自定义UIView的- drawRect:rect办法前面增多代码:

 [starPath appendPath:rectPath]; [starPath setUsesEvenOddFillRule:YES]; [starPath addClip]; [[UIColor yellowColor] setFill]; [starPath fill];

图片 6先是次组合.png

从上面的成效能够看出来,usesEvenOddFillRule的功力是将三个门路组合在一块儿并去除掉交集,所以这一次的渠道并不富含左侧的半颗点儿。大家只要用前不久的门径继续去和rectPath去组合,就能够博得侧面的半颗个别了。

我们在drawRect办法中增加代码:

 [starPath appendPath:rectPath]; [starPath setUsesEvenOddFillRule:YES]; [starPath addClip]; [[UIColor blueColor] setFill]; [starPath fill];

图片 7其次次组合.png

经过第贰次的结缘操作, 大家能够看来效果已经极度周围想要的功力,大家今后能够试着把组合进度的革命和灰色代码都去掉,效果已经出来了啊。

图片 8去掉组合颜色.png

到底已经达成目的了,大家刚开端的紫罗兰色替换到鼠灰,把钴黄替换到青黛色,就成了想要的作用了。大家也得以品尝把rectPath的增长幅度比例改良成任何比例,效果如下:

图片 9增幅比例为0.3.png图片 10步长比例为0.5.png图片 11宽窄比例为0.8.png

好啊,单个星星的比重已经消除了,当时的自定义的UIView也得以此外背景颜色,都不会影响大家的少数形状了。上边就是最后的代码:

- drawRect:rect { UIBezierPath *starPath = [UIBezierPath bezierPath]; [starPath moveToPoint: CGPointMake]; [starPath addLineToPoint: CGPointMake(64.82, 25.86)]; [starPath addLineToPoint: CGPointMake(79.78, 30.27)]; [starPath addLineToPoint: CGPointMake(70.27, 42.64)]; [starPath addLineToPoint: CGPointMake(70.69, 58.23)]; [starPath addLineToPoint: CGPointMake]; [starPath addLineToPoint: CGPointMake(41.31, 58.23)]; [starPath addLineToPoint: CGPointMake(41.73, 42.64)]; [starPath addLineToPoint: CGPointMake(32.22, 30.27)]; [starPath addLineToPoint: CGPointMake(47.18, 25.86)]; [starPath closePath]; [[UIColor redColor] setFill]; [starPath fill]; //获取path的尺寸和位置 CGRect pathBounds = starPath.bounds; pathBounds.size.width = pathBounds.size.width * 0.8; UIBezierPath *rectPath = [UIBezierPath bezierPathWithRect:pathBounds]; [starPath appendPath:rectPath]; [starPath setUsesEvenOddFillRule:YES]; [starPath addClip]; [starPath appendPath:rectPath]; [starPath setUsesEvenOddFillRule:YES]; [starPath addClip]; [[UIColor grayColor] setFill]; [starPath fill];}

率先也是接收部分的星型的UIBezierPath对象,盖住3.5只小鸟之处,然后使用安装setUsesEvenOddFillRuleYES,反转四次就能够拿走左边剩下的UIBezierPath对象。

4. transform(形变)

当下视图发生形变,那么增多到当前视图上的具备的视图会跟着一同形变.

** a. 缩放**
参数1: x方向上的缩放比例
参数2: y方向上的缩放比例

redView.transform = CGAffineTransformMakeScale(0.8, 2.5)

b. 旋转
参数: 旋转角度(圆周率对应的角度值卡塔尔国.

redView.transform = CGAffineTransformMakeRotation(CGFloat(M_PI_4))

c. 平移
参数1: 在x方向上运动的离开, 负值-> 向左移,正值->向右移
参数2: 在y方向上活动的离开, 负值-> 向上移,正值->向下移

redView.transform = CGAffineTransformMakeTranslation(0, 300)

d. 三个形变同期爆发
(1State of Qatar.在其它一个形变的前提下旋转
参数1: 此外多少个形变

redView.transform = CGAffineTransformRotate(CGAffineTransformMakeScale(0.5, 0.5), CGFloat(M_PI_4 / 2))

(2State of Qatar.在此外二个形变的前提下平移

redView.transform = CGAffineTransformTranslate(redView.transform, 0, 300)

(3State of Qatar.在其余三个形变的前提下缩放

//创建一个平移的形变
let transLation = CGAffineTransformMakeTranslation(100, 0)

redView.transform = CGAffineTransformScale(transLation, 0.5, 2)

结缘多少个形变

// 旋转形变
let rotate = CGAffineTransformMakeRotation(0.2)

// 平移形变
let transLation1 = CGAffineTransformMakeTranslation(100, 100)

//将旋转形变和平移形变组合
redView.transform = CGAffineTransformConcat(rotate, transLation1)

一举手一投足和缩放

经过上一步的操作大家曾经解决了零星不一致比重的标题,不过还设有二个非常的大的难点,PaintCode生成的UIBezierPath是一贯大小的,而我辈所使用的控件要求经过frame或许constraint来改造大小的。然而UIBezierPath对象是矢量的,也正是说能够由此移动和缩放来适配UIView的分寸。

那一次我们将透过复制PaintCode生成的UIBezierPath对象,然后经过活动和缩放操作来改换Path的职位,最终组合成5颗星星,并且大小能够趁机UIView的改动而改进。

照例通过自定义UIView的- drawRect:rect措施中增多二个洋红的蝇头:

- drawRect:rect { UIBezierPath* starPath = [UIBezierPath bezierPath]; [starPath moveToPoint: CGPointMake]; [starPath addLineToPoint: CGPointMake(64.82, 25.86)]; [starPath addLineToPoint: CGPointMake(79.78, 30.27)]; [starPath addLineToPoint: CGPointMake(70.27, 42.64)]; [starPath addLineToPoint: CGPointMake(70.69, 58.23)]; [starPath addLineToPoint: CGPointMake]; [starPath addLineToPoint: CGPointMake(41.31, 58.23)]; [starPath addLineToPoint: CGPointMake(41.73, 42.64)]; [starPath addLineToPoint: CGPointMake(32.22, 30.27)]; [starPath addLineToPoint: CGPointMake(47.18, 25.86)]; [starPath closePath]; [UIColor.grayColor setFill]; [starPath fill];}

然则我们为了显得刚强,讲UIView的背景颜色设置为深翠绿了。

图片 12带背景颜色的肉桂色星星.png

咱俩是通过UIBezier帕特h对象的- applyTransform:(CGAffineTransform)*transform*艺术来拓宽形变的,在drawRect办法中一而再加多形变代码:

 //复制平移操作 CGRect pathBounds = starPath.bounds; UIBezierPath *totalPath = [UIBezierPath bezierPath]; for (int i = 0; i < 5; i   ) { UIBezierPath *copyPath = [UIBezierPath bezierPath]; [copyPath appendPath:starPath]; [copyPath applyTransform:CGAffineTransformMakeTranslation((pathBounds.size.width   5.0)*i,0)]; [totalPath appendPath:copyPath]; } [[UIColor greenColor] setFill]; [totalPath fill];

经过复制和平移动作,大家就得到了八个米黄的蝇头啦,而且把渠道存在totalPath中。

图片 13复制平移为五颗星星.png

纵然我们获得了五颗星星,可是它如故大小固定的,并且轻易的职位不是居中的,大家将经过缩放操作来适配大小。继续在复制平移的操作前边增加代码:

 //缩放操作 CGRect totalPathRect = totalPath.bounds; CGFloat scale; if (totalPathRect.size.width / totalPathRect.size.height >= rect.size.width / rect.size.height) { scale = rect.size.width / totalPathRect.size.width; }else { scale = rect.size.height / totalPathRect.size.height; } [totalPath applyTransform:CGAffineTransformMakeScale(scale,scale)];

图片 14缩放操作之后的星星.png

缩放操作之后的蝇头地点不对,大家须求经过移动对职分展开纠正,同一时间把刚开始填写的银色去掉。

 //修正origin的x,y值, 使path位置居中 totalPathRect = totalPath.bounds; CGFloat x = (rect.size.width - totalPathRect.size.width) / 2.0; x = x - totalPathRect.origin.x; CGFloat y = (rect.size.height - totalPathRect.size.height) / 2.0; y = y - totalPathRect.origin.y; [totalPath applyTransform:CGAffineTransformMakeTranslation];

校正后的遵循如下:

图片 15改良地点的效应.png

正文的代码能够在

下一篇文章我们将落实星星控件的包裹,当中会选拔CALayer的mask遮罩来贯彻控件。借使急需利用评分控件的话能够直接去

 CGFloat score = 3.5; NSInteger i = floor; CGFloat decimal = score - i; CGFloat scaleW = pathBounds.size.width * scale; CGFloat scalePadding = 5.0 * scale; CGFloat selectW = (scaleW   scalePadding) * i   scaleW * decimal; CGRect selectRect = CGRectMake(0, 0, selectW, rect.size.height); UIBezierPath *selectRectPath = [UIBezierPath bezierPathWithRect:selectRect]; [totalPath appendPath:selectRectPath]; [totalPath setUsesEvenOddFillRule:YES]; [totalPath addClip]; [totalPath appendPath:selectRectPath]; [totalPath setUsesEvenOddFillRule:YES]; [totalPath addClip]; [[UIColor grayColor] setFill]; [totalPath fill];

三、UIView父亲和儿子视图

//创建一个UIView对象
let redView = UIView.init(frame: CGRectMake(100, 100, 100, 100))

//  设置背景颜色
redView.backgroundColor = UIColor.redColor()

// 添加到界面上
 self.view.addSubview(redView)

说明:
self.view正是redView的父视图,redView就是self.view的子视图

1.设置tag值,暗许都是0.设tag值的时候值应当要大于0
解释:tag的效率是用来差异分界面上分裂的视图

redView.tag = 100

其中scaleW = pathBounds.size.width * scale是缩放后的鸟类的frame大小,5.0 * scale是各种小鸟之间的间距。

父子视图的表征和办法

再成立四个风骚视图

let yellowView = UIView.init(frame: CGRectMake(0, 0, 50, 50))
yellowView.backgroundColor = UIColor.yellowColor()
yellowView.tag = 101

1.说明:
叁个视图唯有多少个父视图,能够有多少个子视图;
连年将同二个视图增加到八个视图上,最终壹次增添有效.

redView.addSubview(yellowView)
self.view.addSubview(yellowView)

2. 取得二个视图的父视图

let superView = redView.superview
superView?.backgroundColor = UIColor.greenColor()

3.获得三个视图的兼具的子视图

let subViews = self.view.subviews
print(subViews)

得到具备的子视图中的藏孔雀蓝视图和乌紫视图

// a.
for item in subViews {

// 判断item是否是UIView类型的。如果是就返回true,如果不是就返回false
    if item.isKindOfClass(UIView.self) {
        print(item)

    }
}

// b.
for item in subViews {

    if item.tag == 100 {
          print("红色视图")
//将红色视图的背景颜色变成橙色
          item.backgroundColor = UIColor.orangeColor()
    }

    if item.tag == 101 {
          print("黄色视图(item)")
    }
}

4. 经过tag值获得钦定的子视图

let subViews2 = self.view.viewWithTag(101)
subViews2?.frame.origin.y = 100

图片 163.5只小鸟.png

四、 视图的档案的次序关系

class ViewController: UIViewController {

 // MARK:生命周期方法
   override func viewDidLoad() {
      super.viewDidLoad()

        self.creatUI()

    }
    // MARK: - 创建界面

func creatUI() {

//再一个视图上,添加多个视图的时候,子视图之间如果有公共的部分。那么后添加的子视图会覆盖先添加的
// 一般情况下,如果想要将一个视图显示在最下面,最先添加。想要显示在醉上面就最后添加
// 创建视图
    let view1 = self.creatView(CGRectMake(50, 100, 100, 100), backColor: UIColor.yellowColor() )
    let view2 = self.creatView(CGRectMake(100, 150, 100, 100), backColor: UIColor.redColor())
    let view3 = self.creatView(CGRectMake(150, 200, 100, 100),      backColor: UIColor.greenColor())

    //let view4 = self.creatView(CGRectMake(180, 130, 100, 100), backColor: UIColor.purpleColor())
// 2.将指定的视图放到最上层
    self.view.bringSubviewToFront(view2)

// 3.将指定的视图放到最下层
    self.view.sendSubviewToBack(view2)

// 4. 将指定的视图插入到另一个视图的上面
    self.view.insertSubview(view2, aboveSubview: view3)

// 5. 将指定的视图插入到另外一个视图的下面
    self.view.insertSubview(view2, belowSubview: view1)

    }
// 创建视图
func creatView(frame:CGRect,backColor:UIColor) -> UIView {
// 创建视图对象
   let subView = UIView.init(frame: frame)
// 设置背景颜色
   subView.backgroundColor = backColor
// 添加到界面上
   self.view.addSubview(subView)
// 将创建的视图对象返回
   return subView

    }
}

看起来大家的靶子已经到达了,后续封装只要把UIBezierPathscore存起来就足以了,当score设置时,只要调用[self setNeedDisplay]强迫重绘分界面就能够了。

五、UIView动画

本文由68399皇家赌场发布于呼叫中心培训课程,转载请注明出处:UI第一周总结,如何开发一个评分控件

关键词: 68399皇家赌场 控件 操作 评分 CALayer

上一篇:的常用函数

下一篇:没有了

最火资讯