2016年2月26日 星期五

Android 下的圓形進度介面


在 Android 中的基本介面都已經學習及使用過,是時候學點進階版。我選了圓形進度介面。

要製作圓形進度,得先決定外觀是怎麼樣。我希望有個幼細的整圓,代表 100% 的情況;而粗圓代表進度,按百份比顯示的。那麼,我需要先定義以上設計的 Drawable:

shape_circular_thin.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape
            android:useLevel="true"
            android:innerRadiusRatio="2.3"
            android:shape="ring"
            android:thickness="3sp">
            <solid android:color="#ff00ff" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <shape
            android:useLevel="true"
            android:innerRadiusRatio="2.3"
            android:shape="ring"
            android:thickness="3sp">
            <solid android:color="#ffffff" />
        </shape>
    </item>
</layer-list>

shape_circular.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape
            android:useLevel="true"
            android:innerRadiusRatio="2.3"
            android:shape="ring"
            android:thickness="1sp">
            <solid android:color="#ff00ff" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <shape
            android:useLevel="true"
            android:innerRadiusRatio="2.3"
            android:shape="ring"
            android:thickness="1sp">
            <solid android:color="#ffffff" />
        </shape>
    </item>
</layer-list>
有了 Drawable 之後,便是定義 XML。當中是使用「ProgressBar」元素。不過,Drawable 的進度起點是由三點鐘方向順時針轉動,而我則希望是十二點鐘方向順轉;所以在 XML 中要加入「android:rotate="-90"」。目前我使用的進度是把圓形分成七份,代表一星期七天;考慮到日後使用到這個元素時可能會有更密的單位,所以我把 360 度乘二作為最大值,亦即是 720 度。只要把數值按比例乘大到 720 便能正確顯示。

沒有留言: