自定义的解压进度条关于ProgressBar的使用

最新推荐文章于 2025-09-14 11:52:59 发布

原创最新推荐文章于 2025-09-14 11:52:59 发布 · 置顶 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Android ProgresBar #自定义 xml布局

android 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了一种自定义渐变色背景的ProgressBar实现方法，并详细展示了如何为ProgressBar的不同部分（如背景、进度等）设置不同的渐变效果。此外，还提供了滚动条背景及滚动条的样式设置。

整体布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linear_"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="300dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:background="@drawable/main_bg"
        android:orientation="vertical"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:paddingTop="10dp" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/decompression"
            android:textColor="#436EEE"
            android:textSize="15sp" />

        <TextView
            android:id="@+id/tv_current"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_marginTop="10dp"
            android:text="@string/current_value"
            android:textColor="#EE9A00"
            android:textSize="11sp" />

        <ProgressBar
            android:id="@+id/progressBar1"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="fill_parent"
            android:layout_height="5dp"
            android:layout_marginTop="5dp"
            android:progressDrawable="@drawable/progress_bg" />
    </LinearLayout>

</LinearLayout>

渐变色背景

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linear_"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="300dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:background="@drawable/main_bg"
        android:orientation="vertical"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:paddingTop="10dp" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/decompression"
            android:textColor="#436EEE"
            android:textSize="15sp" />

        <TextView
            android:id="@+id/tv_current"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_marginTop="10dp"
            android:text="@string/current_value"
            android:textColor="#EE9A00"
            android:textSize="11sp" />

        <ProgressBar
            android:id="@+id/progressBar1"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="fill_parent"
            android:layout_height="5dp"
            android:layout_marginTop="5dp"
            android:progressDrawable="@drawable/progress_bg" />
    </LinearLayout>

</LinearLayout>

ProgressBar的背景资源

分别需要对3个 item进行id 进行设置：

android:id/background

android:id/secondaryProgress

android:id/progress

<?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="3dip" />

            <gradient
                android:angle="270"
                android:centerY="0.75"
                android:endColor="#30F5FFFA"
                android:startColor="#90F0F0F0" />
        </shape>
    </item>
    <!-- 设置第二级进度条颜色图像资源 -->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="3dip" />

                <gradient
                    android:angle="270"
                    android:centerY="0.75"
                    android:endColor="#EEE685"
                    android:startColor="#EEAD0E" />
            </shape>
        </clip>
    </item>
    <!-- 设置第一级进度条颜色图像资源 -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="3dip" />

                <gradient
                    android:angle="270"
                    android:centerY="0.75"
                    android:endColor="#3087CEEB"
                    android:startColor="#906495ED" />
            </shape>
        </clip>
    </item>

</layer-list>

gradient的几种属性配置：

 android:scrollbarTrackVertical="@drawable/scrollbar_vertical_track"        //滚动条背景
 android:scrollbarThumbVertical="@drawable/scrollbar_vertical_thumb"      //滚动条



scrollbar_vertical_track.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient android:startColor="#3333FF" android:endColor="#8080FF"
            android:angle="0"/>
    <corners android:radius="6dp" />
</shape>
 
scrollbar_vertical_thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient android:startColor="#505050" android:endColor="#C0C0C0"
            android:angle="0"/>
    <corners android:radius="0dp" />
</shape>