Android 用xml快速实现竖向ProgressBar

发布于:2022-10-21 ⋅ 阅读:(378) ⋅ 点赞:(0)

话不多说,先上效果图。

 

1、layout.xml里面设置style和progressDrawable

<ProgressBar
    android:id="@+id/progressBar"
    android:layout_width="40dp"
    android:layout_height="200dp"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:progressDrawable="@drawable/shape_vertical_progress_bar" />

2、shape_vertical_progress_bar.xml

clip和scale都可以生效,二选一即可。

clip的关键:

android:clipOrientation="vertical" 
android:gravity="bottom"

scale的关键:

android:scaleGravity="bottom" 
android:scaleWidth="0%" 
android:scaleHeight="100%"

scale的解决方案更完美:progress部分会保留圆角,并且渐变色是从0-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>
            <solid android:color="#FF393A3B"/>
            <corners android:topLeftRadius="2dp"
                android:topRightRadius="2dp"
                android:bottomRightRadius="0dp"
                android:bottomLeftRadius="0dp" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <!--clip会裁减掉圆角,并且颜色值渐变效果不对-->
<!--        <clip android:clipOrientation="vertical" android:gravity="bottom">-->
        <!--scale的解决方案更完美-->
        <scale android:scaleGravity="bottom" android:scaleWidth="0%" android:scaleHeight="100%">
            <shape>
                <gradient android:type="linear"
                    android:startColor="#FFFFB34B"
                    android:endColor="#00D8D8D8"
                    android:angle="270"/>
                <corners android:topLeftRadius="2dp"
                    android:topRightRadius="2dp"
                    android:bottomRightRadius="0dp"
                    android:bottomLeftRadius="0dp" />
            </shape>
<!--        </clip>-->
        </scale>
    </item>
</layer-list>

参考链接:Android - set a ProgressBar to be a vertical bar instead of horizontal? - Stack Overflow

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到