Android Shape屬性介紹和效果實作

在Android開發中我們經常用到Drawable Resources 例如：shape.xml，layer-list.xml等，它們的主要功能是繪制形狀(點，線，圓，矩形，圓環等其他複雜圖形)，相比UI切圖以及自定義View來說，它更簡單有效，何為簡單？不用麻煩UI切圖，沒有和自定義View 那樣的繁瑣代碼。何為有效？沒有切圖那樣的大體積，沒有自定義View那樣的性能消耗。是以說能使用shape完成的功能效果盡量不要去使用切圖和自定義View(雖然自定義View更能看出一個開發者的技術，也可以做出更絢麗的效果)。

是以我們就來看看shape能實作那些效果呢？如下圖：

在實作這些圖形之前我們先了解一下shape的一些屬性，官方文檔給我們展示的屬性如下：

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape=["rectangle" | "oval" | "line" | "ring"] >
    <corners
        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer" />
    <gradient
        android:angle="integer"
        android:centerX="float"
        android:centerY="float"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear" | "radial" | "sweep"]
        android:useLevel=["true" | "false"] />
    <padding
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer" />
    <size
        android:width="integer"
        android:height="integer" />
    <solid
        android:color="color" />
    <stroke
        android:width="integer"
        android:color="color"
        android:dashWidth="integer"
        android:dashGap="integer" />
</shape>
           

在shape中還有一部分屬性官方文檔是沒有給出展示的，我們自己加上看一下，接下來按功能不同進行分别檢視。

1.shape

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    // 繪制形狀類型 矩形，這也是預設值 | 橢圓形 | 線形，需要<stroke>屬性設定線條寬度 | 環形
    android:shape=["rectangle" | "oval" | "line" | "ring"]
    // 是否抖動 預設是true
    android:dither=["true" | "false"]
    // 内圓半徑【隻有當android:shape="ring"時使用】
    android:innerRadius="integer"
    // 環的半徑：環的寬度比，内圓半徑等于環的寬度除以這個值，此值會被innerRadius覆寫，預設值是9【隻有當android:shape="ring"時使用】
    android:innerRadiusRatio="float"
    // 環的厚度【隻有當android:shape="ring"時使用】
    android:thickness="integer"
    // 環的厚度：環的寬度比，厚度等于環的寬度除以這個值，此值會被thickness覆寫，預設是3【隻有當android:shape="ring"時使用】
    android:thicknessRatio="integer"
    // 染色
    android:tint="color"
    // 染色模式
    android:tintMode=["add" | "multiply" | "screen"] | "src_atop" | "src_in" | "src_over"
    // true：這個作為一個 LevelListDrawable使用， 這個值應該是false，【隻有當android:shape="ring"時使用】
    android:useLevel=["true" | "false"]
    // 是否顯示
    android:visible=["true" | "false"] >
</shape>
           

2.corners(形狀的圓角)

<corners
	// 所有圓角的半徑，包含下面4個
    android:radius="integer"
    // 左上角的圓角半徑
    android:topLeftRadius="integer"
    // 右上角的圓角半徑
    android:topRightRadius="integer"
    // 左下角的圓角半徑
    android:bottomLeftRadius="integer"
    // 右下角的圓角半徑
    android:bottomRightRadius="integer" />
           

3.gradient(形狀的漸變顔色)

<gradient
	// 漸變的角度，以度為機關。0從左到右，90從下到上。它必須是45的倍數。預設值為0
    android:angle="integer"
    // 漸變中心相對于X軸的坐标（0，1.0）
    android:centerX="float"
    // 漸變中心相對于Y軸的坐标（0，1.0）
    android:centerY="float"
    // 起始顔色和結束顔色中間的16位顔色值
    android:centerColor="integer"
    // 結束的16位的顔色值
    android:endColor="color"
    // 漸變的半徑。僅适用于android:type="radial"
    android:gradientRadius="integer"
    // 起始的16位的顔色值
    android:startColor="color"
    // 漸變圖案類型 線性漸變，這個是預設值 | 徑向漸變，起始顔色是中心顔色 | 掃描線漸變
    android:type=["linear" | "radial" | "sweep"]
    // 如果作為一個LevelListDrawable使用則為true
    android:useLevel=["true" | "false"] />
           

4.padding(填充View内容的位置，而不是形狀)

<padding
	// 左邊填充的值
    android:left="integer"
    // 頂部填充的值
    android:top="integer"
    // 右邊填充的值
    android:right="integer"
    // 底部填充的值
    android:bottom="integer" />
           

5.size(形狀的大小)

<size
	// 形狀的寬度
    android:width="integer"
    // 形狀的高度
    android:height="integer" />
           

6.solid(形狀的填充顔色)

<solid
	// 形狀的顔色
    android:color="color" />
           

7.stroke(形狀的筆劃線)

