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漸變色內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: