[Android] layer-list 应用 - 爱奇艺和当贝市场的 QR Code 扫描外框

今天工作需要设计 QR Code 扫描来做客服表单填写
只出现 QR Code 没设计感，感觉少了什么
参考了爱奇艺和当贝市场
发现外层都还有一个框
如下图

这个框要如何实现，初步构想了一下

第一种方式
使用第一种方式当然是最好的，只需要设计帮忙出一张图就行，背景套用上去就好
但如果今天急单，设计又刚好不在，自己的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/android">   <item>       <shape android:shape="rectangle">           <stroke               android:width="2dp"               android:color="@color/dark_gray" />       </shape>   </item></layer-list>

Step3: 新增另一个 corner.xml 来做右上的直角，一样用 <layer-list> 来完成
第一个 <item> 先做一个隐形的正方形，就是直角的大小，大小随你订
第二个 <item> 做横的一槓，放在右上方。(这里一直无法用 line 做到放在右上方，所以改用 rectangle)
第三个 <item> 一样做一槓，但利用 <rotate> 做 270度的旋转

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">   <item>       <shape android:shape="rectangle">           <size               android:width="30dp"               android:height="30dp" />       </shape>   </item>   <item android:gravity="right|top">       <shape android:shape="rectangle">           <size               android:width="30dp"               android:height="6dp" />           <solid               android:color="@color/yellow" />       </shape>   </item>   <item android:gravity="right|top">       <rotate           android:fromDegrees="270"           android:toDegrees="270"           android:pivotX="100%"           android:pivotY="100%">       <shape android:shape="rectangle">           <size               android:width="24dp"               android:height="6dp" />           <solid               android:color="@color/yellow" />       </shape>       </rotate>   </item></layer-list>

补充说明：pivotX 和 pivotY 是指旋转基準座标(圆心)，以这个 case 为例就是以 100%, 100% 这个做标为圆心去做 270 度的旋转
那因为旋转完后在加上横的那槓的长度会变太长，所以需要扣掉才会相同，成为等长的直角。

Step4: 回到 background.xml 加上刚刚完成的 corner 并分别放置于四个角落，其中三个也是用 <rotate> 来做旋转的动作，然后套上元件的背景就大功告成拉~~
以下是完整程式码：

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">   <item>       <shape android:shape="rectangle">           <stroke               android:width="2dp"               android:color="@color/dark_gray" />       </shape>   </item>   <item       android:gravity="right|top"       android:drawable="@drawable/bg_about_devices_qrcode_corner">   </item>   <item android:gravity="right|bottom">       <rotate           android:fromDegrees="90"           android:toDegrees="90"           android:drawable="@drawable/bg_about_devices_qrcode_corner">       </rotate>   </item>   <item android:gravity="left|bottom">       <rotate           android:fromDegrees="180"           android:toDegrees="180"           android:drawable="@drawable/bg_about_devices_qrcode_corner">       </rotate>   </item>   <item android:gravity="left|top">       <rotate           android:fromDegrees="270"           android:toDegrees="270"           android:drawable="@drawable/bg_about_devices_qrcode_corner">       </rotate>   </item></layer-list>