在按钮内创建进度条

Question

问题

我想在这张图片中制作一个进度条:

期望的行为是:

• 当用户单击该按钮时,将出现深灰色进度条并开始以恒定速度递增.我希望能够确定完全填充需要多长时间(比如2秒).
• 如果请求在进度条达到100%之前到达,则进度条应该直接进入100%(不在一个框架内,但它应该非常快速地增长,就像它在Windows文件浏览器中发生的那样,当它正在加载某些内容并完成时当进度条尚未结束时).
• 如果请求在栏达到100%之前没有到达,则让它达到100%.如果在100%(即过去2秒)请求尚未到达,则会发生超时(我会显示一个小吃吧;不要担心这个,我知道该怎么做,这只是为了澄清).

到目前为止我发现了什么

我发现这篇文章可以说明我想要的东西.这种方法有什么问题吗？此外,该示例未显示如何自定义进度条(在我的情况下,我希望在带有弯角的视图顶部使用灰色).但我最想知道的是,该链接的方法是否合适.

我的猜测

我主要担心的是当请求到达时发生的"快速填充"但进度条尚未达到100%(我认为这将是大多数情况;请求不太可能达到100% ).考虑到链接中的内容,我在想,当请求到达时,该方法doSomeTasks应该在一个小间隔内返回进度条状态+ 1.因此,在示例中,如果它在55,它将返回56,57,58 ......直到100,并且返回将在它们之间具有间隔,例如0.5秒.这样,我想我可以模拟进度条快速增长到100%.

非常感谢任何帮助,谢谢!

Answer 1

使用textview和进度条创建框架布局:

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

然后,创建按钮/进度条的逻辑:

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的颜色.但这几乎是=]

结果: