在按钮内制作进度条

Question

问题

我想制作一个像这张图一样的进度条：

期望的行为是：

当用户单击该按钮时，会出现深灰色进度条并开始以恒定的速度递增。我希望能够确定它需要多长时间才能完全填满（例如 2 秒）。
如果请求在进度条达到 100% 之前到达，进度条应该直接达到 100%（不在一帧内，但它应该增长得非常快，就像 windows文件资源管理器，当它正在加载某些东西并在进度条尚未结束时完成。
如果在条形图达到 100% 之前请求没有到达，让它达到 100%。如果在 100%（即过去 2 秒）请求还没有到达，就会发生超时（我会让一个小吃店出现；别担心这个，我知道怎么做，这只是为了澄清）。

到目前为止我发现了什么

我发现 this article 这就是我想要的例子。这种方法有什么问题吗？此外，该示例没有显示如何自定义进度条（在我的例子中，我希望它在带有弯曲角的视图顶部具有灰色）。但我最想知道的是 link 的方法是否是一个好的方法。

我的猜测

我主要担心的是当请求到达但进度条尚未达到 100% 时发生的 "quick filling"（我认为这将是大多数情况；不太可能请求准确到达 100%)。照link里说的，我在想，当请求到来时，方法doSomeTasks应该return进度条status+1在一个小区间内。因此，例如，如果它是 55，它将 return 56、57、58...直到 100，并且 return 之间的间隔为 0.5 秒。这样，我认为我可以模拟进度条快速增长到 100%。

非常感谢任何帮助，谢谢！

Answer 1

创建带有文本视图和进度条的框架布局：

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ProgressBar
        android:id="@+id/progress_bar"
        android:progressDrawable="@drawable/progress_bar_states"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:indeterminate="false"
        style="?android:attr/progressBarStyleHorizontal" />

    <TextView
        android:id="@+id/text_view_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Enter"
        android:textColor="@android:color/white"
        android:padding="6dp"
        android:textSize="16sp"
        android:textStyle="bold"
        android:gravity="center"/>

</FrameLayout>

您需要创建一个 progressDrawable 文件。

文件res/drawable/progress_bar_states.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>
            <gradient
                android:startColor="#777777"
                android:centerColor="#333333"
                android:centerY="0.75"
                android:endColor="#222222"
                android:angle="270" />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <gradient
                    android:startColor="#234"
                    android:centerColor="#234"
                    android:centerY="0.75"
                    android:endColor="#a24"
                    android:angle="270" />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <gradient
                    android:startColor="#999999"
                    android:centerColor="#777777"
                    android:centerY="0.75"
                    android:endColor="#555555"
                    android:angle="270" />
            </shape>
        </clip>
    </item>
</layer-list>

然后，创建您的 button/progressbar 的逻辑：

final ProgressBar progressBar = (ProgressBar) findViewById(R.id.progress_bar);
final ObjectAnimator objectAnimator = ObjectAnimator.ofInt(progressBar, "progress", progressBar.getProgress(), 100).setDuration(2000);
objectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator valueAnimator) {
        int progress = (int) valueAnimator.getAnimatedValue();
        progressBar.setProgress(progress);
    }
});

TextView btn = (TextView) findViewById(R.id.text_view_button);
btn.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        objectAnimator.start();
    }
});

基本上，在点击 Textview 之后，ObjectAnimator 会增加 ProgressBar 2 秒，直到它完成。

如果你想加快进度调用这个方法：

private void completeFast(final ProgressBar progressBar) {
    final ObjectAnimator objectAnimator = ObjectAnimator.ofInt(progressBar, "progress",
                    progressBar.getProgress(), progressBar.getMax());

    objectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            int progress = (int) valueAnimator.getAnimatedValue();
            progressBar.setProgress(progress);
        }
    });
}

0.3秒完成进度

也许您想更改 res/drawable/progress_bar_states.xml 的颜色。但差不多就是这样 =]

结果：

在按钮内制作进度条

Make progress bar inside button

android

android-progressbar