Android XML shape 標(biāo)簽使用詳解（apk瘦身，減少內(nèi)存好幫手）

一個(gè)android開發(fā)者肯定懂得使用 xml 定義一個(gè) Drawable，比如定義一個(gè) rect 或者 circle 作為一個(gè) View 的背景。但是，也肯定也有人在能使用 Drawable 的地方選擇使用一張 png 圖（或者是一張 .9 圖）作為 View 的背景，因?yàn)楹笳甙褑?wèn)題交給 UI 設(shè)計(jì)人員去了，省事。當(dāng)然，使用圖片這種在項(xiàng)目中也很常見(jiàn)，如果不考慮 apk 大小，內(nèi)存占用問(wèn)題的話，是沒(méi)有任何問(wèn)題的。如果要給 apk 瘦身，減少內(nèi)存占用，那么本文 Drawable 的價(jià)值就提現(xiàn)出來(lái)了。首先提出幾個(gè)問(wèn)題？

備注：本文所說(shuō)的 Drawable 都特指 shape 標(biāo)簽定義的 Drawable

  • shape 標(biāo)簽定義的 Drawable 是哪種類型的 Drawable?
  • 使用 Drawable 有什么好處？
  • 什么情況下選擇使用 Drawable，而不是使用一張圖，反之呢？
  • shape 標(biāo)簽?zāi)芏x多少種類型的 Drawable？（這是本文的重點(diǎn)，方便我這種懶惰的程序員直接拷貝代碼修改）

本文需要先了解shape標(biāo)簽的基本用法，關(guān)于Android shape標(biāo)簽的各個(gè)屬性詳解請(qǐng)移步：

Android GradientDrawable(shape標(biāo)簽定義) 靜態(tài)使用和動(dòng)態(tài)使用(圓角，漸變實(shí)現(xiàn))

首先給出GitHub地址，后續(xù)有新的內(nèi)容會(huì)持續(xù)加入
Github地址：https://github.com/PopFisher/AndroidDrawClassic

下面依次回答上面幾個(gè)問(wèn)題

shape標(biāo)簽定義的Drawable是哪種類型的Drawable?

shape 標(biāo)簽定義的 Drawable 類型對(duì)應(yīng) GradientDrawable

這里可能會(huì)認(rèn)為是 ShapeDrawale ，我一開始也是這樣認(rèn)為的，因?yàn)槲铱吹焦俜轿臋n上說(shuō) ShapeDrawable 也是使用 shape 標(biāo)簽定義的，可是去看 GradientDrawable 的時(shí)候也是同樣的解釋，簡(jiǎn)直懵逼了，后面經(jīng)過(guò)代碼實(shí)際檢驗(yàn)，shape 標(biāo)簽定義的 Drawable 能直接強(qiáng)制轉(zhuǎn)換為 GradientDrawable，而不能轉(zhuǎn)換為 ShapeDrawable，這個(gè)時(shí)候只能認(rèn)為是 ShapeDrawable 的文檔解釋有點(diǎn)問(wèn)題了，可能文檔錯(cuò)了吧。

ShapeDrawable 與 GradientDrawale 確實(shí)有很多相似之處，具體情況后續(xù)單獨(dú)寫文章來(lái)說(shuō)明，本文不涉及 ShapeDrawable 的其他內(nèi)容。

使用Drawable有什么好處？

  • 很方便得到一個(gè)矩形，圓，橢圓，圓環(huán)，很容易維護(hù)和修改
  • 很方便實(shí)現(xiàn)圓角，漸變（線性漸變，徑向漸變，掃描漸變）
  • 代替圖片作為 View 的背景，減少 apk 的體積（減少 apk 體積最明顯最有效的步驟就是去掉圖片）
  • 大圖片耗內(nèi)存，使用 Drawable 節(jié)省內(nèi)存，Android 本身對(duì) Drawable 做了很好的優(yōu)化（內(nèi)存優(yōu)化需要考慮）

什么情況下選擇使用Drawable，而不是使用一張圖，反之呢？

  • 理論上能用 Drawable 的地方就用 Drawable
  • 如果能夠通過(guò) shape 標(biāo)簽就能定義的幾何圖形就能滿足需求，就不用圖片來(lái)表示
  • 漸變類型的背景也盡量使用 shape 來(lái)實(shí)現(xiàn)
  • 不規(guī)則的，復(fù)雜的圖形還是只能使用圖片，比如要一個(gè)表示手機(jī)的圖標(biāo)，一個(gè)人的頭像
  • 有些特殊拉升效果需要使用 .9.png 圖片（盡可能的小吧，越小越省內(nèi)存）

shape標(biāo)簽?zāi)芏x多少種類型的Drawable？

shape 可以定義四種類型的幾何圖形，由 android:shape 屬性指定

line --> 線

rectangle --> 矩形（圓角矩形）

oval --> 橢圓，圓

ring --> 圓環(huán)

shape 可以定義邊框?qū)傩?/strong>

有邊框，無(wú)邊框，虛線邊框，實(shí)線邊框

shape 可以實(shí)現(xiàn)矩形圓角效果

可以指定其中一個(gè)角或者多個(gè)角設(shè)置圓角效果

指定圓角半徑設(shè)置圓角的大小

shape 可以實(shí)現(xiàn)三種漸變，由子標(biāo)簽 gradient 實(shí)現(xiàn)

linear --> 線性漸變（水平，垂直，對(duì)角線三個(gè)漸變）

sweep --> 掃描漸變（只支持順時(shí)針?lè)较颍鋵?shí)顏色反過(guò)來(lái)就跟逆時(shí)針一樣的了）

radial --> 徑向漸變（由指定的中心點(diǎn)開始向外漸變，指定半徑）

xml 實(shí)現(xiàn)只支持三個(gè)顏色，startColor，CenterColor，endColor

更多更詳細(xì)關(guān)于 shape 的介紹請(qǐng)移步 Android GradientDrawable(shape標(biāo)簽定義) 靜態(tài)使用和動(dòng)態(tài)使用(圓角，漸變實(shí)現(xiàn))

由上面的組合可以定義很多 Drawable，下面依次進(jìn)行介紹：

線（實(shí)線+虛線）

image

實(shí)線：line_solid.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 實(shí)線 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line"
    android:useLevel="true">

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

</shape>

虛線：line_dashed.xml

<?xml version="1.0" encoding="utf-8"?>
<!--虛線
    設(shè)置類型會(huì)line
    需要關(guān)閉硬件加速虛線才能繪制出來(lái)，布局文件中使用的時(shí)候需要設(shè)置android:layerType="software"
    android:width 線寬，布局文件中的View的高度需要比這個(gè)值大才可以繪制出來(lái)
    android:dashWidth 每段破折線的長(zhǎng)度
    android:dashGap="5dp"每段破折線之間的間隔-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line"
    android:useLevel="true">

    <stroke
        android:width="2dp"
        android:dashGap="5dp"
        android:dashWidth="10dp"
        android:color="#ffff0000" />

</shape>

矩形（邊框+填充）

image

矩形實(shí)線邊框內(nèi)部無(wú)填充：rect_solid_border.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 實(shí)線邊框 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

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

</shape>

矩形虛線邊框內(nèi)部無(wú)填充：rect_dashed_border.xml

<?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="#ffff0000"
        android:dashGap="5dp"
        android:dashWidth="10dp" />

</shape>

矩形實(shí)線邊框-內(nèi)部填充：rect_solid_border_and_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 實(shí)線邊框+內(nèi)部填充 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

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

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

</shape>

矩形虛線邊框-內(nèi)部填充：rect_dashed_border_and_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 虛線邊框+內(nèi)部填充 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

    <stroke
        android:width="2dp"
        android:color="#ffff0000"
        android:dashGap="5dp"
        android:dashWidth="10dp" />

    <solid android:color="#ff00ffff" />
</shape>

圓角矩形

image

圓角矩形-只有邊框：rect_rounded_border.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形邊框圓角 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

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

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

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

</shape>

圓角矩形-只有內(nèi)部填充：rect_rounded_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 圓角矩形 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

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

    <solid android:color="#8000ff00" />

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

</shape>

圓角矩形-有邊框有填充:rect_rounded_border_and_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形邊框+填充 圓角 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

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

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

    <solid android:color="#8000ff00" />

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

</shape>

圓角矩形-左邊圓角為一個(gè)半圓弧：rect_rounded_left_arc.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形圓角+左右兩邊為一個(gè)圓弧 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

    <size
        android:width="50dp"
        android:height="10dp" />

    <solid android:color="#8000ff00" />

    <!-- 圓角半徑是高度的一般就是一個(gè)圓弧了 -->
    <corners
        android:bottomLeftRadius="20dp"
        android:topLeftRadius="20dp" />

