Android樣式開發之Shape篇：學習Shape的應用

一：案例1:自定義Shape使EditText化身為Bootstrap 風格的 textarea

1.在 drawable 中 shape xml檔案

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#FFFFFF"/>

    <stroke
 
        android:width="0.5dp"
        android:color="#dddddd"/>

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

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

</shape>

2.通過background引用定義好的shape

<EditText
       android:id="@+
 
id/qj_content"
       android:layout_below="@id/divider_three"
       android:layout_width="match_parent"
       android:layout_height="100dp"
       android:enabled="true"
       android:gravity="top"
       android:minLines="8"
       android:maxLines="10"
       android:scrollbars="vertical"
       android:background="@drawable
 
/shape_textarea"
       android:hint="請假內容"
       android:textColorHint="@color/hint_text_gray"/>

3.效果圖：

二：看看shape的基本用法和常見屬性

1.把shape定義的xml檔案存放在drawable目錄下

2.用通過android:shape屬性可以指定：shape的形狀

• rectangle: 矩形，預設的形狀，可以畫出直角矩形、圓角矩形、弧形等
• oval: 橢圓形，用得比較多的是畫正圓
• line: 線形，可以畫實線和虛線
• ring: 環形，可以畫環形進度條

常見用法如下:

<?xml version="1.0" encoding="utf-8"?>  
<!-- android:shape指定形狀型別，預設為rectangle -->  
<shape xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="rectangle">  

    <!-- solid指定形狀的填充色，只有android:color一個屬性 -->  
    <solid android:color="#2F90BD" />  

    <!-- padding設定內容區域離邊界的間距 -->  
    <padding  
        android:bottom="12dp"  
        android:left="12dp"  
        android:right="12dp"  
        android:top="12dp" />  

    <!-- corners設定圓角，只適用於rectangle -->  
    <corners android:radius="10dp" />  

    <!-- stroke設定描邊 -->  
    <stroke  
        android:width="2dp"  
        android:color="@android:color/darker_gray"  
        android:dashGap="4dp"  
        android:dashWidth="4dp" />  
</shape>  

3.shape有6個屬性，分別為：

• solid：填充物，只有android:color一個屬性
• corners：設定圓角，即四個角的弧度
• gradient：顏色漸變
• padding：間隔，xml裡經常用到，不比多解釋
• size：長寬
• stroke：設定圖片邊緣顏色

1. solid: 設定形狀填充的顏色，只有android:color一個屬性
2. padding: 設定內容與形狀邊界的內間距，可分別設定左右上下的距離
   
   • android:left 左內間距
   • android:right 右內間距
   • android:top 上內間距
   • android:bottom 下內間距
3. gradient: 設定形狀的漸變顏色，可以是線性漸變、輻射漸變、掃描性漸變
4. android:type 漸變的型別
   
   • linear 線性漸變，預設的漸變型別
   • radial 放射漸變，設定該項時，android:gradientRadius也必須設定
   • sweep 掃描性漸變
   • android:startColor 漸變開始的顏色
   • android:endColor 漸變結束的顏色
   • android:centerColor 漸變中間的顏色
   • android:angle 漸變的角度，線性漸變時才有效，必須是45的倍數，0表示從左到右，90表示從下到上
   • android:centerX 漸變中心的相對X座標，放射漸變時才有效，在0.0到1.0之間，預設為0.5，表示在正中間
   • android:centerY 漸變中心的相對X座標，放射漸變時才有效，在0.0到1.0之間，預設為0.5，表示在正中間
   • android:gradientRadius 漸變的半徑，只有漸變型別為radial時才使用
   • android:useLevel 如果為true，則可在LevelListDrawable中使用
5. corners: 設定圓角，只適用於rectangle型別，可分別設定四個角不同半徑的圓角，當設定的圓角半徑很大時，比如200dp，就可變成弧形邊了
   
   • android:radius 圓角半徑，會被下面每個特定的圓角屬性重寫
   • android:topLeftRadius 左上角的半徑
   • android:topRightRadius 右上角的半徑
   • android:bottomLeftRadius 左下角的半徑
   • android:bottomRightRadius 右下角的半徑
6. stroke: 設定描邊，可描成實線或虛線。
   
   • android:color 描邊的顏色
   • android:width 描邊的寬度
   • android:dashWidth 設定虛線時的橫線長度
   • android:dashGap 設定虛線時的橫線之間的距離

三：案例2：使用Shape簡單自定義button

1.在drawable中定義shape_submit_btn.xml

<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="rectangle">  

    <solid android:color="#99b638"/>  

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

</shape>  

2.用background引用shape_submit_btn.xml

<Button  
       android:id="@+id/btn_submit_qjsb"  
       android:layout_width="match_parent"  
       android:layout_height="40dp"  
       android:layout_margin="10dp"  
       android:background="@drawable/shape_submit_btn"  
       android:textColor="@color/white"  
       android:text="提交"  
       />  

3.效果圖：

以上只是Shape的簡單用法，活用Shape還可以實現簡便等其他更酷的效果哦