豎直ProgressBar(VerticalProgressBar),不用那麼麻煩

之前一直通過把橫向ProgressBar(設置了progressBarStyleHoriziontal)寬高互換的方式來自定義一個VerticalProgressBar實現豎直方向的ProgressBar。但是卻發現一個bug,就是豎直方向的時候,如果設置寬度大於高度,顯示出來的豎直ProgressBar寬度可能只顯示出來一半。然後就是查資料了,但是百度和Google看下來,基本沒有人遇到這個問題。後來看到大神總結的ProgressBar深入分析,仔細看完,豁然開朗,立刻解決了困擾自己的難題,以後再遇到這類問題,把相關控件屬性看一遍,可能會有意想不到的作用。

  • android:indeterminateOnly
    限制ProgressBar只能使用模糊模式。
    true
    限制只能使用模糊模式。
    false
    不限制只能使用模糊模式。

通過設置這個屬性,再自定義progressDrawable,就可以實現豎直的ProgressBar。
以下是一個例子:
這裏寫圖片描述

  • res/layout/activity_main.xml
<ProgressBar
    android:id="@+id/pb_vertical_simple_shape"
    android:layout_width="20dp"
    android:layout_height="150dp"
    android:layout_margin="20dp"
    android:indeterminateOnly="false"
    android:max="100"
    android:progress="70"
 android:progressDrawable="@drawable/progress_vertical_gradient_simple_shape" />
  • res/drawable/progress_vertical_gradient_simple_shape.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>
            <corners android:radius="5dip" />
            <gradient
                android:angle="270"
                android:centerColor="#ff5a5d5a"
                android:centerY="0.75"
                android:endColor="#ff747674"
                android:startColor="#ff9d9e9d" />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip
            android:clipOrientation="vertical"
            android:gravity="bottom">
            <shape>
                <corners android:radius="5dip" />
                <gradient
                    android:angle="90"
                    android:endColor="#a0ffcb00"
                    android:startColor="#80ffd300" />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <!-- 定義ClipDrawable的剪裁方向爲垂直 -->
        <clip
            android:clipOrientation="vertical"
            android:gravity="bottom">
            <shape>
                <corners android:radius="5dip" />
                <gradient
                    android:angle="90"
                    android:endColor="#ffff4b00"
                    android:startColor="#ffffd300" />
            </shape>
        </clip>
    </item>

</layer-list>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章