</shape>

圓角矩形-左右兩邊都是半圓弧:rect_rounded_left_right_arc.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形圓角+左右兩邊為一個(gè)圓弧 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

    <size
        android:width="50dp"
        android:height="10dp" />

    <solid android:color="#8000ff00" />

    <!-- 圓角半徑是高度的一般就是一個(gè)圓弧了 -->
    <corners android:radius="20dp" />

</shape>

圓角矩形-左右兩邊都是半圓弧-帶邊框：rect_rounded_left_right_arc_border.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形圓角+左右兩邊為一個(gè)圓弧 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

    <size
        android:width="50dp"
        android:height="10dp" />

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

    <solid android:color="#8000ff00" />

    <!-- 圓角半徑是高度的一般就是一個(gè)圓弧了 -->
    <corners android:radius="20dp" />

</shape>

圓角矩形-圓：rect_rounded_arc.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形圓角+圓出一個(gè)圓弧 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

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

    <solid android:color="#8000ff00" />

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

</shape>

圓角矩形-上下兩邊半圓弧:rect_rounded_top_bottom_arc.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形圓角+左右兩邊為一個(gè)圓弧 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

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

    <solid android:color="#8000ff00" />

    <!-- 圓角半徑是高度的一般就是一個(gè)圓弧了 -->
    <corners android:radius="10dp" />

</shape>

漸變效果（以矩形為例）

image

垂直線性漸變：rect_gradient_linear_vertical.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形內(nèi)部填充-線性垂直漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

    <size
        android:width="@dimen/shape_size"
        android:height="@dimen/shape_size" />

    <stroke
        android:width="1px"
        android:color="#ffff00ff" />

    <!-- 調(diào)整angle實(shí)現(xiàn)水平漸變，垂直漸變或者對(duì)角漸變 -->
    <gradient
        android:angle="-45"
        android:centerX="0.5"
        android:centerY="0.4"
        android:centerColor="#8000ff00"
        android:endColor="#1000ff00"
        android:startColor="#ff00ff00"
        android:type="linear" />
</shape>

水平線性漸變:rect_gradient_linear_horizon.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形內(nèi)部填充-線性水平漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

    <size
        android:width="@dimen/shape_size"
        android:height="@dimen/shape_size" />

    <stroke
        android:width="1px"
        android:color="#ffff00ff" />

    <!-- 調(diào)整angle實(shí)現(xiàn)水平漸變，垂直漸變或者對(duì)角漸變 -->
    <gradient
        android:angle="0"
        android:centerX="0.5"
        android:centerY="0.5"
        android:centerColor="#8000ff00"
        android:endColor="#ff00ff00"
        android:startColor="#1000ff00"
        android:type="linear" />
</shape>

對(duì)角線線性漸變：rect_gradient_linear_diagonal.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形內(nèi)部填充-線性對(duì)角線漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

    <size
        android:width="@dimen/shape_size"
        android:height="@dimen/shape_size" />

    <stroke
        android:width="1px"
        android:color="#ffff00ff" />

    <!-- 調(diào)整angle實(shí)現(xiàn)水平漸變，垂直漸變或者對(duì)角漸變 -->
    <gradient
        android:angle="45"
        android:centerX="0.5"
        android:centerY="0.5"
        android:centerColor="#8000ff00"
        android:endColor="#1000ff00"
        android:startColor="#ff00ff00"
        android:type="linear" />
</shape>

徑向漸變：rect_gradient_radial.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形內(nèi)部填充-徑向漸變,一般不用在rect上，用到圓或者橢圓上 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

    <size
        android:width="@dimen/shape_size"
        android:height="@dimen/shape_size" />

    <stroke
        android:width="1px"
        android:color="#ffff00ff" />

    <!-- 徑向漸變angle無(wú)效 -->
    <gradient
        android:angle="0"
        android:centerX="0.5"
        android:centerY="0.5"
        android:startColor="#0000ff00"
        android:endColor="#ff00ff00"
        android:gradientRadius="40dp"
        android:type="radial" />
</shape>

