1. 程式人生 > >Android中shape的用法詳解

Android中shape的用法詳解

用程式碼生成圖片,而且圖片能隨意的更改,既方便又節省空間,下面就介紹用shape生成自定義圖形的方法

步驟:

1. 在res/drawable下新建一個xml檔案;

2. 在程式碼中引用這個xml檔案,引用方式和圖片一樣。

定義shape圖形的語法如下:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape=["rectangle" | "oval" | "line" | "ring"]      //共有4種類型,矩形(預設)/橢圓形/直線形/環形
    // 以下4個屬性只有當型別為環形時才有效
    android:innerRadius="dimension"     //內環半徑
    android:innerRadiusRatio="float"    //內環半徑相對於環的寬度的比例,比如環的寬度為50,比例為2.5,那麼內環半徑為20
    android:thickness="dimension"   //環的厚度
    android:thicknessRatio="float"     //環的厚度相對於環的寬度的比例
    android:useLevel="boolean">    //如果當做是LevelListDrawable使用時值為true,否則為false.

    <corners    //定義圓角
        android:radius="dimension"      //全部的圓角半徑
        android:topLeftRadius="dimension"   //左上角的圓角半徑
        android:topRightRadius="dimension"  //右上角的圓角半徑
        android:bottomLeftRadius="dimension"    //左下角的圓角半徑
        android:bottomRightRadius="dimension" />    //右下角的圓角半徑

    <gradient   //定義漸變效果
        android:type=["linear" | "radial" | "sweep"]    //共有3中漸變型別,線性漸變(預設)/放射漸變/掃描式漸變
        android:angle="integer"     //漸變角度,必須為45的倍數,0為從左到右,90為從上到下
        android:centerX="float"     //漸變中心X的相當位置,範圍為0~1
        android:centerY="float"     //漸變中心Y的相當位置,範圍為0~1
        android:startColor="color"      //漸變開始點的顏色
        android:centerColor="color"     //漸變中間點的顏色,在開始與結束點之間
        android:endColor="color"    //漸變結束點的顏色
        android:gradientRadius="float"  //漸變的半徑,只有當漸變型別為radial時才能使用
        android:useLevel=["true" | "false"] />  //使用LevelListDrawable時就要設定為true。設為false時才有漸變效果

    <padding    //內部邊距
        android:left="dimension"
        android:top="dimension"
        android:right="dimension"
        android:bottom="dimension" />

    <size   //自定義的圖形大小
        android:width="dimension"
        android:height="dimension" />

    <solid  //內部填充顏色
        android:color="color" />

    <stroke     //描邊
        android:width="dimension"   //描邊的寬度
        android:color="color"   //描邊的顏色
        // 以下兩個屬性設定虛線
        android:dashWidth="dimension"   //虛線的寬度,值為0時是實線
        android:dashGap="dimension" />      //虛線的間隔
</shape>

下面是幾個示例:

1. 圓角矩形,掃描式漸變

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

    <corners
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp"
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp" />

    <gradient
        android:type="sweep"
        android:endColor="@android:color/holo_blue_bright"
        android:startColor="@android:color/holo_green_dark"
        android:centerColor="@android:color/holo_blue_dark"
        android:useLevel="false" />

    <size android:width="60dp" android:height="60dp" />
</shape>
結果:


2. 圓形,線性漸變

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

    <gradient
        android:type="linear"
        android:angle="45"
        android:startColor="@android:color/holo_green_dark"
        android:centerColor="@android:color/holo_blue_dark"
        android:endColor="@android:color/holo_red_dark"
        android:useLevel="false" />

    <size android:width="60dp" android:height="60dp" />

    <stroke android:width="1dp"
        android:color="@android:color/white" />

</shape>
結果:

3. 虛線

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

    <size android:width="60dp"
        android:height="60dp" />

    <stroke android:width="2dp"
        android:color="@android:color/holo_purple"
        android:dashWidth="10dp"
        android:dashGap="5dp" />
</shape>
結果:


4. 環形,放射型漸變

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:useLevel="false"
    android:innerRadius="40dp"
    android:thickness="3dp">

    <gradient android:type="radial"
        android:gradientRadius="150"
        android:centerY="0.1"
        android:centerX="0.2"
        android:startColor="@android:color/holo_red_dark"
        android:centerColor="@android:color/holo_green_dark"
        android:endColor="@android:color/white" />

    <size android:width="90dp"
        android:height="90dp" />

</shape>
結果:


官方文件: