iOS給border設(shè)置漸變色的方法實(shí)例
本文將從4行代碼出發(fā)給一個(gè)view設(shè)置漸變色,分別會(huì)談到幾個(gè)重要的漸變色相關(guān)屬性,在使用過(guò)程中有幾個(gè)需要特別關(guān)注的點(diǎn)。
給一個(gè)view的border設(shè)置漸變色是比較高階的用法,希望本文可以在這個(gè)方面幫助到你。
給view設(shè)置漸變色通過(guò)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才能展示出來(lái),否則它的大小會(huì)使用默認(rèn)的0。
漸變色會(huì)根據(jù)colors數(shù)組來(lái)展示,這個(gè)數(shù)組的類(lèi)型是CGColorRef,所以需要用.cgColor強(qiáng)制轉(zhuǎn)換;如果使用的OC語(yǔ)法,必須加上(__bridge id),否則漸變色會(huì)顯示不出來(lái)。
默認(rèn)情況下漸變會(huì)從上至下,可是通過(guò)設(shè)置startPoint和endPoint來(lái)改變這個(gè)順序:
gradientLayer.startPoint = CGPoint(x: 0, y: 0)gradientLayer.endPoint = CGPoint(x: 1, y: 1)
這兩個(gè)點(diǎn)的范圍是從0到1,也就是說(shuō)最左邊和最上邊是0,最下和最右是1。這個(gè)例子中漸變會(huì)變成從左上角到右下角。
漸變色還有一個(gè)重要的屬性是locations,這個(gè)屬性是用來(lái)指定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,也就是說(shuō)把整個(gè)漸變色范圍分成10份,從開(kāi)始到2/10處都是純紅色,從2/10到8/10處是純紅色到純黃色的漸變,而從8/10到10/10是純黃色。
給view的border設(shè)置漸變色使用UIBezierPath來(lái)創(chuàng)建一個(gè)帶圓角的CAShapeLayer,并且把它的圓角設(shè)置成view的圓角,就可以把一個(gè)view的border設(shè)置為漸變色。
... // 同上給view設(shè)置gradientLayer let shapeLayer = CAShapeLayer()shapeLayer.borderWidth = 1shapeLayer.path = UIBezierPath(roundedRect: gradientLayer.bounds, cornerRadius: 10).cgPathshapeLayer.fillColor = UIColor.clear.cgColor // 必須要設(shè)置成clearColor或者nil,默認(rèn)是黑色shapeLayer.strokeColor = UIColor.white.cgColor // 隨便設(shè)置一個(gè)非clearColor的顏色 gradientLayer.mask = shapeLayerview.layer.addSublayer(gradientLayer) borderWidth shapeLayer的border寬度和view的相同,可以根據(jù)設(shè)計(jì)圖來(lái)設(shè)置。 cornerRadius UIBezierPath的圓角和view的圓角相同;roundedRect和CAGradientLayer的大小相同。 fillColor 是shapeLayer的填充色,默認(rèn)是黑色,建議設(shè)置成nil或者是透明色clearColor strokeColor 是border的描邊色,如果設(shè)置成clearColor的話(huà)就不會(huì)繪制出來(lái)border了,這里隨便一個(gè)顏色就是讓其能夠繪制出來(lái),實(shí)際使用的是漸變色 mask 用shapeLayer作為gradientLayer的mask,可以讓gradientLayer內(nèi)部挖空,只保留邊緣border的漸變顏色 最終把漸變色layer添加到view.layer上,shapeLayer只是用來(lái)修飾gradientlayer的,目的是把gradientlayer的內(nèi)部挖空,并且把border和圓角做出來(lái)。 總結(jié)
通過(guò)這篇文章我們了解了怎么給一個(gè)view設(shè)置漸變色,并詳細(xì)闡述了漸變色的幾個(gè)重要屬性。關(guān)于給border設(shè)置漸變色是一個(gè)進(jìn)階的知識(shí)點(diǎn)。
到此這篇關(guān)于iOS給border設(shè)置漸變色的文章就介紹到這了,更多相關(guān)iOS border漸變色內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. 解決Android Studio Design界面不顯示layout控件的問(wèn)題2. python mysql 字段與關(guān)鍵字沖突的解決方式3. bootstrap select2 動(dòng)態(tài)從后臺(tái)Ajax動(dòng)態(tài)獲取數(shù)據(jù)的代碼4. Python加載數(shù)據(jù)的5種不同方式(收藏)5. python讀取中文路徑時(shí)出錯(cuò)(2種解決方案)6. Python用K-means聚類(lèi)算法進(jìn)行客戶(hù)分群的實(shí)現(xiàn)7. python編寫(xiě)五子棋游戲8. Java源碼解析之接口List9. Java xml數(shù)據(jù)格式返回實(shí)現(xiàn)操作10. layui Ajax請(qǐng)求給下拉框賦值的實(shí)例
