iOS给border设置渐变色的方法实例

前言

本文将从4行代码出发给一个view设置渐变色,分别会谈到几个重要的渐变色相关属性,在使用过程中有几个需要特别关注的点。

给一个view的border设置渐变色是比较高阶的用法,希望本文可以在这个方面帮助到你。

给view设置渐变色

通过4行代码就可以给一个view设置渐变色:

let view = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
let gradientLayer = CAGradientLayer()
gradientLayer.frame = view.bounds
// @[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor yellowColor].CGColor]
gradientLayer.colors = [UIColor.red.cgColor, UIColor.yellow.cgColor]
view.layer.addSublayer(gradientLayer)

在创建CAGradientLayer以后需要设置frame才能展示出来,否则它的大小会使用默认的0。

渐变色会根据colors数组来展示,这个数组的类型是CGColorRef,所以需要用.cgColor强制转换;如果使用的OC语法,必须加上(__bridge id),否则渐变色会显示不出来。

默认情况下渐变会从上至下,可是通过设置startPoint和endPoint来改变这个顺序:

gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 1)

这两个点的范围是从0到1,也就是说最左边和最上边是0,最下和最右是1。这个例子中渐变会变成从左上角到右下角。

渐变色还有一个重要的属性是locations,这个属性是用来指定colors中设置的每个颜色的终点的。

gradientLayer.locations = [0.2, 0.8]

locations中元素的范围是从0到1。在这里,数组中的第一个元素0.2指定了colors数组中第一个元素红色的终点是0.2,也就是说把整个渐变色范围分成10份,从开始到2/10处都是纯红色,从2/10到8/10处是纯红色到纯黄色的渐变,而从8/10到10/10是纯黄色。

给view的border设置渐变色

使用UIBezierPath来创建一个带圆角的CAShapeLayer,并且把它的圆角设置成view的圆角,就可以把一个view的border设置为渐变色。

... // 同上给view设置gradientLayer

let shapeLayer = CAShapeLayer()
shapeLayer.borderWidth = 1
shapeLayer.path = UIBezierPath(roundedRect: gradientLayer.bounds, cornerRadius: 10).cgPath
shapeLayer.fillColor = UIColor.clear.cgColor // 必须要设置成clearColor或者nil,默认是黑色
shapeLayer.strokeColor = UIColor.white.cgColor // 随便设置一个非clearColor的颜色

gradientLayer.mask = shapeLayer

view.layer.addSublayer(gradientLayer)
  1. borderWidth shapeLayer的border宽度和view的相同,可以根据设计图来设置。
  2. cornerRadius UIBezierPath的圆角和view的圆角相同;roundedRect和CAGradientLayer的大小相同。
  3. fillColor 是shapeLayer的填充色,默认是黑色,建议设置成nil或者是透明色clearColor
  4. strokeColor 是border的描边色,如果设置成clearColor的话就不会绘制出来border了,这里随便一个颜色就是让其能够绘制出来,实际使用的是渐变色
  5. mask 用shapeLayer作为gradientLayer的mask,可以让gradientLayer内部挖空,只保留边缘border的渐变颜色
  6. 最终把渐变色layer添加到view.layer上,shapeLayer只是用来修饰gradientlayer的,目的是把gradientlayer的内部挖空,并且把border和圆角做出来。

总结

通过这篇文章我们了解了怎么给一个view设置渐变色,并详细阐述了渐变色的几个重要属性。关于给border设置渐变色是一个进阶的知识点。

