[Android] layer-list 應用 - 愛奇藝和當貝市場的 QR Code 掃描外框

今天工作需要設計 QR Code 掃描來做客服表單填寫 只出現 QR Code 沒設計感,感覺少了什麼 參考了愛奇藝和當貝市場 發現外層都還有一個框 如下圖 這個框要如何實現,初步構想了一下 請設計出 9patch 圖 用五個 drawable 組出來 (框及四個角) 利用 layer-list 和 drawable 組合 使用第一種方式當然是最好的,只需要設計幫忙出一張圖就行,背景套用上去就好 但如果今天急單,設計又剛好不在,自己的PS又爛到可以怎麼辦? 只好自己刻了 第二種方式 先用<shape>分別做成框和四個角的 drawable.xml,再用 RelativeLayout 和 ImageView 來組成,但這樣又太多檔案和程式碼,有沒有辦法再更簡潔,所以想到第三種方式 利用 layer-list 和 drawable 組合 Step1: 新增最外層為 <layer-list> 的 background.xml <? xml version= "1.0" encoding= "utf-8" ?> < layer-list xmlns:android= "http://schemas.android.com/apk/res/android" > </ layer-list > Step2: 用 <shape> 做一個外層的框,可以用 Preview 來看看結果 這裡補充一下,<layer-list> 是由多個 <item> 組成,所以 <layer-list> 中只會有 <item> 不可以有 <shape> 等其他的 element <? xml version= "1.0" encoding= "utf-8" ?> < layer-list xmlns:android= "http://schemas.android.com/apk/res/andro...