本文出自 “阿敏其人” 簡書博客,轉(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代碼,后上展示圖。
線 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>
以上就是基本圖形最基本的使用。
下面結(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>
.
.
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>
如果我想畫一個矩形,只有底邊怎么辦?
就好像在TextView里面,我們需要底線,“我們是有底線的TextView”,但是呢,我又不想弄復(fù)制的布局,弄一個背景豈不是方便多了?
嗯,你可以這么做,但是單純的shape是實現(xiàn)不了的,需要用到LayerDrawable。原理就是shape組合排列。
有興趣可以跳轉(zhuǎn)一下——Drawable子類之——LayerDrawable (圖層疊加)
了解更多的Drawable分類 Drawable圖像資源抽象類
本篇完。