android 垂直方向进度条progressbar

最新推荐文章于 2024-10-18 13:38:11 发布

原创最新推荐文章于 2024-10-18 13:38:11 发布 · 9.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#android #布局

android自定义view （进度条）专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Android中实现垂直方向的进度条。通过修改原生水平进度条的XML资源文件，调整`clipOrientation`为垂直并改变`gravity`属性，可以创建一个自定义的垂直进度条。在布局文件中应用修改后的XML，最终展示出垂直进度条的效果。

在实际需求会碰到使用垂直方向的是进度条

一水平方向进度条

1.先看看原生的水平方向进度条

<ProgressBar
        android:id="@+id/progress3"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:indeterminate="false"
        android:indeterminateOnly="false"
        android:max="100"
        android:progress="50"
        />

2.根据style="?android:attr/progressBarStyleHorizontal"，我们找到源码中的style.xml

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

3.看到<item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
木有，继续发掘源码，找到drawable下面的progress_horizontal.xml，这就是我们今天的主角

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2008 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<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>

4. 把这个progress_horizontal.xml拷到我们项目下drawable，在布局文件使用如下：

<ProgressBar
        android:id="@+id/progress3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:indeterminate="false"
        android:indeterminateOnly="false"
        android:max="100"
        android:progress="50"
        android:progressDrawable="@drawable/progress_horizontal" />

5.水平方向效果：

二.垂直方向进度条。

1.复制一份progress_horizontal.xml改名为progress_vertical.xml，内容修改为

<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:centerX="0.75"
                    android:endColor="#ff747674"
                    android:angle="90"
                    />
        </shape>
    </item>

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

    <item android:id="@android:id/progress">
        <clip  android:clipOrientation="vertical"
               android:gravity = "bottom">
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#ffffd300"
                        android:centerColor="#ffffb600"
                        android:centerX="0.75"
                        android:endColor="#ffffcb00"
                        android:angle="90"
                        />
            </shape>
        </clip>
    </item>

</layer-list>

或内容为

    <item android:id="@android:id/progress">
        <clip android:clipOrientation="vertical"
              android:gravity = "bottom">
            <bitmap  android:src="@drawable/img_graduation_dtc" />
            <!--

   <shape>
                <gradient
                        android:startColor="#ffffd300"
                        android:centerColor="#ffffb600"
                        android:centerX="0.75"
                        android:endColor="#ffffcb00"
                        android:angle="90"
                />
            </shape>
            -->

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

2为什么shape外面要包一层clip呢，官方文档解释是clipdrawable是可以自我复制的，来看看定义

<?xml version="1.0" encoding="utf-8"?>
<clip     xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/drawable_resource"
     android:clipOrientation=["horizontal" | "vertical"]
     android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
                     "fill_vertical" | "center_horizontal" | "fill_horizontal" |
                     "center" | "fill" | "clip_vertical" | "clip_horizontal"] />
android:clipOrientation有两个属性，默认为horizontal
android:gravity有两个属性，默认为left
那我们试试改成vertical和bottom会有什么效果，新建一个progress_vertical.xml，把源码progress_horizontal.xml的内容复制过来，这里去掉了secondaryProgress，修改了clip，shape的渐变中心centerY改为centerX

3.布局文件中使用

<ProgressBar
        android:id="@+id/progress5"
        style="@style/VLineLayout"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:indeterminate="false"
        android:indeterminateOnly="false"
        android:max="100"
        android:visibility="gone"
        android:progress="50"
        android:background="@drawable/img_graduation_gray"
        android:progressDrawable="@drawable/progress_vertical" />

4 效果图如下：