android 下载进度展示之 progressBar 简单版

前言

项目开始推进常用控件组件化，基于常用功能，进行二次封装想法。这篇介绍一个progressBar进度状态展示。

早期的 Version 1版本地址： 带进度的progressBar 进入

效果图：

网上关于这类进度展示效果实现方式也很多，比如自定义progressbar，在自定义类中绘制Tag，甚至有用双progressBar，一个展示进度，一个展示Tag中的进度值。该篇并未采用以上两种解决方案。

采用方案介绍：

1.progressBar采用原生控件，不进行自定义是为了，不人为增加维护难度。
2.Tag同样是系统原声Textview。

Xml布局样式：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="15dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/activity_pdfload_tvProgress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:background="@mipmap/pdf_load_progress"
        android:gravity="center"
        android:paddingBottom="5dp"
        android:text="0%"
        android:textColor="#ffffff"
        android:textSize="13sp" />

    <ProgressBar
        android:id="@+id/activity_pdfload_progressBar"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:layout_gravity="center"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:background="@drawable/progress_layer_bg"
        android:max="100"
        android:progressDrawable="@drawable/progress_layer" />
</LinearLayout>

3.Tag和progressBar 联动是如何实现的？肯定使用动态调整Tag偏移量方式。

技术点难点：

    1.Tag中间位置始终和当前进度对应，不能pregress=50，Tag便宜量已经超出物流屏幕，看不到了。
    2.需要控制Tag起始位置=progress 0位置，终止位置=progress 100位置。

看草图：（手稿勿喷）

1.progressBarWIth=ScreenWIth-Tag.leftMargin+TagRightMargin+(TagWith/2)+(TagWith/2)

2.TagOffSet = TagLeftMargin+(progress * (progressBarWith/100f));

贴代码：

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:layout_marginTop="150dp"
    android:background="#f6f6f6"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="15dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/activity_pdfload_tvProgress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:background="@mipmap/pdf_load_progress"
            android:gravity="center"
            android:paddingBottom="5dp"
            android:text="0%"
            android:textColor="#ffffff"
            android:textSize="13sp" />

        <ProgressBar
            android:id="@+id/activity_pdfload_progressBar"
            style="@style/Widget.AppCompat.ProgressBar.Horizontal"
            android:layout_width="match_parent"
            android:layout_height="5dp"
            android:layout_gravity="center"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:background="@drawable/progress_layer_bg"
            android:max="100"
            android:progressDrawable="@drawable/progress_layer" />
    </LinearLayout>

    <TextView
        android:id="@+id/activity_pdfload_tvContent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Downloading..."
        android:textColor="#666666"
        android:textSize="16sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="btnStart"
        android:text="start" />


</LinearLayout>

实现源码：

package beijing.nuoyuan.com.viewsample;

import android.content.Context;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v4.app.FragmentActivity;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.ProgressBar;
import android.widget.TextView;

public class MainActivity extends FragmentActivity {

    private static int[] screenPx;
    private TextView txtTagProgress;
    private ProgressBar progressBar;
    private int progressBarWidth;
    private int count = 0;


    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {

            if (count <= 100) {
                progressBar.setProgress(msg.what);
                txtTagProgress.setText(count + "%");
                txtTagProgress.setX(tagOffLeftWidth + (count * (progressBarWidth / 100f)));
                progressValue.setText((count * (progressBarWidth / 100f) + " / " + progressBarWidth));
                Message message = Message.obtain();
                message.what = ++count;
                handler.sendMessage(message);
            }
        }
    };
    private int tagOffLeftWidth;
    private int tagOffRightWidth;
    private TextView progressValue;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        txtTagProgress = (TextView) findViewById(R.id.activity_pdfload_tvProgress);
        progressBar = (ProgressBar) findViewById(R.id.activity_pdfload_progressBar);
        progressValue = (TextView) findViewById(R.id.activity_pdfload_tvContent);

        txtTagProgress.post(new Runnable() {
            @Override
            public void run() {
                initData();
            }
        });


    }

    @Override
    protected void onResume() {
        super.onResume();

    }


    private void initData() {
        tagOffLeftWidth = (int) getResources().getDimension(R.dimen.with_15);
        tagOffRightWidth = (int) getResources().getDimension(R.dimen.with_15);
        progressBarWidth = getScreenPx(this)[0] - (txtTagProgress.getWidth() / 2 + txtTagProgress.getWidth() / 2 + tagOffLeftWidth + tagOffRightWidth);
        ViewGroup.LayoutParams layoutParams = progressBar.getLayoutParams();
        layoutParams.width = progressBarWidth;
        progressBar.setLayoutParams(layoutParams);
    }

    public void btnStart(View view) {
        count = 0;
        handler.postAtTime(new Runnable() {
            @Override
            public void run() {
                Message message = Message.obtain();
                message.what = ++count;
                handler.sendMessage(message);
            }
        }, 500);
    }

    // 获取屏幕高度和宽度
    public static int[] getScreenPx(Context context) {
        if (screenPx == null) {
            DisplayMetrics metric = new DisplayMetrics();
            WindowManager mgr = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
            mgr.getDefaultDisplay().getMetrics(metric);
            screenPx = new int[]{metric.widthPixels, metric.heightPixels};
        }
        return screenPx;
    }


}

progress_layer 渐变样式

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="3dp"/>
                <gradient
                    android:endColor="#FF8F00"
                    android:startColor="#FFC200"/>
            </shape>
        </clip>
    </item>
</layer-list>

progress_layer_bg

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/progress">
        <shape>
            <corners android:radius="3dp"/>
            <gradient
                android:endColor="#ffffff"
                android:startColor="#ffffff"/>
        </shape>
    </item>
</layer-list>

之前写了个版本，偏移量不准确，原因是因为 progress的控制和Tag 偏移量是分开算的，这个版本优化了，progressBar和Tag在一起参与计算。

设置偏移量不止可以用setX（），其他View api同样也可以起到该效果。请自行尝试，如果有什么问题可以评论

---

Demo下载地址 ：链接：http://pan.baidu.com/s/1gfCIiVD 密码：qcjt