<stroke
	// 線的粗細
    android:width="integer"
    // 線的顔色
    android:color="color"
    // 線破折号之間的距離，僅在android:dashGap設定時有效
    android:dashWidth="integer"
    // 每個虛線的大小，僅在android:dashWidth設定時有效
    android:dashGap="integer" />
           

常用的屬性我們也都了解了，接下來我們就實作一下常用的形狀。由于都是圖形，沒有啥代碼，是以就直接上布局：

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:overScrollMode="never"
    tools:context=".ShapeActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        android:paddingLeft="10dp"
        android:paddingRight="10dp">
        <!-- 點 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:gravity="center_vertical"
            android:orientation="horizontal">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="常用："
                android:textSize="20dp" />

            <FrameLayout
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_marginLeft="10dp"
                android:background="@drawable/shape_round9">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="純色"
                    android:textColor="@color/color_FFFFFF"
                    android:textSize="12dp" />
            </FrameLayout>
            <FrameLayout
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_marginLeft="10dp"
                android:background="@drawable/shape_round27">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="實線邊框"
                    android:textColor="@color/color_FFFFFF"
                    android:textSize="12dp" />
            </FrameLayout>
            <FrameLayout
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_marginLeft="10dp"
                android:background="@drawable/shape_round33">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="虛線邊框"
                    android:textColor="@color/color_FFFFFF"
                    android:textSize="12dp" />
            </FrameLayout>
            <FrameLayout
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_marginLeft="10dp"
                android:background="@drawable/shape_round8"
                android:padding="10dp">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="漸變"
                    android:textColor="@color/color_FFFFFF"
                    android:textSize="12dp" />
            </FrameLayout>
        </LinearLayout>
    </LinearLayout>
</ScrollView>
           

布局代碼挺多的，也挺簡單的，我們也不全顯示了，隻看部分就行。

圓形

純色

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

實線邊框

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/colorAccent" />
    <stroke
        android:width="2dp"
        android:color="@color/color_259B24" />
</shape>
           

虛線邊框

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/colorAccent" />
    <stroke
        android:width="2dp"
        android:color="@color/color_259B24"
        android:dashWidth="8dp"
        android:dashGap="2dp"/>
</shape>
           

漸變

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <gradient
        android:startColor="@color/colorAccent"
        android:endColor="@color/colorPrimary"/>
</shape>
           

對半

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <gradient
        android:startColor="@color/colorAccent"
        android:endColor="@color/colorPrimary"
        android:type="sweep"
        android:centerX="0"/>
</shape>
           

掃描線

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <gradient
        android:startColor="@color/colorAccent"
        android:endColor="@color/colorPrimary"
        android:type="sweep"/>
</shape>
           

徑向漸變

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <gradient
        android:startColor="@color/colorAccent"
        android:endColor="@color/colorPrimary"
        android:gradientRadius="30dp"
        android:type="radial"/>
</shape>
           

3色漸變

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <gradient
        android:startColor="@color/colorAccent"
        android:centerColor="@color/color_259B24"
        android:endColor="@color/colorPrimary"/>
</shape>
           

線相關

單線-實線

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <stroke
        android:width="2dp"
        android:color="@color/colorAccent" />
</shape>
           

單線-虛線

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line"
    android:useLevel="true">
    <stroke
        android:width="2dp"
        android:color="@color/colorAccent"
        android:dashWidth="8dp"
        android:dashGap="2dp" />
</shape>
           

單獨畫虛線的時候需要注意的是需要在對應的View上面加上屬性：android:layerType=“software”，要不然顯示的還是實線。

環線-虛線

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">
    <stroke
        android:width="2dp"
        android:color="@color/colorAccent"
        android:dashWidth="8dp"
        android:dashGap="2dp" />
</shape>
           

環線-實線

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">
    <stroke
        android:width="2dp"
        android:color="@color/colorAccent" />
</shape>
           

矩形-虛線

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">
    <solid android:color="@color/colorPrimary" />
    <stroke
        android:width="2dp"
        android:color="@color/colorAccent"
        android:dashWidth="8dp"
        android:dashGap="4dp" />
</shape>
           

矩形-實線

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">
    <solid android:color="@color/colorPrimary" />
    <stroke
        android:width="2dp"
        android:color="@color/colorAccent" />
</shape>
           

圓角

純色

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorAccent" />
    <corners android:radius="20dp" />
</shape>
           

實線邊框

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorAccent" />
    <corners android:radius="20dp" />
    <stroke
        android:width="2dp"
        android:color="@color/colorPrimary" />
</shape>
           

虛線邊框

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorAccent" />
    <corners android:radius="20dp" />
    <stroke
        android:width="2dp"
        android:color="@color/colorPrimary"
        android:dashGap="2dp"
        android:dashWidth="8dp"/>
