Drawable子類之—— ShapeDrawable (圖形定義)

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

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é)點

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

.
.

根元素:shape

  • android:shape
    表示圖形的形狀,有四種選項

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

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

針對ring有5個特殊的屬性

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

.
.

<corners> 角度 ( 只適用于 shape )

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

| corners的5個屬性 | 作用 |
| android:radius | 為四個角同時設(shè)定相同的角度,優(yōu)先級低,會被下面幾個覆蓋(因為人家是專門指定的)|
|android:topLeftRadius | 左上角的角度 |
| android:topRightRadius | 右上角的角度 |
| android:bottomLeftRadius | 左下角的角度 |
| android:bottomRightRadius | 右下角的角度 |

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

.
.

<solid> 純色填充

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

<gradient> 漸變效果 (與solid互斥,純色或者漸變只能要一個)

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

.
.

<stroke> 描邊

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

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

.
.

<padding>

這個沒什么好講的,就是padding,分上下左右
.
.

<size> shape大小 (只是大小并不是指定了固定了大小)

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

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

三、Demo

首先先來四個最簡單的圖像,矩形、橢圓、線,圓形。

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

?就是這四個.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é)合幾個節(jié)點做一些demo

圓形的點擊變換顏色

<?xml version="1.0" encoding="utf-8"?>
<!--別看這里我們使用的是ovrl(橢圓) ,但是我們得到可是 圓形 的點擊效果-->
<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>

圓形的點擊顏色變化.gif

.
.
Edittext的背景框和焦點變化

<?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的焦點變化.gif

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

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,818評論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,185評論 3 414
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,656評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,647評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 71,446評論 6 405
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 54,951評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,041評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,189評論 0 287
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,718評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,602評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,800評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,316評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,045評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,419評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,671評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,420評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 47,755評論 2 371

推薦閱讀更多精彩內(nèi)容