酷课堂（ID:coolketang）独家文章，其他媒体转载请注明出处。 这是《iOS移动开发从入门到精通》在“酷课堂”连载的第37篇文章，每周二更新，欢迎大家留言交流！ 初次写书，难免会有不足的地方，希望大家可以多多批评指正，感谢！个人邮箱：[email protected] 加小课好友：coolketang001 获取最新课程信息、每日交流群问答分享...更多功能等你来解锁。 新书上市： 复制以下链接：https://spu.jd.com/11480560249.html 到京东商城即可找到，新书上市期间，多家书店都有包邮活动，期待你的反馈。 5.2.3 CALayer圆角 通过设置CALayer的cornerRadius属性，您可以给视图添加圆角效果： 1import UIKit 2 3class ViewController:UIViewController { 4 5override func viewDidLoad() { 6super.viewDidLoad() 7// Do any additional setup afterloading the view, typically from a nib. 8let view = UIView(frame: CGRect(x: 60,y: 60, width: 200, height: 200)) 9view.backgroundColor = UIColor.black() 10view.layer.cornerRadius = 40 11 12let subView = UIView(frame: CGRect(x:0, y: 0, width: 200, height: 100)) 13subView.backgroundColor = UIColor.gray() 14 15view.addSubview(subView) 16self.view.addSubview(view) 17} 18 19override func didReceiveMemoryWarning() { 20super.didReceiveMemoryWarning() 21// Dispose of any resources that can berecreated. 22} 23} 在第8至9行的代码中，创建了一个位于(60,60)，宽度和高度分别是200的视图，并设置视图的背景颜色为黑色。接着在第10行代码中，设置层的cornerRadius圆角半径为40。当该属性被设置为大于0的值时，将会在层的四周绘制指定半径的圆角。 在第12行至13行代码中，创建了一个宽度为200，高度为100，位于(0, 0)的视图，该视图的背景颜色为灰色。最后在第15至16行的代码中，将灰色视图作为子视图，添加到黑色视图之中。并将黑色视图添加到当前视图控制器的根视图中。接着点击Xcode界面左上角的[编译并运行]按钮,运行该项目。项目在模拟器中的效果如图5-2-4所示。 从模拟器中的效果可以看出，虽然给黑色视图添加了圆角效果，但是由于子视图的存在，您无法看到上方两个顶点的圆角效果。这是因为圆角效果只对视图的背景颜色和层的边框起作用，而不会层中的内容起作用。不过系统为您提供了一个属性masksToBounds，您可以将该属性的值设置为true，这样将会沿着圆角边缘对视图中的内容进行裁切。 在第10行代码的下方添加一行新的代码： 8let view = UIView(frame:CGRectMake(60, 60, 200, 200)) 9view.backgroundColor =UIColor.blackColor() 10view.layer.cornerRadius = 40 11view.layer.masksToBounds = true 设置层的masksToBounds属性之后，再次运行模拟器，视图的圆角效果如图5-2-5所示。 在设置圆角半径时，如果将cornerRadius设置为正方形宽度的一半，那么将会创建了一个正圆形。这里将第10行代码修改为： 10view.layer.cornerRadius = 100 修改cornerRadius半径数值后的效果如图5-2-6所示。也许您还想知道，如果继续增加cornerRadius半径数值，会有什么样的一种圆角效果。那我们将cornerRadius半径数值设置为与正方形宽度相同： 10view.layer.cornerRadius = 200 将cornerRadius半径数值修改为200后的效果如图5-2-7所示。 图5-2-4 图5-2-5 图5-2-6 图5-2-7 5.2.4 CALayer渐变 CALayer和UIView相似地方是，CALayer层也可以嵌套多个子CALayer层，从而实现多种多样的效果。 这里将为您演示如何往层中添加一个CAGradientLayer渐变，CAGradientLayer是用来生成两种或更多的颜色平滑渐变效果的： 1import UIKit 2 3class ViewController:UIViewController { 4 5override func viewDidLoad() { 6super.viewDidLoad() 7// Do any additional setup afterloading the view, typically from a nib. 8let rect = CGRect(x: 20, y: 60, width:240, height: 240) 9let gradientView = UIView(frame: rect) 10 11let gradientLayer = CAGradientLayer() 12gradientLayer.frame =gradientView.frame 13 14let fromColor = UIColor.yellow().cgColor 15let midColor = UIColor.blue().cgColor 16let toColor = UIColor.red().cgColor 17 18gradientLayer.colors = [fromColor,midColor, toColor] 19gradientLayer.startPoint = CGPoint(x:0, y: 0) 20gradientLayer.endPoint = CGPoint(x: 1,y: 1) 21gradientLayer.locations = [0, 0.3, 1] 22 23gradientView.layer.addSublayer(gradientLayer) 24self.view.addSubview(gradientView) 25} 26 27override func didReceiveMemoryWarning() { 28super.didReceiveMemoryWarning() 29// Dispose of any resources that can berecreated. 30} 31} 在第8至9行的代码中，创建了一个位于(20,60)，宽度和高度分别是240的视图。接着在第11至12行的代码中，创建一个CAGradientLayer渐变层，并设置渐变层的frame属性与视图的frame属性相同。然后在第14至16行的代码，依次创建了三个颜色：黄色、蓝色和红色。这三个颜色将作为渐变线上的起始颜色、中间颜色和结束颜色。 在第18行的代码中，设置了渐变层的colors属性，这里将刚刚创建的三个颜色放在一个数组中，并赋予colors属性。 在第19行的代码中，设置了渐变层的起点位置为(0,0)，即渐变线的起点，位于渐变层的左上角。接着在第20行的代码中，设置了渐变层的终点位置为(1,1)，即渐变线的终点，位于渐变层的右下角。这样就创建了一个从左上角至右下角45度方向的渐变效果。 在第21行的代码中，设置了渐变层的各颜色点在颜色线中的分布情况。在locations属性值数组中的0.3，表示渐变线中间的颜色，即蓝色，将位于渐变线30%的位置。 在第23行至24行的代码中，依次将渐变图层添加到视图对象的根层中，然后将视图对象添加到当前视图控制器的根视图中。接着点击Xcode界面左上角的[编译并运行]按钮 ，运行该项目。项目在模拟器中的效果如图5-2-8所示：
图 5-2-8 从图5-2-8中的效果可以看出，我们创建了一条从左上角至右下角的渐变效果，渐变色依次为黄色、蓝色、红色。其中蓝色位于渐变线30%的位置，即比较靠近渐变线开始位置的黄色，而距离渐变线结束位置的红色较远。 5.3 结语 我们经常会在网上冲浪，网页中的各种视觉元素基本上都是由Div容器组成的。就像网页中的Div标签一样，iOS设备中的大部分视觉元素也都是通过UIView视图组成的。 本章主要讲解了UIView视图的基本属性、各个属性之间的关系，以及如何在应用程序中创建和操作这些属性。除此之外，本章还讨论了视图如何响应触摸事件，以及如何创建自定义视图以描绘定制的内容。使用UIView甚至可以制作出很多精美的动画效果。 我们将在第十章详细讨论UIView动画的设计和制作。在讲解UIView视图时，始终绕不开CALayer层概念。所以在本章还对CALayer层和UIView视图之间的联系进行了讲解，以及如何使用CALayer构建一些诸如圆角、阴影、渐变之类的外观效果。 付费学员专享福利： (额外福利,不承诺永久提供!) 1.为了更好的交流,近期我们开设了QQ群 2.已购买课程的同学,请添加小课微信号：coolketang001 3.截图订单号,即可获取对应QQ群号,及免费练习源码。 其他: 加小课：coolketang001，获取最新课程信息、每日交流群问答分享...更多功能等你来解锁。 想开发自己的APP？ 想及时获得解答？ 想接触更多技术大牛？ 扫码关注我们就对了！ 埋头自学是不行的，你需要同学和老师！ 如果觉得文章对你有帮助，请转发分享，再次感谢！
|
|
声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系
[邮箱地址] 删除
|
注册
登录