</shape>
           

左右對半純色

xml代碼

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:orientation="horizontal">
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:background="@drawable/shape_round10"
        android:gravity="center"
        android:padding="10dp"
        android:text="純色"
        android:textColor="@color/color_FFFFFF"
        android:textSize="18dp" />
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:background="@drawable/shape_round11"
        android:gravity="center"
        android:padding="10dp"
        android:text="純色"
        android:textColor="@color/color_FFFFFF"
        android:textSize="18dp" />
</LinearLayout>
           

分别對應的shape

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorAccent" />
    <corners android:topLeftRadius="20dp"
		     android:bottomLeftRadius="20dp"/>
</shape>
           

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorPrimary" />
    <corners android:topRightRadius="20dp"
             android:bottomRightRadius="20dp"/>
</shape>
           

漸變-角度0度

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="@color/colorAccent"
        android:endColor="@color/colorPrimary"/>
    <corners android:radius="20dp" />
</shape>
           

漸變-角度90度

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="@color/colorAccent"
        android:endColor="@color/colorPrimary"
        android:angle="90"/>
    <corners android:radius="20dp" />
</shape>
           

3色漸變

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="@color/colorAccent"
        android:endColor="@color/colorPrimary"
        android:centerColor="@color/color_259B24"/>
    <corners android:radius="20dp" />
</shape>
           

漸變-X軸不同比例

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="@color/colorAccent"
        android:endColor="@color/colorPrimary"
        android:centerColor="@color/colorPrimary"
        android:centerX="0.1"/>
    <corners android:radius="20dp" />
</shape>
           

漸變-Y軸不同比例

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="@color/colorAccent"
        android:endColor="@color/colorPrimary"
        android:centerColor="@color/colorPrimary"
        android:angle="90"
        android:centerY="0.3"/>
    <corners android:radius="20dp" />
</shape>
           

漸變-徑向

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="@color/colorAccent"
        android:endColor="@color/colorPrimary"
        android:gradientRadius="20dp"
        android:type="radial"/>
    <corners android:radius="20dp" />
</shape>
           

漸變-掃描線

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="@color/colorAccent"
        android:endColor="@color/colorPrimary"
        android:type="sweep"/>
    <corners android:radius="20dp" />
</shape>
           

漸變-對半

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="@color/colorAccent"
        android:endColor="@color/colorPrimary"
        android:centerX="0"
        android:type="sweep"/>
    <corners android:radius="20dp" />
</shape>
           

圓環

純色

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="20dp"
    android:thickness="5dp"
    android:useLevel="false">
    <solid android:color="@color/colorPrimary" />
</shape>
           

漸變

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="20dp"
    android:thickness="5dp"
    android:useLevel="false">
    <gradient
        android:startColor="@color/colorPrimary"
        android:endColor="@color/colorAccent" />
</shape>
           

實線邊框

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="20dp"
    android:thickness="5dp"
    android:useLevel="false">
    <gradient
        android:startColor="@color/colorPrimary"
        android:endColor="@color/colorAccent"
        android:angle="90"/>
    <stroke
        android:width="2dp"
        android:color="@color/color_259B24" />
</shape>
           

隻有邊框

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="20dp"
    android:thickness="5dp"
    android:useLevel="false">
    <stroke
        android:width="2dp"
        android:color="@color/color_9C27B0" />
</shape>
           

徑向漸變

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="10dp"
    android:thickness="15dp"
    android:useLevel="false">
    <gradient
        android:startColor="@color/colorPrimary"
        android:endColor="@color/colorAccent"
        android:type="radial"
        android:centerX="0.5"
        android:centerY="0.5"
        android:gradientRadius="20dp"/>
</shape>
           

虛線邊框

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="20dp"
    android:thickness="5dp"
    android:useLevel="false">
    <gradient
        android:startColor="@color/colorPrimary"
        android:endColor="@color/colorAccent"/>
    <stroke
        android:width="2dp"
        android:color="@color/color_259B24"
        android:dashGap="2dp"
        android:dashWidth="8dp"/>
</shape>
           

掃描線漸變

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="20dp"
    android:thickness="5dp"
    android:useLevel="false">
    <gradient
        android:startColor="@color/colorPrimary"
        android:endColor="@color/colorAccent"
        android:type="sweep"/>
</shape>
           

3色漸變

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="20dp"
    android:thickness="5dp"
    android:useLevel="false">
    <gradient
        android:startColor="@color/colorPrimary"
        android:centerColor="@color/color_259B24"
        android:endColor="@color/colorAccent" />
</shape>
           

對半

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="20dp"
    android:thickness="5dp"
    android:useLevel="false">
    <gradient
        android:startColor="@color/colorPrimary"
        android:endColor="@color/colorAccent"
        android:centerX="0"
        android:type="sweep"/>
</shape>