Android ProgressBar 詳解改變 ProgressBar 顏色

今天來說說 ProgressBar 這個東西,

之前一種是用的項目裏面別人寫好的直接用, 還沒怎麼細看這兩個東西

ProgressBar 很簡單就一進度條

默認情況下, 他是圓形的,

但是它還有另一種水平長條狀的形態

同時還需要了解的有:

1. 水平形狀的 ProgressBar 是有兩個進度的向我們看到視頻的精度條, 有一個是當前播放的,還有一個是下載的精度

2. ProgressBar 分爲確定和不確定的兩種, android:indeterminate 爲true 表示不確定

3.系統的關於 ProgressBar的Style有:

style="?android:attr/progressBarStyle"
style="?android:attr/progressBarStyleHorizontal"
style="?android:attr/progressBarStyleInverse"
style="?android:attr/progressBarStyleLarge"
style="?android:attr/progressBarStyleLargeInverse"
style="?android:attr/progressBarStyleSmall"
style="?android:attr/progressBarStyleSmallInverse"
style="?android:attr/progressBarStyleSmallTitle"

設置ProgressBar的樣式有兩種方式:

style="@style/StyleProgressBarMini"

style="?android:attr/progressBarStyleLargeInverse"

上面兩種方式都可以設置PogressBar 的屬性

我們在自定ProgressBar的時候一般用的都是第一種

下面看看 Android默認的兩種 ProgressBar的Style

<style name="Widget.ProgressBar">
    <item name="indeterminateOnly">true</item>
    <item name="indeterminateDrawable">@drawable/progress_medium_white</item>
    <item name="indeterminateBehavior">repeat</item>
    <item name="indeterminateDuration">3500</item>
    <item name="minWidth">48dip</item>
    <item name="maxWidth">48dip</item>
    <item name="minHeight">48dip</item>
    <item name="maxHeight">48dip</item>
    <item name="mirrorForRtl">false</item>
</style>

上面是默認的的Style 是圓形的而且是不確定

<style name="Widget.ProgressBar.Horizontal">
    <item name="indeterminateOnly">false</item>
    <item name="progressDrawable">@drawable/progress_horizontal</item>
    <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal</item>
    <item name="minHeight">20dip</item>
    <item name="maxHeight">20dip</item>
    <item name="mirrorForRtl">true</item>
</style>

這個是水平的ProgressBar的 Style

progressDrawable 這個屬性是確定的進度條的屬性

indeterminateDrawable 這個事不確定的進度條的熟悉

我可以看看系統默認的 @drawable/progress_horizontal

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dip" />
            <gradient
                    android:startColor="#ff9d9e9d"
                    android:centerColor="#ff5a5d5a"
                    android:centerY="0.75"
                    android:endColor="#ff747674"
                    android:angle="270"
            />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#80ffd300"
                        android:centerColor="#80ffb600"
                        android:centerY="0.75"
                        android:endColor="#a0ffcb00"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#ffffd300"
                        android:centerColor="#ffffb600"
                        android:centerY="0.75"
                        android:endColor="#ffffcb00"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>

</layer-list>

上面有3個 item background、secondProgress、progress，看名字就能知道其大概作用, 我可以把這份文件copy 一份就可以自己隨心的改動樣式了

下面一份是自己定義的

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- background -->
    <item
        android:id="@android:id/background"
        android:drawable="@drawable/progress_patch_green">
    </item>
    <!-- progress -->
    <item android:id="@android:id/progress">
        <clip>
            <nine-patch android:src="@drawable/progress_patch_galy" />
        </clip>
    </item>
    <!-- second progress -->

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <nine-patch android:src="@drawable/progresspatch_blue" />
        </clip>
    </item>

</layer-list>

需要注意的是上面 .9 圖的使用

關於 clip nine-patch 這些標籤, 現在自己頁不是很熟悉, 以後會寫一篇關於這個的文章

如果不用Drawable的畫, 只是想單純的使用顏色該如何處理呢?

嘗試過這樣:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@android:id/background"
        android:drawable="@color/white">
    </item>
    <item
        android:id="@android:id/secondaryProgress"
        android:drawable="@color/red">
    </item>
    <item
        android:id="@android:id/progress"
        android:drawable="@color/red">
    </item>
</layer-list>

但是後面在設置 Progress的時候不起作用, 看到的結果總是

後面又嘗試過 :

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@android:id/background"
        >
        <shape>
            <solid android:color="@color/white"></solid>
        </shape>

    </item>
    <item
        android:id="@android:id/secondaryProgress"
        >
        <shape>
            <solid android:color="@color/red"></solid>
        </shape>

    </item>
    <item
        android:id="@android:id/progress"
        >
        <shape>
            <solid android:color="@color/red"></solid>
        </shape>

    </item>
</layer-list>

還是不行和上面一樣的

後面又嘗試了這樣的:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@android:id/background"
        >
        <clip>
            <shape>
                <solid android:color="@color/white"></solid>
            </shape>

        </clip>
    </item>
    <item
        android:id="@android:id/secondaryProgress"
        >
        <clip>
            <shape>
                <solid android:color="@color/red"></solid>
            </shape>

        </clip>
    </item>
    <item
        android:id="@android:id/progress"
        >
        <clip>
            <shape>
                <solid android:color="@color/red"></solid>
            </shape>

        </clip>
    </item>
