《Android》『Shape』- 利用 Shape 自訂介面元件的形狀、顏色以及樣式

《簡單介紹》

在開發 Android 程式時,有時我們會遇到需要自訂介面元件形狀的狀況,有時是為了符合 UI 設計的需求、有時是為了美觀,這個時候,我們可以利用 Shape 來為元件做一些基本的變形。

➥常用的屬性整理

 

《宣告 & 使用方式》

與之前介紹過的 Selector 一樣,Shape 其實是一個 .xml 格式的 drawable 資源檔,一般存放於 drawable 資料夾中,利用 Shape,我們可以透過 android:shape 屬性指定四種形狀如下 –

➥rectangle : 矩形

➥oval : 圓形、橢圓形

➥line : 線形 (實線、虛線)

➥ring : 環形、環形進度條

rectangle – 矩形

在 android 的介面元件中,默認是使用 rectangle 作為形狀,像是 TextView、EditText…等等,以下直接透過程式碼片段的方式,說明如何定義 Shape 內容。

shape_rectangle.xml

我們先透過 android:shape="rectangle 設定此 shape_rectangle.xml(名稱可自訂) 的形狀類型為矩形,接著再透過其他特性進一步設定此形狀的細節。

使用到的特性一一說明如下 –

solid

solid 屬性用來設置形狀填充的顏色,只有 android:color 一個屬性。

padding

padding 屬性用來設置內容與形狀邊界的內間距。

corners

corners 屬性用來設置形狀的圓角,只適用於 rectangle 類型

➥android:radius 圓角半徑,會被下面每個特定的圓角屬性重寫
➥android:topLeftRadius 左上角的半徑
➥android:topRightRadius 右上角的半徑
➥android:bottomLeftRadius 左下角的半徑
➥android:bottomRightRadius 右下角的半徑

stroke

stroke 屬性用來設置描邊,可描成實線或虛線。

➥android:width 描邊的寬度
➥android:color 描邊的顏色
➥android:dashGap 設置虛線時的橫線之間的距離
➥android:dashWidth 設置虛線時的橫線長度

接著,當我們要使用此自訂形狀 shape_rectangle.xml 時,直接在要使用的介面元件中引用即可,範例如下 –

在 TextView 中引用 shape_rectangle.xml 形狀

只要在 TextView 的 android:background 屬性中設定使用 shape_rectangle.xml 即可套用。

 

oval – 圓形、橢圓形

當我們必須實作圓形或橢圓形的按鈕時,需要將 android:shape 設成 oval,程式碼範例如下 –

shap_oval.xml

我們透過 padding 設定內容與形狀邊界的內間距,透過 size 設定形狀的大小,接著透過 gradient 屬性設定形狀顏色的漸變屬性,其中 android:gradientRadius 為漸變半徑屬性,type 為漸變種類。

接著,當我們要使用此自訂形狀 shape_oval.xml 時,直接在要使用的介面元件中引用即可,範例如下 –

在 TextView 中引用 shape_oval.xml 形狀

 

line : 線形 (實線、虛線)

當在 UI 設計中,需要使用到水平線時,我們可以透過將 android:shape 設成 line,實作虛線與實線,程式碼範例如下 –

shap_line.xml

我們透過 stroke 設置線的屬性其中包含了線的粗細(android:width)、線的顏色(android:color)、虛線時線段之間的間距(android:dashGap)以及虛線時每個線段的長度(android:dashWidth),接著透過 size 的 android:height 屬性定義整個形狀區域的高度,此屬性值必須比 stroke 中的 android:width 屬性大,否則線會無法顯示。

接著,當我們要使用此自訂形狀 shape_line.xml 時,直接在要使用的介面元件中引用即可,範例如下 –

在 LinearLayout 中引用 shape_line.xml 形狀

這邊需要注意的是,若是引用的線為虛線,則引用的 view 本身需要添加屬性 android:layerType,並將值設為 “software",否則顯示不了虛線。

 

ring – 環形、環形進度條

當需要用到環形圖案的時候,我們可以透過將 android:shape 設成 ring 實作,範例如下 –

shape_ring.xml

在設置 ring 的形狀時,於 shape 中我們不僅將 android:shape 設成 ring,另外還有一些專屬於 ring 的屬性必須設定,條列如下 –

android:innerRadius

內環的半徑。

android:innerRadiusRatio

內環的半徑比率,以環的寬度比率來表示內環的半徑,默認為 3,表示內環半徑為環的寬度除以 3,此屬性值會被 android:innerRadius 覆蓋。

android:thickness

環的厚度。

android:thicknessRatio

環的厚度比率,以環的寬度比率來表示環的厚度,默認為 9,表示環的厚度為環的寬度除以 9,此值會被 android:thickness 覆蓋。

android:useLevel

一般為 false,否則可能環形無法顯示,只有作為 LevelListDrawable 使用時才設為 true。

接著,若是想讓 ring 形狀有類似進度條的效果,則須在 shape 外層多包一層 rotate,程式碼範例如下 –

shape_ring_progress.xml

接著,當我們要使用此自訂形狀 shape_ring.xml (或 shape_ring_progress.xml)時,直接在要使用的介面元件中引用即可,範例如下 –

在 LinearLayout 中引用 shape_ring.xml 形狀

《常用的屬性整理》

solid

設置形狀填充的顏色,只有 android:color 一個屬性

➥android:color 填充的顏色

padding

設置內容與形狀邊界的內間距,可分別設置左右上下的距離

➥android:left 左內間距
➥android:right 右內間距
➥android:top 上內間距
➥android:bottom 下內間距

gradient

設置形狀的漸變顏色,可以是線性漸變、輻射漸變、掃描性漸變

➥android:type 漸變的類型
➥linear 線性漸變,默認的漸變類型
➥radial 放射漸變,設置該項時,android:gradientRadius 也必須設置
➥sweep 掃描性漸變
➥android:startColor 漸變開始的顏色
➥android:endColor 漸變結束的顏色
➥android:centerColor 漸變中間的顏色
➥android:angle 漸變的角度,線性漸變時才有效,必須是45的倍數,0表示從左到右,90表示從下到上
➥android:centerX 漸變中心的相對X坐標,放射漸變時才有效,在0.0到1.0之間,默認為0.5,表示在正中間
➥android:centerY 漸變中心的相對X坐標,放射漸變時才有效,在0.0到1.0之間,默認為0.5,表示在正中間
➥android:gradientRadius 漸變的半徑,只有漸變類型為radial時才使用
➥android:useLevel 如果為true,則可在LevelListDrawable中使用

corners

設置圓角,只適用於 rectangle 類型,可分別設置四個角不同半徑的圓角。

➥android:radius 圓角半徑,會被下面每個特定的圓角屬性重寫
➥android:topLeftRadius 左上角的半徑
➥android:topRightRadius 右上角的半徑
➥android:bottomLeftRadius 左下角的半徑
➥android:bottomRightRadius 右下角的半徑

stroke

設置描邊,可描成實線或虛線。

➥android:color 描邊的顏色
➥android:width 描邊的寬度
➥android:dashWidth 設置虛線時的橫線長度
➥android:dashGap 設置虛線時的橫線之間的距離

※本文大部分範例程式碼與整理資料皆取自網路。

賽肥膩膩

我們是低調到不行的肥膩夫妻檔,一路上一邊吵鬧一邊記錄著生活大小事,偶爾一起暴飲暴食再偶爾一起節食減肥,最沒恆心與毅力但一路走來也持續減肥了好幾次,我們重量不重質,所以完全沒有效果也是理所當然的事。

上 / 下一篇文章

臉書留言

一般留言

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *