Shape詳解

Android中提供了shape形狀給我們使用,可以通過shape畫出虛線、圓角、漸變等多種效果,而且,shape是XML代碼,比圖片更小,在開發中,我們推薦使用shape,能用shape就用shape。

概述


用shape畫形狀,XML的根節點是shape,shape的取值有四個,簡單的說就是,我們需要在根節點設置android:shape=""屬性,這個屬性取值有4個:rectangle(長方形),oval(橢圓),line(線條),ring(圓環)。

需要注意一下幾個屬性,只有在設置畫的形狀是ring(圓環)的時候才會起作用:


android:innerRadius=""屬性:這個屬性是設置內環的半徑。

android:innerRadiusRatio=""屬性:這個屬性是設置內環的比例,假設我設置的值是2,那么內環半徑就是外圓半徑除以2,注意,如果設置了android:innerRadius=""屬性,那么內環比例這個屬性就不會起作用。

android:thickness=""屬性:這個屬性是設置圓環的厚度。

android:thicknessRatio=""屬性:這個屬性是設置圓環的厚度比例,假設我設置的值是2,那么圓環的厚度就是環半徑除以2,但是如果設置了android:thickness=""屬性,那么圓環厚度比例屬性就不生效。

android:useLevel=""屬性:這個屬性是設置使用級別,只有當我們的shape使用在LevelListDrawable中的時候,這個值為true,否則為false。

shape可以在Layout和selector中使用,shape有6個子標簽,分別是:


1.corners圓角:圓角標簽可以設置android:Radius=""屬性,表示4個角的半徑,也可以通過下面4個屬性單獨設置


android:topLeftRadius="" ? ? ? ? ? ? ? ? 設置左上角的半徑

android:topRightRadius="" ? ? ? ? ? ? ?設置右上角的半徑

android:bottomLeftRadius="" ? ? ? ? ?設置右下角的半徑

android:bottomRightRadius="" ? ? ? ?設置左下角的半徑

2.gradient漸變:設置shape的漸變色,有如下屬性:


android:angle=""屬性:表示漸變的角度,必須是45的倍數,可以設置為0,0表示從左往右漸變,逆時針旋轉,依次是45,90,135.....,90表示從下往上漸變,270表示從上往下漸變,依次下去

android:startColor=""屬性:設置漸變的起始顏色

android:centerColor=""屬性:設置漸變的過渡顏色

android:endColor=""屬性:設置漸變的結束顏色

android:type=""屬性:設置漸變的類型,有三種類型,分別是:linear(線性變化),radial(輻射漸變)以及sweep(掃描漸變)

android:gradientRadius=""屬性,設置漸變半徑,只有當漸變類型是radial(輻射漸變)的時候才需要設置

3.padding內邊距:內邊距沒有什么好說的,就是設置上、下、左、右四個方向的距離。


4.size大下:大小也沒什么好說的,就是設置寬度和高度


5.solid填充:設置填充顏色,如果設置了這個屬性,那么gradient屬性就不生效


6.stroke描邊:設置邊線的屬性:虛線或者實線、大小、顏色。有如下屬性:


android:width="" ? ? ? ? ? ? ? ? ?設置邊邊的寬度

android:color="" ? ? ? ? ? ? ? ? ?設置邊邊的顏色

android:dashWidth="" ? ? ? ? 設置虛線的寬度

android:dashGap="" ? ? ? ? ? 設置虛線的間隔寬度

需要注意的是:dashWidth和dashGap屬性,只要其中一個設置為0dp或者不設置,邊框是實線邊框

使用

上面我們講了很多shape的便簽和屬性,都是概念性的東西,下面我們來具體使用一下

使用shape畫一條虛線

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

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

? ?android:shape="line">

<!-- 設置虛線的樣式-->

<stroke

? ? android:width="2dp"

? ? android:color="@color/colorPrimaryDark"

? ? android:dashGap="5dp"

? ? android:dashWidth="8dp"/>

<size android:height="20dp"/>

</shape>

使用shape畫一條實線

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

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

? ?android:shape="line">

<!-- 設置實線的樣式-->

<stroke

? ? android:width="2dp"

? ? android:color="@color/colorPrimaryDark"

? ? />

<size android:height="20dp"/>

</shape>

使用shape畫一個實線邊框

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

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

? ?android:shape="rectangle">

<stroke

? ? android:width="2dp"

? ? android:color="@color/colorPrimaryDark"/>

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

</shape>

使用shape畫一個虛線邊框

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

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

? ?android:shape="rectangle">

<stroke

? ? android:width="2dp"

? ? android:color="@color/colorPrimaryDark"

? ? android:dashGap="3dp"

? ? android:dashWidth="5dp"/>

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

</shape>

使用shape畫一個漸變邊框

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

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

? ?android:shape="rectangle">

<corners

? ? android:bottomLeftRadius="8dp"

? ? android:bottomRightRadius="8dp"

? ? android:topLeftRadius="8dp"

? ? android:topRightRadius="8dp"/>

<stroke

? ? android:width="2dp"

? ? android:color="@color/colorPrimaryDark"/>

<gradient

? ? android:angle="180"

? ? android:endColor="#197600"

? ? android:startColor="#9cff00"/>

</shape>

使用shape畫一個圓環

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

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

? ?android:shape="ring"

? ?android:useLevel="false">

<solid android:color="#006BB0"/>

<stroke

? ? android:width="1dp"

? ? android:color="#ffffff"/>

<size

? ? android:width="20dp"

? ? android:height="20dp"/>

</shape>



需要注意的是,在Android3.0之后會開啟硬件加速功能,所以我們需要在Activity中添加這一句代碼,否則不會顯示虛線

android:hardwareAccelerated="false"


shape就簡單介紹到這里了,我們可以使用shape畫出很多形狀,就看具體的需求了,使用shape比圖片更小。


原文鏈接:http://www.lxweimin.com/p/7a12c962b1f8

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容