</layer-list>

這下好了能夠正常顯示了:

後面又嘗試了這樣的:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <clip>
            <shape>
                <gradient
                    android:endColor="@color/white"
                    android:startColor="@color/white"/>
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <gradient
                    android:endColor="@color/colorPrimary"
                    android:startColor="@color/colorPrimary"/>
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <gradient
                    android:endColor="@color/colorPrimary"
                    android:startColor="@color/colorPrimary"/>
            </shape>
        </clip>
    </item>
</layer-list>

也是ok 如圖:

這是自己定義的ProgressBar的style

<style name="StyleProgressBarMini" parent="Widget.AppCompat.ProgressBar.Horizontal">

    <item name="android:maxHeight">50dp</item>
    <item name="android:minHeight">10dp</item>
    <item name="android:indeterminateOnly">false</item>
    <item name="android:indeterminateDrawable">
        @android:drawable/progress_indeterminate_horizontal
    </item>
    <item name="android:progressDrawable">@drawable/shape_progressbar_mini</item>

</style>

具體使用如下:

<ProgressBar
    android:id="@+id/pb_progressbar"
    style="@style/StyleProgressBarMini"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="30dp"
    android:max="100"
    android:progress="50"/>

ok 下面說說自定義圓形的

圓形的主要修改 android:indeterminateDrawable 屬性

第一步，在drawable文件夾下新建：progressbar_circle_1.xml，如下：

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/loading" //自定義的菊花圖片
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="360" >

</rotate>

第二步，在Style中定義mProgress_circle，如下：

<style name="mProgress_circle">
    <item name="android:indeterminateDrawable">@drawable/progressbar_circle_1</item>
    <item name="android:minWidth">25dp</item>
    <item name="android:minHeight">25dp</item>
    <item name="android:maxWidth">60dp</item>
    <item name="android:maxHeight">60dp</item>
</style>

支持大小自己隨意定，別失真就好

第三步，組件中引用，如下

<ProgressBar
    android:id="@+id/progressBar2"
    style="@style/mProgress_circle"
    android:layout_gravity="center_vertical"
    android:layout_width="match_parent"
    android:indeterminateDuration="1200"
    android:layout_height="wrap_content" />

上面是通過一張圖片填充android:indeterminateDrawable，我們也可以定義一個動畫或者自定義顏色（shape）來實現，跟圖片的用法一樣：

定義動畫 progress_circle_loading,xml：

<animation-list android:oneshot="false"
  xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:duration="100" android:drawable="@drawable/loading_1" />
  <item android:duration="100" android:drawable="@drawable/loading_2" />
  <item android:duration="100" android:drawable="@drawable/loading_3" />
  <item android:duration="100" android:drawable="@drawable/loading_4" />
  <item android:duration="100" android:drawable="@drawable/loading_5" />
  <item android:duration="100" android:drawable="@drawable/loading_6" />
</animation-list>

style的indeterminateDrawable引入：

<item name="android:indeterminateDrawable">@drawable/progress_circle_loading</item>

定義shape顏色 progress_circle_shape.xml

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
  android:fromDegrees="0"
  android:pivotX="50%"
  android:pivotY="50%"
  android:toDegrees="360" >
  <shape
    android:innerRadiusRatio="3"
    android:shape="ring"
    android:thicknessRatio="8"
    android:useLevel="false" >
    <gradient
      android:centerColor="#FFFFFF"
      android:centerY="0.50"
      android:endColor="#1E90FF"
      android:startColor="#000000"
      android:type="sweep"
      android:useLevel="false" />
  </shape>
</rotate>

style的indeterminateDrawable引入：

<item name="android:indeterminateDrawable">@drawable/progress_circle_shape</item>

關於seekBar 的自定義和ProgressBar的基本一致

ok 老實說, 上面的關於 gradient shape 這新的知識不是很熟悉, 以後要專門寫一篇關於這個的

參考了以下文章

http://blog.csdn.net/mad1989/article/details/38042875

Android ProgressBar 詳解改變 ProgressBar 顏色

Nginx R31 doc-13-Limiting Access to Proxied HTTP Resources 訪問限流

公司剛入職了一名 Java 中級開發，短短 4 行代碼居然湊齊了 3 個 bug！我哭了~~

python包：pandas

中外程序員到底有啥區別？

Python數據分析與挖掘實戰（5章）

一、什麼是Docker

C++文件/流

二、Docker 組件

揹包九講一 01揹包

今天！通義靈碼在北京、成都、杭州三城開講啦

Andorid 設置自定義字體

Android ProgressBar 詳解改變 ProgressBar 顏色

Android StatusBar

ListView 常用屬性詳解

Android draw canvas save restore saveLayer 學習

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

Android ProgressBar 詳解 改變 ProgressBar 顏色

Android ProgressBar 詳解改變 ProgressBar 顏色