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

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

推薦閱讀更多精彩內容