【APP/Android】如何撰寫 shape 製作元件圓角樣式：邊框、框線、padding、顏色、漸層

tags: APP Android

Common 目標

1. 元件的shape有很多種，本篇只針對 rectangle 矩形來說明
2. shape 種類：
   • rectangle 矩形
   • oval 橢圓
   • line 線
   • ring 環
3. rectangle 矩形常用在：TextView、Button、EditText、ImageView…

實現方式

撰寫xml檔

1. 於 drawable 資料夾內，新增 Drawable resource file，e.g. example.xml
2. 元件的形狀為 rectangle 矩形

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">

solid：單一、實心顏色

<solid android:color="#8FFF"/>

gradient：漸層顏色

• type：漸層的類型，e.g. linear, radial, sweep
• startColor, centerColor, endColor：漸層顏色的設定
• angle：漸層的角度

<gradient   
    android:startColor="#449def"
    android:centerColor="#2f6699"  
    android:endColor="#449def"  
    android:angle="270" />

corners：圓角

• radius：設定全部的圓角
• topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius

<corners android:radius="2dp" />

stroke 邊框

• width：框線寬度
• color：框線顏色

<stroke   
    android:width="1dp"  
    android:color="#2f6699" />

padding

<padding 
    android:left="10dp"  
    android:top="10dp"  
    android:right="10dp"  
    android:bottom="10dp" />

將xml加入元件

1. 回到Layout，找到欲修改樣式的元件
2. 在元件的屬性中加入 android:background="@drawable/example"

補充：整理表格

Example 範例

<?xml version="1.0" encoding="utf-8"?>  
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item> 
        <shape>
            <!--元件的漸層-->
            <gradient   
                android:startColor="#449def"
                android:centerColor="#2f6699"  
                android:endColor="#449def"  
                android:angle="270" />
            
            <!--邊框顏色、粗細-->
            <stroke   
                android:width="1dp"  
                android:color="#2f6699" />
            
            <!--圓角-->
            <corners android:radius="2dp" />
            
            <padding 
                android:left="10dp"  
                android:top="10dp"  
                android:right="10dp"  
                android:bottom="10dp" />
        </shape> 
    </item>
</selector>

結果呈現

Reference 參考資料

1. shape 元件樣式：http://learnexp.tw/【android-小知識】shape-元件樣式/
2. Android 实现圆角按钮（selector和shape的简单用法）http://blog.csdn.net/leilifengxingmw/article/details/50783574