Drawable子類之—— ShapeDrawable （圖形定義）

本文出自 “阿敏其人” 簡書博客，轉(zhuǎn)載或引用請(qǐng)注明出處。

ShapeDrawable 一種創(chuàng)建的Drawable，可以理解為通過顏色來狗仔的圖形，它既可以是純色的圖形，也可以是具有漸變效果的圖形。

ShapeDrawable的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"] >
    <corners
        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer" />
    <gradient
        android:angle="integer"
        android:centerX="integer"
        android:centerY="integer"
        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>

.
.

二、子節(jié)點(diǎn)

分別這么幾個(gè)：corners（角度）、gradient（漸變）、padding（距離）、size（大小）、solid（純色填充）、stroke（描邊）。

.
.

根元素：shape

  • android:shape
    表示圖形的形狀，有四種選項(xiàng)

rectabgle 矩形
??oval 橢圓
??line 橫線
??ring 圓環(huán)

針對(duì)line和ring
四個(gè)當(dāng)中， line 和 ring 一定需要通過 <stroke> 標(biāo)簽來指定 線的寬和和顏色信息 等。

針對(duì)ring有5個(gè)特殊的屬性

值 作用
android:innerRadius 圓內(nèi)的內(nèi)半徑，當(dāng)和innerRadiusRatio同時(shí)存在時(shí)，以innerRadius為準(zhǔn)
android:thickness 厚度， 圓環(huán)的厚度 = 外半徑 - 內(nèi)半徑 ，當(dāng)和thicknessRatio一起存在時(shí)，以thickness為準(zhǔn)
innerRadiusRatio 內(nèi)半徑在占整個(gè)Drawable寬度的比例，默認(rèn)值是9。如果為n，那么 內(nèi)半徑 = 寬度 / n
android:thicknessRatio 厚度占整個(gè)Drawable的寬度的比例，默認(rèn)值是3。如果為n，那么 厚度 = 寬度 / n 。
android:useLevel 一般都應(yīng)該使用false，否則可能無法達(dá)到預(yù)期的效果，除非他被用來作為 LevelListDrawable 來使用

.
.

<corners> 角度 （ 只適用于 shape ）

表示shape圖形四個(gè)交的角度，即四個(gè)角的圓角程度。單位是px，他有5個(gè)屬性

| corners的5個(gè)屬性 | 作用 |
| android:radius | 為四個(gè)角同時(shí)設(shè)定相同的角度，優(yōu)先級(jí)低，會(huì)被下面幾個(gè)覆蓋（因?yàn)槿思沂菍ｉT指定的）|
|android:topLeftRadius | 左上角的角度 |
| android:topRightRadius | 右上角的角度 |
| android:bottomLeftRadius | 左下角的角度 |
| android:bottomRightRadius | 右下角的角度 |

注意：每個(gè)圓角半徑值都必須大于1，否側(cè)就沒有圓角。

.
.

<solid> 純色填充

表示純色填充，利用 android:color 就可以指定shape的顏色。

<gradient> 漸變效果 （與solid互斥，純色或者漸變只能要一個(gè)）

  • android:angle —— 漸變的角度，默認(rèn)是0，其值必須是45的整數(shù)倍。
    0表示從左邊到右
    90表示從上到下。具體效果隨著角度的調(diào)整而產(chǎn)生變化，角度影響漸變方向。
  • android:centerX —— 漸變中心的橫坐標(biāo)點(diǎn)
  • android:centerY —— 漸變中心的縱坐標(biāo)點(diǎn)
  • android:startColor —— 漸變色的起始色
  • android:centerColor —— 漸變色的中間色
  • android:endColor —— 漸變色的結(jié)束色
  • android:type —— 漸變的類型，分3種，linear（線性漸變），radio（徑向漸變），sweep（掃描線漸變），默認(rèn)值是 線性漸變 。
  • android:gradientRadius —— 漸變的半徑（僅當(dāng) android:type 為radio時(shí)有效）
  • android:useLevel —— 一般為false，當(dāng)Drawable作為StateListDrawable時(shí)有效。

.
.

<stroke> 描邊

stroke的屬性 作用
android:width 描邊的寬度，越大則shape的邊緣線越粗
android:color 描邊的顏色
android:dashWidth 虛線的寬度
android:dashGap 虛線的空隙的間隔