掃描漸變：rect_gradient_sweep.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形內(nèi)部填充-掃描漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">
    <!--如果布局中沒(méi)有設(shè)置View的大小，會(huì)size設(shè)置的大小為默認(rèn)值-->
    <size
        android:width="20dp"
        android:height="20dp" />

    <stroke
        android:width="1px"
        android:color="#ffff00ff" />

    <!--調(diào)整angle不能實(shí)現(xiàn)角度變化
        centerX,centerY是中心點(diǎn)的位置，這里用的是百分比值（0-1）
        在rect中g(shù)radientRadius無(wú)效-->
    <gradient
        android:angle="0"
        android:centerX="0.5"
        android:centerY="0.5"
        android:startColor="#ff00ff00"
        android:gradientRadius="20dp"
        android:type="sweep" />
</shape>

圓（邊框+填充+漸變）

image

圓-邊框：circle_border.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 圓形邊框 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true">

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

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

</shape>

圓-填充：circle_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 圓形邊框 + 填充 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true">

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

    <solid android:color="#800000ff" />

</shape>

圓-邊框填充：circle_border_and_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 圓形邊框 + 填充 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true">

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

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

    <solid android:color="#800000ff" />

</shape>

線性漸變：circle_gradient_linear.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 圓形內(nèi)部填充-線性漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true">

    <size
        android:width="@dimen/shape_size"
        android:height="@dimen/shape_size" />

    <!-- angle調(diào)整漸變角度，只能是45的倍數(shù)，centerX, centerY是百分百（0-1） -->
    <gradient
        android:angle="-90"
        android:centerX="0.5"
        android:centerY="0.8"
        android:centerColor="#80ff0000"
        android:endColor="#ffff0000"
        android:startColor="#00ff0000"
        android:type="linear" />

</shape>

徑向漸變：circle_gradient_radial.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 圓形內(nèi)部填充-徑向漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true">

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

    <!-- centerX, centerY是百分百（0-1） -->
    <gradient
        android:centerX="0.5"
        android:centerY="0.5"
        android:startColor="#ffff0000"
        android:centerColor="#80ff0000"
        android:endColor="#10ff0000"
        android:gradientRadius="30dp"
        android:type="radial" />

</shape>

掃描漸變：circle_gradient_sweep.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 圓形內(nèi)部填充-掃描漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true">

    <size
        android:width="@dimen/shape_size"
        android:height="@dimen/shape_size" />

    <!-- sweep類型angle,gradientRadius無(wú)效，centerX, centerY是百分百（0-1） -->
    <gradient
        android:centerX="0.5"
        android:centerY="0.6"
        android:startColor="#ffff0000"
        android:centerColor="#80ff0000"
        android:endColor="#20ff0000"
        android:gradientRadius="20dp"
        android:type="sweep" />

</shape>

橢圓（邊框+填充+漸變）

image

邊框：oval_border.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 橢圓邊框 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true">

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

</shape>

填充：oval_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 橢圓填充-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true">

    <solid android:color="#800000ff" />

</shape>

邊框+填充：oval_border_and_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 橢圓邊框 + 填充-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true">

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

    <solid android:color="#800000ff" />

</shape>

線性漸變：oval_gradient_linear.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 橢圓內(nèi)部填充-線性漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true" >

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

    <gradient
        android:angle="45"
        android:centerX="0.5"
        android:centerY="0.7"
        android:centerColor="#80ff0000"
        android:endColor="#ffff0000"
        android:startColor="#00ff0000"
        android:type="linear" />

</shape>

徑向漸變：oval_gradient_radial.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 橢圓內(nèi)部填充-徑向漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true" >

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

    <gradient
        android:centerX="0.5"
        android:centerY="0.5"
        android:centerColor="#80ff0000"
        android:endColor="#00ff0000"
        android:startColor="#ffff0000"
        android:gradientRadius="40dp"
        android:type="radial" />

</shape>

掃描漸變：oval_gradient_sweep.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 橢圓內(nèi)部填充-掃描漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true" >

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

    <gradient
        android:centerX="0.5"
        android:centerY="0.5"
        android:centerColor="#80ff0000"
        android:endColor="#ffff0000"
        android:startColor="#00ff0000"
        android:type="sweep" />

</shape>

圓環(huán)（邊框+填充+漸變）

image

環(huán)內(nèi)填充：ring_fill.xml

<?xml version="1.0" encoding="utf-8"?><!-- 圓環(huán) -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadiusRatio="4"
    android:shape="ring"
    android:thicknessRatio="4"
    android:useLevel="false">
    <!--android:useLevel="false"必須是false-->
    <size
        android:width="80dp"
        android:height="80dp" />

    <solid android:color="#80ff0000" />

</shape>

