【Android 小知識】shape 元件樣式

前言

相信大家都對於Android元件的預設樣式感到不是很滿意,然而元件屬性裡又沒辦法有效改善這麼問題,除了變更背景(background)圖片還有另一個方法就是建立一個shape的xnl文件,就類似Web的CSS樣式,而Android則是可以利用shape、selector等方法來實現你想要的外觀,而我最常用的就是按鈕(Button)的圓角外觀。

1.shape 主要類型

我們要先定義外觀的基礎類型,定義好之後再來設計外觀的顏色、邊框、角..等。

shape提供四種外觀類型如下:

  • rectangle: 矩形
  • oval: 橢圓形
  • line: 線型
  • ring: 環型

2.shape屬性介紹

定義好基礎外觀後,就必須利用以下方法來更進一步修改你的外觀

solid: 指定填充顏色(實心顏色)

padding: 文字與邊框的間距

  • android:top 上邊間距
  • android:right 右邊間距
  • android:bottom 下邊間距
  • android:left 左邊間距

gradient: 漸層

  • android:type 漸層的類型
    • linear 線性漸層
    • radial 放射漸層,如果選擇這類型,必須設置android:gradientRadius
    • sweep 掃描漸層
  • android:startColor  開始顏色
  • android:endColor  結束顏色
  • android:centerColor 中間顏色
  • android:angle 漸層的角度,線性漸變(linear )才須設置。必須是45的倍數,0表示從左到右,90表示從下到上
  • android:centerX 漸層中心的相對X坐標,放射漸層(radial )才須設置,在0.0到1.0之間,預設為0.5代表正中間
  • android:centerY 漸層中心的相對X坐標,放射漸層(radial )才須設置,在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 每條虛線的長度,如不要虛線請設0
  • android:dashGap 每條虛線之間的距離,如不要虛線請設0

 

3.rectangle 矩形

rectangle是最常用到類型、無論是在TextView、Button、EditText…等元件都會用到,以下是簡單範例。請先在drawable新增一個XML文件,命名為shape_rectangle.xml(名稱可自行修改),貼上以下程式碼:

接著引用到你元件的background,以下用TextView、Button來進行展示

shape-02

4.oval 橢圓形

oval大多會用到正圓形的樣式,以下範例加入漸層、虛線兩個元素進去,讓大家能更瞭解shape屬性的用法。同樣請先在drawable新增一個XML文件,命名為shape_oval.xml(名稱可自行修改),貼上以下程式碼:

引用到你元件的background,以下用TextView、Button來進行展示

shape-03

5.line 線型

line的用法就更簡單了,最多用於水平線、分隔線,只需利用stroke和size兩個屬性就可達成,唯一注意的是如果要用虛線你引用的那個元件android:layerType要設定為software,否則無法顯示虛線。

同樣請先在drawable新增一個XML文件,命名為shape_line.xml(名稱可自行修改),貼上以下程式碼:

引用到你元件的background,以下用TextView來進行展示

shape-04

6.ring 圓環行

ring通常會用在進度條,部分專門用於ring類型的屬性再此另外介紹

  • android:innerRadius 圓環半徑
  • android:innerRadiusRatio 該值以比例方式來指定圓環半徑(寬度/該值),預設是3,會被innerRadius取代
  • android:thickness 圓環厚度
  • android:thicknessRatio 該值以比例方式來指定圓環厚度(寬度/該值),預設是9,會被thickness取代
  • android:useLevel 如果要讓此樣式顯示必須是false,只有作為LevelListDrawable才設True

在drawable新增一個XML文件,命名為shape_ring.xml(名稱可自行修改),貼上以下程式碼:

如果要讓圓環動起來就必須在外面包一個rotate,否則就只是一般背景圖

引用到你元件的background,以下用ProgressBar來進行展示

shape-05

 

發表迴響