漸層背景的製作和mask功能,基礎功再升級!

閱讀時間約 2 分鐘

目的:

  1. 做出漸層的背景。
  2. mask遮罩。

做出漸層的背景

raw-image

運用CAGradientLayer()建立實現漸層功能的實例。

然後UIView建立一個確切位置的框框。

根據.colors 的array可設定由哪兩個顏色形成漸層。

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

也可以藉由設定startPoint和endPoint去決定漸層方向。

這裡有研究一下bounds和frame的差別:

bounds:相對於自己的父圖片的位置。

frame: 在整張圖中的絕對位置。

最後記得.addsublayer將圖片加在我們事先設定好的框框中才會出現我們所設定的漸層。(若圖片設定完沒跑出來可以注意這一點!!!)

Frame 和 Bounds 的區別
剛好今天面試的時侯有被問到,原本還不太理解它,現在既然理解了就來分享給大家知道囉。首先先針對這兩個名詞來各自來說明一下:franksios.medium.com

https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/%E5%88%A9%E7%94%A8-cagradientlayer-%E8%A3%BD%E4%BD%9C%E6%BC%B8%E5%B1%A4-e86cee69f3a0

mask功能

raw-image

這裡要注意,因為mask功能只有在UIimageview中有,所以必須將圖片轉換成UIimageview的形式才行。

另外圖片必須在asset中設為3x,因為圖片可能跑掉所以顯示不出在projecy中,接著可以運用.frame去調整圖片的位置讓他顯示出來。