圓環(huán)邊框:ring_border.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 圓環(huán)-僅有邊框 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="20dp"
    android:shape="ring"
    android:thickness="16dp"
    android:useLevel="false">
    <!--android:useLevel="false"必須是false-->

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

    <stroke
        android:width="2dp"
        android:color="#ffff00ff" />
</shape>

邊框+填充：ring_border_and_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 圓環(huán) -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="20dp"
    android:shape="ring"
    android:thickness="16dp"
    android:useLevel="false">
    <!--android:useLevel="false"必須是false-->

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

    <solid android:color="#80ff0000" />

    <stroke
        android:width="2dp"
        android:color="#ffff00ff" />
</shape>

線性漸變：ring_gradient_linear.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 圓環(huán)-線性漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="10dp"
    android:thickness="30dp"
    android:useLevel="false">
    <!--android:useLevel="false"必須是false-->

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

    <gradient
        android:angle="45"
        android:centerColor="#80ff0000"
        android:endColor="#ffff0000"
        android:startColor="#00ff0000"
        android:type="linear" />

</shape>

徑向漸變：ring_gradient_radial.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 圓環(huán)-徑向漸變漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="10dp"
    android:thickness="30dp"
    android:useLevel="false">
    <!--android:useLevel="false"必須是false-->

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

    <!--設(shè)置徑向漸變半徑，漸變從圓心開始-->
    <gradient
        android:centerX="0.5"
        android:centerY="0.5"
        android:centerColor="#80ff0000"
        android:endColor="#00ff0000"
        android:startColor="#ffff0000"
        android:gradientRadius="40dp"
        android:type="radial" />

</shape>

掃描漸變:ring_gradient_sweep.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 圓環(huán)-線性漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="10dp"
    android:thickness="30dp"
    android:useLevel="false">
    <!--android:useLevel="false"必須是false-->

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

    <!--掃描漸變shape不能設(shè)置角度-->
    <gradient
        android:centerColor="#80ff0000"
        android:endColor="#ffff0000"
        android:startColor="#00ff0000"
        android:type="sweep" />

</shape>

總結(jié)

熟練掌握好 shape 標(biāo)簽的使用，能夠構(gòu)建出多種多樣的 Drawable，這些 Drawable 可以直接作為背景設(shè)置給 View，代碼通過(guò) R.drawable 方式使用，xml 文件通過(guò) @drawable/name 使用。跟圖片的使用一模一樣，關(guān)鍵是使用系統(tǒng) Drawable 可以減少 apk 的體積，減少內(nèi)存占用等好處，所以，不要覺(jué)得簡(jiǎn)單就不系統(tǒng)學(xué)習(xí)，越簡(jiǎn)單的東西越要熟練掌握。后面還會(huì)陸續(xù)出一些 Drawable 的文章，比如除了shape標(biāo)簽定義的 Drawable，其他還有哪些 xml 標(biāo)簽?zāi)芏x Drawable？ Drawable怎么通過(guò)代碼的方式創(chuàng)建并使用？

轉(zhuǎn)載：Android XML shape 標(biāo)簽使用詳解（apk瘦身，減少內(nèi)存好幫手）

?著作權(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)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

  • 摘抄自以下博客 https://www.cnblogs.com/popfisher/p/6238119.html ...
    Maybe_G閱讀 1,141評(píng)論 0贊 0
  • 前言 我認(rèn)為小伙伴可以直接去谷歌官方文檔查看，強(qiáng)調(diào)一下： 官方文檔是中文！官方文檔是中文??！官方文檔是中文！??！ ...
    yzzCool閱讀 796評(píng)論 0贊 3
  • 因?yàn)樵趇OS中視圖的切角是很容易的，包括邊框的顏色，圓角的弧度等等很容易設(shè)置，但是在HS2.0中Android開發(fā)...
    小白猿閱讀 1,487評(píng)論 1贊 2
  • 前言 本節(jié)內(nèi)容主要講解drawable文件夾下Shape的使用。 Shape主要是為了給控件背景設(shè)定一個(gè)形狀，使U...
    丿HUFF閱讀 1,986評(píng)論 2贊 2
  • 任何一個(gè)成功人物的背后總是透露著辛酸與不易，只要有堅(jiān)強(qiáng)的持久心，一個(gè)庸俗平凡的人也會(huì)有成功的一天，否則即使是一個(gè)才...
    as_pixar閱讀 634評(píng)論 0贊 2

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