shape的xml用法

<RelativeLayout 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:background="@drawable/btn_selector"-->

<Button

android:id="@+id/Button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:background="@drawable/btn_selector"

android:text="@string/hello_world" />

</RelativeLayout>

drawabel下創建一個selector的xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">

<!-- Button正常狀態下的背景 -->

<item android:drawable="@drawable/btn_bg_normal"

android:state_pressed="false"/>

<!-- Button按下時的背景 -->

<item android:drawable="@drawable/btn_bg_pressed"

android:state_pressed="true"/>

</selector>

在drawable 目錄下新建兩個 shape文件分別是btn_bg_normal.xml,和btn_bg_pressed.xml文件

btn_bg_normal.xml

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

<!-- 按鈕正常的時候的背景 -->

<!-- shape的默認形狀是rectangle，還有oval(橢圓),line（線）,ring（圓環），我就用過rectangle,其他的大家可以試一試 -->

<shape xmlns:android="http://schemas.android.com/apk/res/android">

<!-- 矩形的圓角弧度 -->

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

<!-- 矩形的填充色 -->

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

<!-- 矩形的邊框的寬度,每段虛線的長度，和兩段虛線之間的顏色和顏色 -->

<stroke

android:width="1dp"

android:dashWidth="8dp"

android:dashGap="4dp"

android:color="#4eb621" />

</shape>

btn_bg_pressed.xml

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

<shape xmlns:android="http://schemas.android.com/apk/res/android">

<!-- 矩形的圓角弧度 -->

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

<!-- 矩形的填充色 -->

<solid android:color="#3F51B5" />

<!-- 矩形的邊框的寬度,每段虛線的長度，和兩段虛線之間的顏色和顏色 -->

<stroke

android:width="1dp"

android:color="#4eb621"

android:dashGap="4dp"

android:dashWidth="8dp" />

</shape>

注意 stroke 是指shape的邊界線；

gradient是漸變線的api

angle：角度，當 android:type=「linear」時有效 ，億45度為單位，逆時針方向旋轉

centerX：Float。漸變色中心的 X 相對位置（ 0-1.0 ）。當 android:type=「linear」時無效

centerY：Float。漸變色中心的 Y 相對位置（ 0-1.0 ）。當 android:type=「linear」時無效

centerColor：color。可選的顏色，出現在 start 和 end 顏色之間。

gradientRadius：Float。漸變色的半徑。當 android:type=「radial」 時有效。

startcolor：開始的顏色

endcolor：結束的顏色

type：漸變色的樣式。有效值為：

「linear」：線性漸變，默認值

「radial」：環形漸變。 start 顏色是處於中間的顏色

「sweep」：扇形漸變

useLevel：Boolean。「 true 」表示可以當作 LevelListDrawable 使用（沒搞懂是什麼意思）

如果我們想給一個TextView 添加這樣一個背景，一層背景是白色的，另外一層是藍色的但是只露出來一部分，就可以使用layer-list實現。

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<!--最近的項目中需要用到多個圖層堆疊到一塊兒，就研

究了一下android中的layer-list。android中的layer-list

就是用來多個圖層堆疊顯示的。 -->

<item>

<shape > <!-- 第一層的顏色為藍色 -->

<solid android:color="@color/blue"/>

</shape>

</item>

<!-- 第二層的顏色，也就是最上面的一層，因為第二層相對於

View的底部上移兩個dp所以第一層會露出一個dp的黑色所以

給人一種只有底部邊框的假象 -->

<item android:bottom="2dip">

<shape>

<solid android:color="@color/white"/>

</shape>

</item>

</layer-list>

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<!--上面的為背景的底層-->

<item>

<shape android:shape="rectangle">

<solid android:color="@color/colorPrimary" />

</shape>

</item>

<!--背景上面的圖層 讓底部的背景露出來4dp的高度-->

<item android:bottom="4dp">

<shape android:shape="rectangle">

<solid android:color="@color/colorAccent" />

</shape>

</item>

</layer-list>

效果圖：

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item>

<bitmap android:src="@drawable/ic_launcher"

android:gravity="center"/>

</item>

<item android:left="10dip" android:top="10dip">

<bitmap android:src="@drawable/ic_launcher"

android:gravity="center"/>

</item>

<item android:left="20dip" android:top="20dip">

<bitmap android:src="@drawable/ic_launcher"

android:gravity="center"/>

</item>

<item android:left="30dip" android:top="30dip">

<bitmap android:src="@drawable/ic_launcher"

android:gravity="center"/>

</item>

</layer-list>

效果圖片

總結：

1、corners定義四個弧度：

radius 設置4個角的弧度、topLeftRadius設置左上角的弧度、topRightRadius設置右上角的弧度、bottomLeftRadius設置左下角的弧度、bottomRightRadius設置右下角的弧度

2、gradient漸變色填充

angle 漸變方向，逆時針

startColor 開始漸變色

centerColor 中間漸變色

endColor 最終漸變色

type 漸變的樣式【linear" 線性】【radial默認是從中心開始的環形漸變效果】

gradientRadius 漸變的半徑，只有type=radial有效

centerX 漸變開始的中心店x相對坐標（0-1.0），對type=linear有效

centerY漸變開始的中心店Y相對坐標（0-1.0），對type=linear有效

3、padding定義四個位置的內邊距

left|top|right|bottom

4、size 定義圖形的大小

5、solid 單色填充，裡面只有一個color屬性

6、stroke 為圖形繪製邊框

width 邊框線的厚度

color 邊框線的顏色

dashWidth 虛線的長度

dashGap 虛線之間的距離

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！