如何在Android中自定义进度条?

时间:2018-02-22 11:18:02

标签: android drawing

我想在Android中自定义进度条,使其如下所示:

enter image description here

请注意,此条形图所在视图的绿色背景为渐变色 我试图将红色条形图定义为:

<?xml version="1.0" encoding="utf-8"?>
<shape
    android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
<corners
    android:radius="8dp" />
<solid
    android:color="#FF0000" />
</shape>

我没有故意在XML文件中定义条形宽度,以便能够以编程方式设置它。
钢筋高度为16dp 这适用于大于16dp的宽度,但对于比这更小的尺寸,红色条看起来像:

enter image description here

我理解为什么(半径不适合小宽度),但我找不到解决方案 我想制作一个从白色条形图开始的白色条形图并且白色条形图会夹在外面的部分,如下所示:

enter image description here

但我没有发现如何做到这一点 有没有人有想法?
提前谢谢。

1 个答案:

答案 0 :(得分:1)

您的问题示例:

<强> 的src / com.app / BarSampleActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ProgressBar;

public class BarSampleActivity extends AppCompatActivity {

    int timePassed = 0;
    ProgressBar bar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bar_sample);

        bar = (ProgressBar) findViewById(R.id.progressBar);

        Thread background = new Thread(new Runnable() {
            public void run() {
                while (timePassed < 100) {
                    try {
                        bar.setProgress(timePassed++);
                        Thread.sleep(1000);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        });
        background.start();
    }
}

<强> RES /布局/ activity_bar_sample.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="150dp"
        android:layout_height="100dp"
        android:gravity="center"
        android:background="@drawable/gradiant_bg"
        android:orientation="vertical">

        <ProgressBar
            android:id="@+id/progressBar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:progress="20"
            android:max="100"
            android:progressDrawable="@drawable/progressbar_bg" />

    </LinearLayout>

</LinearLayout>

<强> RES /抽拉/ gradiant_bg.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:angle="90"
        android:centerColor="#21954a"
        android:endColor="#33bf65"
        android:startColor="#0e6b30"
        android:type="linear" />

    <corners android:radius="4dp" />

</shape>

<强> RES /抽拉/ progressbar_bg.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="8dp" />
            <solid android:color="@android:color/white" />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="8dp" />
                <solid android:color="@android:color/white" />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="8dp" />
                <solid android:color="@android:color/holo_red_dark" />

            </shape>
        </clip>
    </item>

</layer-list>

我像这样

Output of the following code

试试这段代码。我希望这是你想要的( @Aaron Tuil )。

如果您觉得需要更多时间。请从My Repository =&gt;下载并试用示例源代码。 Divakar-Murugesh/Custom-ProgressBar

快乐编码:)