到此这篇关于iOS给border设置渐变色的文章就介绍到这了,更多相关iOS border渐变色内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • iOS文字渐变色效果的实现方法

    照例先上文字渐变的效果图 实现思路如下 一.创建一个颜色渐变层,渐变图层跟文字控件一样大. 二.用文字图层裁剪渐变层,只保留文字部分,就会让渐变层只保留有文字的部分,相当于间接让渐变层显示文字,我们看到的其实是被裁剪过后,渐变层的部分内容. 注意:如果用文字图层裁剪渐变层,文字图层就不在拥有显示功能,这个图层就被弄来裁剪了,不会显示,在下面代码中也会有说明. 2.1 创建一个带有文字的label,label能显示文字. 2.2 设置渐变图层的mask为label图层,就能用文字裁剪渐变图层了.

  • iOS中利用CAGradientLayer绘制渐变色的方法实例

    前言 以前不用自己切图,现在要自己切图,看到设计稿有好多不同规格的渐变色的背景,一个一个切的话好麻烦,没有想到iOS本来就可以实现渐变色.也就是今天的主角CAGradientLayer. 渐变色使用的类是CAGradientLayer,有两个要素,渐变颜色的起点和终点.渐变的颜色集合 简单示例: //设置渐变颜色 CAGradientLayer *gradientLayer = [CAGradientLayer layer]; gradientLayer.frame = view.bounds;

  • iOS Label实现文字渐变色效果

    前言 前一段时间公司有需求做文字的的渐变色,自己当时也是网上看了一些,自己写了两个方法,实现了需求,写了很久了,只是现在才想起来,就当继续学习了.分享出来供大家参考学习,下面来看看详细的介绍: 先看看简单的: - (void)addGradientRampWithColors:(NSArray *)colors text:(NSString *)text { //label在父视图上的(x,y)的值不是中心点 CGPoint point = CGPointMake(30, 500); UILab

  • iOS中Navbar设置渐变色效果的方法示例

    本文主要给大家介绍了关于iOS中Navbar设置渐变色效果的相关内容,分享出来供大家参考学习,下面来看看详细的介绍吧. 设置渐变色 #import "NavigationViewController.h" #define LBColor(r, g, b) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1.0] @interface NavigationViewController () @end

  • iOS tableView实现头部拉伸并改变导航条渐变色

    本文实例为大家分享了iOS tableView实现头部拉伸改变,导航条渐变色的具体代码,供大家参考,具体内容如下 #import "TableViewController.h" static NSString *ident = @"cell"; #define RGBA(r,g,b,a) [UIColor colorWithRed:r/255.0f green:g/255.0f blue:b/255.0f alpha:a] #define RGB(r,g,b) RG

  • iOS给border设置渐变色的方法实例

    前言 本文将从4行代码出发给一个view设置渐变色,分别会谈到几个重要的渐变色相关属性,在使用过程中有几个需要特别关注的点. 给一个view的border设置渐变色是比较高阶的用法,希望本文可以在这个方面帮助到你. 给view设置渐变色 通过4行代码就可以给一个view设置渐变色: let view = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100)) let gradientLayer = CAGradientLaye

  • JFrame中添加和设置JPanel的方法实例解析

    Swing 程序用JFrame 对象实现了它们的窗口.JFrame 类是AWT Frame 类的一个子类.它还加入了一些Swing 所独有的特性.与 Frame 的使用十分相似.唯一的区别在于,你不能将组件加入到JFrame中.你可以或者将组件加入到JFrame 的content pane(内容面板) 中,或者提供一个新的content pane(内容面板). 面板与顶层容器的不同点:面板不能独立存在,必须被添加到其他容器内部(面板可以嵌套). JFrame 有一个 Content Pane,窗

  • iOS模仿QQ侧边栏的实现方法实例

    前言 新版QQ在UI方面做了不少更新,其中一个比较炫酷的效果就是其侧滑导航栏.虽然这种UI已经是被模仿来模仿去烂掉牙了,虽然有统计说这种设计的用户体验并不好.但是我本人还是非常喜欢这种效果的,下面就来一起看看详细的实现方法吧. 分析:QQ侧边栏都用了哪些手势,有哪些效果? QQ的主页是个UITabbarController,暂且称为MainVc左侧边缘添加的手势为边缘手势UIScreenEdgePanGestureRecognizer 当边缘手势滑动到屏幕中间时判断MainVc移动的距离超过屏幕

  • MySQL数据库超时设置配置的方法实例

    目录 前言 1. JDBC超时设置 2. 连接池超时设置 3. MyBatis查询超时 4. 事务超时 总结 前言 最近备战京东双11,在配置MySQL的超时配置发现有很多地方可以设置.这么多超时的配置有什么影响,以及配置会有什么影响呢?今天的文章就让我来大家来分析一下. 1. JDBC超时设置 connectTimeout:表示等待和MySQL数据库建立socket链接的超时时间,默认值0,表示不设置超时,单位毫秒,建议30000 socketTimeout:表示客户端和MySQL数据库建立s

  • 如何在Renderer中设置属性 Renderer中设置属性的方法实例

    ClassFactory的properties妙用 1)UITextField与label,使用label显不出来 复制代码 代码如下: package com.citigroup.presentation.csa {     import flash.events.MouseEvent; import mx.controls.Label;     import mx.controls.advancedDataGridClasses.AdvancedDataGridHeaderRenderer;

  • iOS设置圆角的4种方法实例(附性能评测)

    四种设置圆角的方法 从网上收集了各种设置圆角的方法,总结起来有以下四种: 1.设置 layer 的 cornerRadius view.layer.masksToBounds = YES; view.layer.cornerRadius = imgSize.width / 2; 2.用贝塞尔曲线作 mask 圆角 CAShapeLayer *layer = [CAShapeLayer layer]; UIBezierPath *aPath = [UIBezierPath bezierPathWi

  • IOS自带Email的两种方法实例详解

    IOS自带Email的两种方法实例详解 IOS系统框架提供的两种发送Email的方法:openURL 和 MFMailComposeViewController.借助这两个方法,我们可以轻松的在应用里加入如用户反馈这类需要发送邮件的功能. 1.openURL 使用openURL调用系统邮箱客户端是我们在IOS3.0以下实现发邮件功能的主要手段.我们可以通过设置url里的相关参数来指定邮件的内容,不过其缺点很明显,这样的过程会导致程序暂时退出.下面是使用openURL来发邮件的一个小例子: #pr

  • IOS UITableView颜色设置的实例详解

    IOS UITableView颜色设置的实例详解 1.系统默认的颜色设置  //无色 cell.selectionStyle = UITableViewCellSelectionStyleNone; //蓝色 cell.selectionStyle = UITableViewCellSelectionStyleBlue; //灰色 cell.selectionStyle = UITableViewCellSelectionStyleGray; 2.自定义颜色和背景设置 改变UITableView

随机推荐