快捷導(dǎo)航

iOS給border設(shè)置漸變色的方法實(shí)例

更新時(shí)間：2021年03月09日 10:43:35 作者：施治昂

這篇文章主要給大家介紹了關(guān)于iOS給border設(shè)置漸變色的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

本文將從4行代碼出發(fā)給一個(gè)view設(shè)置漸變色，分別會談到幾個(gè)重要的漸變色相關(guān)屬性，在使用過程中有幾個(gè)需要特別關(guān)注的點(diǎn)。

給一個(gè)view的border設(shè)置漸變色是比較高階的用法，希望本文可以在這個(gè)方面幫助到你。

給view設(shè)置漸變色

通過4行代碼就可以給一個(gè)view設(shè)置漸變色：

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)

在創(chuàng)建CAGradientLayer以后需要設(shè)置frame才能展示出來，否則它的大小會使用默認(rèn)的0。

漸變色會根據(jù)colors數(shù)組來展示，這個(gè)數(shù)組的類型是CGColorRef，所以需要用.cgColor強(qiáng)制轉(zhuǎn)換；如果使用的OC語法，必須加上(__bridge id)，否則漸變色會顯示不出來。

默認(rèn)情況下漸變會從上至下，可是通過設(shè)置startPoint和endPoint來改變這個(gè)順序：

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

這兩個(gè)點(diǎn)的范圍是從0到1，也就是說最左邊和最上邊是0，最下和最右是1。這個(gè)例子中漸變會變成從左上角到右下角。

漸變色還有一個(gè)重要的屬性是locations，這個(gè)屬性是用來指定colors中設(shè)置的每個(gè)顏色的終點(diǎn)的。

gradientLayer.locations = [0.2, 0.8]

locations中元素的范圍是從0到1。在這里，數(shù)組中的第一個(gè)元素0.2指定了colors數(shù)組中第一個(gè)元素紅色的終點(diǎn)是0.2，也就是說把整個(gè)漸變色范圍分成10份，從開始到2/10處都是純紅色，從2/10到8/10處是純紅色到純黃色的漸變，而從8/10到10/10是純黃色。

給view的border設(shè)置漸變色

使用UIBezierPath來創(chuàng)建一個(gè)帶圓角的CAShapeLayer，并且把它的圓角設(shè)置成view的圓角，就可以把一個(gè)view的border設(shè)置為漸變色。

... // 同上給view設(shè)置gradientLayer
  
let shapeLayer = CAShapeLayer()
shapeLayer.borderWidth = 1
shapeLayer.path = UIBezierPath(roundedRect: gradientLayer.bounds, cornerRadius: 10).cgPath
shapeLayer.fillColor = UIColor.clear.cgColor // 必須要設(shè)置成clearColor或者nil，默認(rèn)是黑色
shapeLayer.strokeColor = UIColor.white.cgColor // 隨便設(shè)置一個(gè)非clearColor的顏色
  
gradientLayer.mask = shapeLayer

view.layer.addSublayer(gradientLayer)

borderWidth shapeLayer的border寬度和view的相同，可以根據(jù)設(shè)計(jì)圖來設(shè)置。
cornerRadius UIBezierPath的圓角和view的圓角相同；roundedRect和CAGradientLayer的大小相同。
fillColor 是shapeLayer的填充色，默認(rèn)是黑色，建議設(shè)置成nil或者是透明色clearColor
strokeColor 是border的描邊色，如果設(shè)置成clearColor的話就不會繪制出來border了，這里隨便一個(gè)顏色就是讓其能夠繪制出來，實(shí)際使用的是漸變色
mask 用shapeLayer作為gradientLayer的mask，可以讓gradientLayer內(nèi)部挖空，只保留邊緣border的漸變顏色
最終把漸變色layer添加到view.layer上，shapeLayer只是用來修飾gradientlayer的，目的是把gradientlayer的內(nèi)部挖空，并且把border和圓角做出來。