美文网首页Android知识自定义控件
Android源码自带的ProgressBar的总结与扩展——自

Android源码自带的ProgressBar的总结与扩展——自

作者: 炎之铠 | 来源:发表于2017-05-16 10:01 被阅读2387次

    出处
    炎之铠邮箱:yanzhikai_yjk@qq.com
    本文原创,转载请注明本出处!

    介绍

    对于进度条ProgressBar,在很多场景都会应用到它,最近项目要用到进度条,在网上搜了很多资料,发现Android源码自带的ProgressBar是一个好东西,只要有好看的UI图片,就可以通过ProgressBar的自定义样式来实现一些好看的进度条,并不一定要重写View来实现。

    学习

    网上很多文章都是写这个,我也不重复写了,不过网上有很多都是重复而且冗余的,所以这里推荐gitbooks里面一篇很详细明了的一系列文章,看了之后就可以明确知道如何利用自定义的样式,直接通过设置XML文件来做出一个漂亮的ProgressBar了。

    补充总结

    那一系列的文章已经很详细地讲解了ProgressBar的自定义使用,功能很强大,但是限制也还是有的:

    • 最大的缺点我觉得就是不能设置文字来显示具体进度了,不过按照我的审美来说也不知道文字该加哪里好,所以到时候还是按需求来定制ProgressBar或者将它封装一下吧(封装这里后面具体介绍)。
    • 还有就是不能实现一些比较复杂的特效。

    总之,就是要按照需求想法来,如果自定义样式可以实现的,就没必要自己重写一个ProgressBar了,弄几张UI图片就完事了。

    扩展——自定义ProgressDialog的实现

    学会了使用ProgressBar,现在来做做它的扩展——做一个ProgressDialog,就是弹出一个带有ProgressBar的Dialog,Android自带的ProgressDialog比较简单,虽然也可以通过setProgressDrawable()的方法来实现进度条的自定义样式,但是也不能解决显示文字的问题,而且弹出一个框出来感觉有点丑。现在我们就来做一下这个自定义的ProgressDialog,先看效果(图片资源是借用上面的文章):


    1. 设置背景为透明

    在XML的styles文件里增加一个透明样式的style

        <style name="transparent_dialog" parent="android:style/Theme.Dialog">
            <item name="android:windowFrame">@null</item>
            <item name="android:windowNoTitle">true</item>
            <item name="android:windowBackground">@android:color/transparent</item>
            <item name="android:windowIsFloating">true</item>
            <item name="android:windowContentOverlay">@null</item>
        </style>
    

    2. 在XML里组装自定义ProgressDialog

    一个Dialog不是一个View,就是相当于一个触发器,当它启动的时候就提醒Activity弹出一个窗口,加载一些View,所以这里定义一个Layout,让Dialog启动的时候可以加载:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/dialog_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@android:color/transparent"
        android:gravity="center"
        android:minHeight="60dp"
        android:minWidth="180dp"
        android:orientation="vertical"
        android:padding="10dp">
    
        <ProgressBar
            android:layout_width="match_parent"
            android:layout_height="160dp"
            android:id="@+id/pb_Circle"
            android:max="100"
            android:progress="22"
            android:indeterminateDrawable="@drawable/progress_indeterminate_gear"
            android:indeterminate="true"
            android:indeterminateBehavior="repeat"
            android:indeterminateDuration="3000"
            />
    
        <TextView
            android:id="@+id/tv_msg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="#03a0ff"
            android:textSize="22sp" />
    
        <TextView
            android:id="@+id/tv_progress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="#26a0ff"
            android:textSize="22sp" />
    </LinearLayout>
    

    这里加了一个ProgressBar和两个TextView,用于显示加载动画和加载进度。

    3.继承Dialog,初始化和配置控件

    主要逻辑就是使用LayoutInflater把前面设置好的布局加载进来,然后设置相应的控件,逻辑非常简单:

    public class CustomProgressDialog extends Dialog {
        private ProgressBar progressBar;
        private TextView tv_msg,tv_progress;
    
    
        public CustomProgressDialog(Context context) {
            //一开始就设置为透明背景
            super(context, R.style.transparent_dialog);
            createLoadingDialog(context);
        }
    
    
        public void createLoadingDialog(final Context context) {
    
            LayoutInflater inflater = LayoutInflater.from(context);
            //得到加载的view
            View v = inflater.inflate(R.layout.custom_dialog_layout, null);
            //加载布局
            LinearLayout layout = (LinearLayout) v.findViewById(R.id.dialog_view);
            progressBar = (ProgressBar) v.findViewById(R.id.pb_Circle);
            tv_msg = (TextView) v.findViewById(R.id.tv_msg);
            tv_progress = (TextView) v.findViewById(R.id.tv_progress);
    
    
    
            //设置不可通过点击外面区域取消
            setCanceledOnTouchOutside(false);
            setOnCancelListener(new OnCancelListener() {
                @Override
                public void onCancel(DialogInterface dialog) {
                    Toast.makeText(context,"加载取消",Toast.LENGTH_SHORT).show();
                }
            });
    
            // 设置布局,设为全屏
            setContentView(layout, new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.MATCH_PARENT,
                    LinearLayout.LayoutParams.MATCH_PARENT));
    
        }
    
        // 设置加载信息
        public void setMessage(String msg){
            tv_msg.setText(msg);
        }
    
        //设置进度条
        public void setProgressBar(ProgressBar progressBar) {
            this.progressBar = progressBar;
        }
    
        //获取进度条
        public ProgressBar getProgressBar() {
            return progressBar;
        }
    
        //设置进度
        public void setProgress(int progress){
            tv_progress.setText(progress*100/progressBar.getMax() + "%");
            progressBar.setProgress(progress);
        }
    }
    

    4.测试

    这里使用Handler做一个定时器来更新ProgressDialog

    public class MainActivity extends AppCompatActivity implements View.OnClickListener{
        private TimeHandler timeHandler = new TimeHandler();
        private Button btn_pd;
        private int progress = 0;
        private CustomProgressDialog progressDialog;
        private String[] MESSAGES = {"加载中","加载中.","加载中..","加载中..."};
    
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            btn_pd = (Button) findViewById(R.id.btn_pd);
            btn_pd.setOnClickListener(this);
            progressDialog = new CustomProgressDialog(this);
            progressDialog.setMessage("加载中");
            timeHandler.sendEmptyMessage(1);
    
        }
    
        @Override
        public void onClick(View v) {
            switch (v.getId()){
                case R.id.btn_pd:
                    showDialog();
                    progress = 0;
                    break;
            }
    
        }
    
        private void showDialog(){
            progressDialog.show();
        }
    
    
    
    
        class TimeHandler extends Handler{
            @Override
            public void handleMessage(Message msg) {
                switch (msg.what){
                    case 1:
                        if (progress < 1000){
                            progress += 20;
                            progressDialog.setProgress(progress);
                            progressDialog.setMessage(MESSAGES[progress / 20 % 4]);
    
                        }else {
                            progress = 0;
                        }
                        sendEmptyMessageDelayed(1,500);
                        break;
    
                }
            }
        }
    }
    

    demo地址

    https://github.com/totond/TestProgressBar

    后话

    前面说过,这个ProgressDialog实际上就是弹出一个窗口,加载一个layout,至于加载什么东西,layout里面都可以自定义,基于这个,我们可以拼凑各种各样的View进去,实现各种各样的效果。
      这里做的Progress只是一个Demo,没有涉及一些属性的封装,使用的时候还需要自己再改善一下。下一篇文章将介绍一个自定义ProgressBar从创建到开源的过程,有兴趣可以看一下。

    相关文章

      网友评论

        本文标题:Android源码自带的ProgressBar的总结与扩展——自

        本文链接:https://www.haomeiwen.com/subject/jfzkxxtx.html