注：如果 android:dashWidth 和 android:dashGap 兩者有任意一個(gè)為0，那么虛線效果就無法顯示。

.
.

<padding>

這個(gè)沒什么好講的，就是padding，分上下左右
.
.

<size> shape大小 （只是大小并不是指定了固定了大?。?/h2>

android:width 指定shape寬
android:height 指定shape高

嚴(yán)格來說shape沒有寬高，但是我們指定size就有了所謂的寬高。
當(dāng)時(shí)當(dāng)shape作為View 的背景的時(shí)候，shape還是會(huì)被拉伸的，所以這個(gè)寬高并不是指定多少就一定多少（對(duì)于Drawable都是沒有絕對(duì)的寬高的）

三、Demo

首先先來四個(gè)最簡單的圖像，矩形、橢圓、線，圓形。

先上xml代碼，后上展示圖。

?就是這四個(gè).png

線 simple_line.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line"
    >
    <!--line一定需要描邊stroke-->
    <stroke
        android:width="10dp"
        android:color="#0000ff"
         />

</shape>

.
.
橢圓 simple_oval.xml

<?xml version="1.0" encoding="utf-8"?>

<!--橢圓-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >
    <solid android:color="#00ff00"/>
    <corners android:radius="5px"/>

</shape>

.
.
矩形 simple_rectagle.xml

<?xml version="1.0" encoding="utf-8"?>

<!--橢圓-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >
    <solid android:color="#00ff00"/>
    <corners android:radius="5px"/>

</shape>

.
.
圓形 simple_ring.xml

<?xml version="1.0" encoding="utf-8"?>

<!--  安卓的圓一般來說 外半徑 = 內(nèi)半徑 + 厚度-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:useLevel="false"

    android:innerRadius="20dp"
    android:thickness="3dp"
    >

    <stroke
        android:color="#ff0000" />
    <solid android:color="#ff0000" />
</shape>
圖形展示.png

以上就是基本圖形最基本的使用。

下面結(jié)合幾個(gè)節(jié)點(diǎn)做一些demo

圓形的點(diǎn)擊變換顏色

<?xml version="1.0" encoding="utf-8"?>
<!--別看這里我們使用的是ovrl（橢圓） ，但是我們得到可是 圓形 的點(diǎn)擊效果-->
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape android:shape="oval">
            <solid
                android:color="#ff0000" />
            <stroke
                android:width="4dp"
                android:color="#294736" />
        </shape>
    </item>
    <item >
        <shape android:shape="oval">
            <solid
                android:color="#848374" />
            <stroke
                android:width="4dp"
                android:color="#745863" />
        </shape>
    </item>
</selector>
圓形的點(diǎn)擊顏色變化.gif

.
.
Edittext的背景框和焦點(diǎn)變化

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_window_focused="false">
        <shape android:shape="rectangle">
            <solid
                android:color="#FFFFFFFF"/>
            <corners
                android:radius="3dp"/>
            <padding
                android:left="10dp"
                android:right="10dp"/>
            <stroke
                android:width="1dp"
                android:color="#BDC7D8"/>
        </shape>
    </item>

    <item android:state_focused="true" >
        <shape android:shape="rectangle" >
            <solid
                android:color="#FFFFFFFF"/>
            <corners
                android:radius="3dp"/>
            <padding
                android:left="10dp"
                android:right="10dp"/>
            <stroke
                android:width="1dp"
                android:color="#728ea3"/>
        </shape>
    </item>
</selector>
Edittext的焦點(diǎn)變化.gif

如果我想畫一個(gè)矩形，只有底邊怎么辦？
就好像在TextView里面，我們需要底線，“我們是有底線的TextView”，但是呢，我又不想弄復(fù)制的布局，弄一個(gè)背景豈不是方便多了？
嗯，你可以這么做，但是單純的shape是實(shí)現(xiàn)不了的，需要用到LayerDrawable。原理就是shape組合排列。
有興趣可以跳轉(zhuǎn)一下——Drawable子類之——LayerDrawable （圖層疊加）

了解更多的Drawable分類 Drawable圖像資源抽象類
本篇完。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容