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

2016.03.18 / Android 工作筆記, 常用介面佈局 & 資源檔

《簡單介紹》

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

➥常用的屬性整理

《宣告 & 使用方式》

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

rectangle – 矩形

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

<?xml version="1.0" encoding="utf-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"> //指定形狀類型，默認為rectangle
    
    <solid android:color="#2F90BD" /> //指定形狀的填充色
    
    <padding  
        android:bottom="12dp"
        android:left="12dp"
        android:right="12dp"
        android:top="12dp" /> //設定內容區域離邊界的間距

    <corners android:radius="200dp" /> //設定圓角，只適用於 rectangle
    
    <stroke 
        android:width="2dp"
        android:color="@android:color/darker_gray"
        android:dashGap="4dp"
        android:dashWidth="4dp" /> //設定描邊
</shape>

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

<shape

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

android:shape="rectangle"> //指定形狀類型，默認為rectangle

<solid android:color="#2F90BD" /> //指定形狀的填充色

<padding

android:bottom="12dp"

android:left="12dp"

android:right="12dp"

android:top="12dp" /> //設定內容區域離邊界的間距

<corners android:radius="200dp" /> //設定圓角，只適用於 rectangle

<stroke

android:width="2dp"

android:color="@android:color/darker_gray"

android:dashGap="4dp"

android:dashWidth="4dp" /> //設定描邊

</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
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="加了虛線描邊的矩形"
    android:background="@drawable/shape_rectangle" />
.

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="加了虛線描邊的矩形"

android:background="@drawable/shape_rectangle" />

在 TextView 中引用 shape_rectangle.xml 形狀

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

oval – 圓形、橢圓形

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

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

    <padding
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp" /> //設置內間距
   
    <size
        android:width="40dp"
        android:height="40dp" /> //設置圓形大小

    <gradient
        android:endColor="#000000"
        android:gradientRadius="40dp"
        android:startColor="#FFFFFF"
        android:type="radial" /> //設置漸變大小
</shape>

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

<shape

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

android:shape="oval">

<padding

android:bottom="4dp"

android:left="4dp"

android:right="4dp"

android:top="4dp" /> //設置內間距

<size

android:width="40dp"

android:height="40dp" /> //設置圓形大小

<gradient

android:endColor="#000000"

android:gradientRadius="40dp"

android:startColor="#FFFFFF"

android:type="radial" /> //設置漸變大小

</shape>

shap_oval.xml

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

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

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:layout_margin="8dp"
    android:text="6"
    android:textSize="20sp"
    android:textColor="@android:color/black"
    android:background="@drawable/shape_oval" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:layout_margin="8dp"

android:text="6"

android:textSize="20sp"

android:textColor="@android:color/black"

android:background="@drawable/shape_oval" />

在 TextView 中引用 shape_oval.xml 形狀

line : 線形 (實線、虛線)

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

<?xml version="1.0" encoding="utf-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
   
    <stroke
        android:width="1dp"
        android:color="#2F90BD"
        android:dashGap="2dp"
        android:dashWidth="4dp" /> //線的屬性
    
    <size android:height="4dp" /> //線元件的高度
</shape>

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

<shape

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

android:shape="line">

<stroke

android:width="1dp"

android:color="#2F90BD"

android:dashGap="2dp"

android:dashWidth="4dp" /> //線的屬性

<size android:height="4dp" /> //線元件的高度

</shape>

shap_line.xml

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

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

<LinearLayout
    android:layout_width = "match_parent"
    android:layout_height = "wrap_content"
    android:background = "@drawable/shape_line"
    android:layerType = "software"/>

<LinearLayout

android:layout_width = "match_parent"

android:layout_height = "wrap_content"

android:background = "@drawable/shape_line"

android:layerType = "software"/>

在 LinearLayout 中引用 shape_line.xml 形狀

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

ring – 環形、環形進度條

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

<?xml version="1.0" encoding="utf-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="3"
    android:thicknessRatio="9"
    android:useLevel="false">
    
    <gradient
        android:endColor="#2F90BD"
        android:startColor="#FFFFFF"
        android:type="sweep" />
    
    <stroke
        android:width="1dp"
        android:color="@android:color/black" />
</shape>

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

<shape

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

android:shape="ring"

android:innerRadiusRatio="3"

android:thicknessRatio="9"

android:useLevel="false">

<gradient

android:endColor="#2F90BD"

android:startColor="#FFFFFF"

android:type="sweep" />

<stroke

android:width="1dp"

android:color="@android:color/black" />

</shape>

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，程式碼範例如下 –

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="1080.0">

    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="8"
        android:useLevel="false">

        <gradient
            android:endColor="#2F90BD"
            android:startColor="#FFFFFF"
            android:type="sweep" />
    </shape>
</rotate>

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

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

android:fromDegrees="0"

android:pivotX="50%"

android:pivotY="50%"

android:toDegrees="1080.0">

<shape

android:innerRadiusRatio="3"

android:shape="ring"

android:thicknessRatio="8"

android:useLevel="false">

<gradient

android:endColor="#2F90BD"

android:startColor="#FFFFFF"

android:type="sweep" />

</shape>

</rotate>

shape_ring_progress.xml

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

<LinearLayout
    android:layout_width = "match_parent"
    android:layout_height = "wrap_content"
    android:background = "@drawable/shape_ring"/>

<LinearLayout

android:layout_width = "match_parent"

android:layout_height = "wrap_content"

android:background = "@drawable/shape_ring"/>

在 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 類型，可分別設置四個角不同半徑的圓角。

stroke

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

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

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

賽肥膩膩の娛樂生活誌

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

rectangle – 矩形

oval – 圓形、橢圓形

line : 線形 (實線、虛線)

ring – 環形、環形進度條

賽肥膩膩

上 / 下一篇文章

上一篇文章《Android》『Intent』- 透過 Intent 切換 Activity 並利用 Bundle 傳送參數

下一篇文章《食記》『Uncles Taiwan 魷魚大叔火焰炒年糕專賣店』- 台北市捷運國父紀念館站光復南路

您可能也喜歡 You may also like

臉書留言

一般留言

發佈留言取消回覆

rectangle – 矩形

oval – 圓形、橢圓形

line : 線形 (實線、虛線)

ring – 環形、環形進度條

賽肥膩膩

上一篇文章 《Android》『Intent』- 透過 Intent 切換 Activity 並利用 Bundle 傳送參數

下一篇文章 《食記》『Uncles Taiwan 魷魚大叔 火焰炒年糕專賣店』- 台北市 捷運國父紀念館站 光復南路

您可能也喜歡 You may also like

臉書留言

一般留言

發佈留言 取消回覆

上一篇文章《Android》『Intent』- 透過 Intent 切換 Activity 並利用 Bundle 傳送參數

下一篇文章《食記》『Uncles Taiwan 魷魚大叔火焰炒年糕專賣店』- 台北市捷運國父紀念館站光復南路

發佈留言取消回覆