https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/%E5%88%A9%E7%94%A8-uiview-%E7%9A%84-mask-%E8%A8%AD%E8%A8%88%E7%89%B9%E5%88%A5%E5%BD%A2%E7%8B%80%E7%9A%84%E5%9C%96%E7%89%87-4e22cd7c3fbe

    1會員
    37內容數
    留言0
    查看全部
    發表第一個留言支持創作者!
    dab戴伯的沙龍 的其他內容
    這次使用UIBezierPath的功能在SwiftUI去畫一張圖,雖然我的藝術天份蠻差的,但藉由程式之手至少是可以畫出稍微相似的圖出來哈哈~ 主要運用到兩種功能畫圖: let body = UIBezierPath(arcCenter: CGPoint(x: 213, y: 213), radi
    這比較像是IBOulet和IBAction的基礎練習,比較需要注意的是: 若要設定點選按鈕時Scroll view能移動到該衣服的位置,就需要: scrollrow.setContentOffset(CGPoint(x: pagecontrol.currentPage * Int(scrollr
    目的: 1 使用 date picker & slider 做時間的魔法師,顯示自己十年的變化成長。 2 date picker 設定最小 & 最大時間,讓時間的範圍為 2009 ~ 2019。 3 滑動 slider 時,slider 會停在整數的位置,比方滑到 2010.6 時會四捨五入到
    在還不會的時候,我還想說要為APP放上一個封面 Icon是不是很麻煩,多虧潘帥的說明,簡單五分鐘就能帥一個APP了。 到網站上將想設定成封面的圖片上傳並轉檔下載。 App Icon Generator Generate icons and images for mobile apps, andr
    目的:研究各種UI元件 segmented control: 可設定選項讓使用者做選擇,其中幾項可以注意: Segments: 可設定要幾種選擇欄位。 Segment:可選擇哪一個欄位的內容要做更動,包括標題,圖片等等。 Title: 可輸入更改欄位的文字內容。 Image:可設定欄位的圖
    這次模仿製作IOS的APP設計,第一次使用sketch和zeplin兩個軟體模仿,這真的是像我這種沒有設計感的人的救星啊!!!,你可以從sketch去分析你要的圖片或者色塊,甚至設計你的UI版面。 這次是將sketch檔案中需要的圖片及文字分別進行make exportable,以此可以讓sket
    這次使用UIBezierPath的功能在SwiftUI去畫一張圖,雖然我的藝術天份蠻差的,但藉由程式之手至少是可以畫出稍微相似的圖出來哈哈~ 主要運用到兩種功能畫圖: let body = UIBezierPath(arcCenter: CGPoint(x: 213, y: 213), radi
    這比較像是IBOulet和IBAction的基礎練習,比較需要注意的是: 若要設定點選按鈕時Scroll view能移動到該衣服的位置,就需要: scrollrow.setContentOffset(CGPoint(x: pagecontrol.currentPage * Int(scrollr
    目的: 1 使用 date picker & slider 做時間的魔法師,顯示自己十年的變化成長。 2 date picker 設定最小 & 最大時間,讓時間的範圍為 2009 ~ 2019。 3 滑動 slider 時,slider 會停在整數的位置,比方滑到 2010.6 時會四捨五入到
    在還不會的時候,我還想說要為APP放上一個封面 Icon是不是很麻煩,多虧潘帥的說明,簡單五分鐘就能帥一個APP了。 到網站上將想設定成封面的圖片上傳並轉檔下載。 App Icon Generator Generate icons and images for mobile apps, andr
    目的:研究各種UI元件 segmented control: 可設定選項讓使用者做選擇,其中幾項可以注意: Segments: 可設定要幾種選擇欄位。 Segment:可選擇哪一個欄位的內容要做更動,包括標題,圖片等等。 Title: 可輸入更改欄位的文字內容。 Image:可設定欄位的圖
    這次模仿製作IOS的APP設計,第一次使用sketch和zeplin兩個軟體模仿,這真的是像我這種沒有設計感的人的救星啊!!!,你可以從sketch去分析你要的圖片或者色塊,甚至設計你的UI版面。 這次是將sketch檔案中需要的圖片及文字分別進行make exportable,以此可以讓sket
    你可能也想看
    Google News 追蹤
    Thumbnail
    這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
    Thumbnail
    材料準備 貝禮詩奶酒-300ml 藍柑橘利口酒-15ml 蘭姆酒-50ml 龍舌蘭酒-30ml 伏特加-20ml 琴酒-20ml 生命之水-30ml 鮮奶-100ml 製作過程 將貝禮詩奶酒和鮮奶以外的材料放入雪克杯搖勻,杯子放入冰塊,加入鮮奶,接著用湯匙沿杯緣慢慢倒入貝禮詩奶酒
    Thumbnail
    材料購買 材料-藍柑橘利口酒,伏特加,蜂蜜檸檬水,牛奶,雪碧 製作過程 藍柑橘利口酒-10ml 伏特加-20ml 蜂蜜檸檬水-15ml 雪碧-適量 將冰好的杯子取出加入冰塊,倒入三分之一的牛奶,除了雪碧以外的材料放入雪克杯搖勻,雪克杯的冰塊一樣要滿過酒體,搖勻後將湯匙貼在水平面上沿湯匙
    Thumbnail
    材料購買 材料-藍柑橘利口酒,伏特加,蜂蜜檸檬水,牛奶 除了利口酒以外通常都能在賣場找得到,利口酒要在專門店才比較常見到,利口酒也叫做香甜酒,這裡是使用MB這個牌子,伏特加和其他材料也不限品牌,但千萬不要買台酒做的伏特加,那個只能拿來清廁所,不能拿來喝。 器具-雪克杯,調酒量杯 上述器具沒有
    Thumbnail
    [璃Band官方最新News]《回憶之舞》創作背景分享|鋼琴與鍵盤打擊樂的融合應用曲《回憶之舞》|原作曲者孫春璃已重新編曲為官方鋼琴獨奏譜、馬林巴木琴獨奏譜、鍵盤打擊樂三重奏譜,並出版到各大電子書平台
    Thumbnail
    在現代工作和學習中,簡報是一種不可或缺的溝通工具。為了使您的簡報更具吸引力和專業感,我們整理了多款來自 Canva 的漸層簡報背景樣式,讓你不再需要花費大量時間思考簡報設計,只需直接套用這些漸層風格,就可以輕鬆製作出令人印象深刻的簡報。快來試試看!
    Thumbnail
    這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
    Thumbnail
    材料準備 貝禮詩奶酒-300ml 藍柑橘利口酒-15ml 蘭姆酒-50ml 龍舌蘭酒-30ml 伏特加-20ml 琴酒-20ml 生命之水-30ml 鮮奶-100ml 製作過程 將貝禮詩奶酒和鮮奶以外的材料放入雪克杯搖勻,杯子放入冰塊,加入鮮奶,接著用湯匙沿杯緣慢慢倒入貝禮詩奶酒
    Thumbnail
    材料購買 材料-藍柑橘利口酒,伏特加,蜂蜜檸檬水,牛奶,雪碧 製作過程 藍柑橘利口酒-10ml 伏特加-20ml 蜂蜜檸檬水-15ml 雪碧-適量 將冰好的杯子取出加入冰塊,倒入三分之一的牛奶,除了雪碧以外的材料放入雪克杯搖勻,雪克杯的冰塊一樣要滿過酒體,搖勻後將湯匙貼在水平面上沿湯匙
    Thumbnail
    材料購買 材料-藍柑橘利口酒,伏特加,蜂蜜檸檬水,牛奶 除了利口酒以外通常都能在賣場找得到,利口酒要在專門店才比較常見到,利口酒也叫做香甜酒,這裡是使用MB這個牌子,伏特加和其他材料也不限品牌,但千萬不要買台酒做的伏特加,那個只能拿來清廁所,不能拿來喝。 器具-雪克杯,調酒量杯 上述器具沒有
    Thumbnail
    [璃Band官方最新News]《回憶之舞》創作背景分享|鋼琴與鍵盤打擊樂的融合應用曲《回憶之舞》|原作曲者孫春璃已重新編曲為官方鋼琴獨奏譜、馬林巴木琴獨奏譜、鍵盤打擊樂三重奏譜,並出版到各大電子書平台
    Thumbnail
    在現代工作和學習中,簡報是一種不可或缺的溝通工具。為了使您的簡報更具吸引力和專業感,我們整理了多款來自 Canva 的漸層簡報背景樣式,讓你不再需要花費大量時間思考簡報設計,只需直接套用這些漸層風格,就可以輕鬆製作出令人印象深刻的簡報。快來試試看!