Android零基础入门第52节:自定义酷炫进度条

  1. 云栖社区>
  2. 博客>
  3. 正文

Android零基础入门第52节:自定义酷炫进度条

杰克.陈 2017-09-08 14:58:00 浏览1254
展开阅读全文
原文:Android零基础入门第52节:自定义酷炫进度条

   Android系统默认的ProgressBar往往都不能满足实际开发需要,一般都会开发者自定义ProgressBar。

    在Android开发中,自定义ProgressBar一般有三种思路来完成。

 

 

一、在系统进度条基础上优化

 

    首先来看一下style="@android:style/Widget.ProgressBar.Horizontal"的源码。鼠标移动到style属性值上,按住Ctrl键,鼠标左键点击即可打开对应资源文件。

    当然也可以直接找到源码文件直接打开进行查看,本地相对路径为sdk\platforms\android-25\data\res\values\styles.xml。打开后可以看到源码如下:

    从上述代码可以看到,水平进度条的核心就是android:progressDrawable,接着继续去寻找progress_horizontal的源码(本地相对路径为sdk\platforms\android-25\data\res\drawable\progress_horizontal.xml),如下:

    从上述代码可以发现,progress_horizontal一共包括3个item,分别为background、secondProgress、progress,看名字就能知道其大概作用,其中我们比较关心的应该是后两个。

    其实把这个文件copy一份到自己的项目下,就可以随心所欲的修改shape属性的圆角、渐变等,实现我们想要的效果了。

    由于此处我们还没有学习Drawable资源,所以这里先给大家介绍一下概念,关于具体如何操作可以等学了Drawable资源后,再回过头来自定义ProgressBar。欢迎关注微信公众分享达人秀ShareExpert获取第一手教程,也可添加小编微信jinwenyu2010,然后拽入Android零基础入门技术讨论微信群一同学习。

 

 

二、使用动画来代替进度条

 

    使用动画来替代进度条,其实就是使用一套连续图片,形成一个帧动画,当需要进度图的时候,让动画可见,不需要的时候让动画不可见即可。

     继续使用WidgetSample工程的advancedviewsample模块,首先在drawable目录下准备一组连续的图片,然后在res/drawable/目录下定义一个myprogressbar.xml的资源文件,代码如下:  

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
                android:oneshot="false">
    <item android:drawable="@drawable/loading_01" android:duration="200" />
    <item android:drawable="@drawable/loading_02" android:duration="200" />
    <item android:drawable="@drawable/loading_03" android:duration="200" />
    <item android:drawable="@drawable/loading_04" android:duration="200" />
    <item android:drawable="@drawable/loading_05" android:duration="200" />
    <item android:drawable="@drawable/loading_06" android:duration="200" />
    <item android:drawable="@drawable/loading_07" android:duration="200" />
    <item android:drawable="@drawable/loading_08" android:duration="200" />
    <item android:drawable="@drawable/loading_09" android:duration="200" />
    <item android:drawable="@drawable/loading_10" android:duration="200" />
    <item android:drawable="@drawable/loading_11" android:duration="200" />
    <item android:drawable="@drawable/loading_12" android:duration="200" />
</animation-list>

    关于上述代码的具体意义会在Android动画进行讲解,此处大家知道如何操作即可。

    接着新建一个布局文件myprogressbar_layout.xml,里面仅仅有一个ImageView即可,用于显示进度条,把src设置为上述drawable资源即可,代码如下:

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

    <ImageView
        android:id="@+id/mypg_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:src="@drawable/myprogressbar"/>

</RelativeLayout>

    新建MyProgressbarActivity.java文件,加载上面新建的布局文件,具体代码如下:

package com.jinyu.cqkxzsxy.android.advancedviewsample;

import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;

public class MyProgressbarActivity extends AppCompatActivity {
    private ImageView mProgressbarImg = null;
    private AnimationDrawable mProgressAnimation = null;

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

        mProgressbarImg = (ImageView) findViewById(R.id.mypg_img);
        mProgressAnimation = (AnimationDrawable) mProgressbarImg.getDrawable();

        // 启动动画
        mProgressbarImg.postDelayed(new Runnable() {
            @Override
            public void run() {
                // 启动动画
                mProgressAnimation.start();
            }
        }, 100);
    }
}

    这里只是简单启动上述定义的动画,在开发中你可以根据需要显示和隐藏即可。

    修改启动的Activity,运行可以看到如下图所示效果。

 

 

三、通过自定义View来实现进度条

 

    使用动画来完成进度条实际上比较巧妙,但还是不能满足实际开发需要,那么最强大的自定义ProgressBar就是重写View来实现了,可以定义出任何需要的进度条。

    如定义一个CircleProgressBar类,继承View,并重写其方法,示例代码如下:

package com.jinyu.cqkxzsxy.android.advancedviewsample.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

/**
 * @创建者 鑫鱻
 * @描述 Android零基础入门到精通系列教程,欢迎关注微信公众号ShareExpert
 */
public class CircleProgressBar extends View {
    private Paint mBackPaint;
    private Paint mFrontPaint;
    private Paint mTextPaint;
    private float mStrokeWidth = 50;
    private float mHalfStrokeWidth = mStrokeWidth / 2;
    private float mRadius = 200;
    private RectF mRect;
    private int mProgress = 0;
    private int mTargetProgress = 90;
    private int mMax = 100;
    private int mWidth;
    private int mHeight;

    public CircleProgressBar(Context context) {
        super(context);
        init();
    }

    public CircleProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    // 完成相关参数初始化
    private void init() {
        mBackPaint = new Paint();
        mBackPaint.setColor(Color.WHITE);
        mBackPaint.setAntiAlias(true);
        mBackPaint.setStyle(Paint.Style.STROKE);
        mBackPaint.setStrokeWidth(mStrokeWidth);
        mFrontPaint = new Paint();
        mFrontPaint.setColor(Color.GREEN);
        mFrontPaint.setAntiAlias(true);
        mFrontPaint.setStyle(Paint.Style.STROKE);
        mFrontPaint.setStrokeWidth(mStrokeWidth);
        mTextPaint = new Paint();
        mTextPaint.setColor(Color.GREEN);
        mTextPaint.setAntiAlias(true);
        mTextPaint.setTextSize(80);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
    }

    // 重写测量大小的onMeasure方法和绘制View的核心方法onDraw()
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWidth = getRealSize(widthMeasureSpec);
        mHeight = getRealSize(heightMeasureSpec);
        setMeasuredDimension(mWidth, mHeight);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        initRect();
        float angle = mProgress / (float) mMax * 360;
        canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius, mBackPaint);
        canvas.drawArc(mRect, -90, angle, false, mFrontPaint);
        canvas.drawText(mProgress + "%", mWidth / 2 + mHalfStrokeWidth,
                mHeight / 2 + mHalfStrokeWidth, mTextPaint);
        if (mProgress < mTargetProgress) {
            mProgress += 1;
            invalidate();
        }
    }

    public int getRealSize(int measureSpec) {
        int result = 1;
        int mode = MeasureSpec.getMode(measureSpec);
        int size = MeasureSpec.getSize(measureSpec);
        if (mode == MeasureSpec.AT_MOST || mode == MeasureSpec.UNSPECIFIED) {
            //自己计算
            result = (int) (mRadius * 2 + mStrokeWidth);
        } else {
            result = size;
        }
        return result;
    }

    private void initRect() {
        if (mRect == null) {
            mRect = new RectF();
            int viewSize = (int) (mRadius * 2);
            int left = (mWidth - viewSize) / 2;
            int top = (mHeight - viewSize) / 2;
            int right = left + viewSize;
            int bottom = top + viewSize;
            mRect.set(left, top, right, bottom);
        }
    }
}

    关于上述代码的具体含义,此处不理解没关系,可以等学了Android绘图后再回过头来进行学习。

    然后新建一个布局文件circleprogressbar_layout.xml,使用上述的自定义进度条类,代码如下:

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

    <com.jinyu.cqkxzsxy.android.advancedviewsample.view.CircleProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

    修改MainActivity.java里面加载的布局文件,运行后其效果如下图所示。

    如果已经学会本期里面提及的内容,那就可以放手去打造属于你自己的酷炫进度条了。如果不会也没关系,这里只做了解,等后期学完后再来回顾即可。

 

    今天就先到这里,如果有问题欢迎留言一起探讨,也欢迎加入Android零基础入门技术讨论微信群,共同成长!

   此文章版权为微信公众号分享达人秀(ShareExpert)——鑫鱻所有,若需转载请联系作者授权,特此声明!

 

往期总结分享:

Android零基础入门第1节:Android的前世今生

Android零基础入门第2节:Android 系统架构和应用组件那些事

Android零基础入门第3节:带你一起来聊一聊Android开发环境

Android零基础入门第4节:正确安装和配置JDK, 高富帅养成第一招

Android零基础入门第5节:善用ADT Bundle, 轻松邂逅女神

Android零基础入门第6节:配置优化SDK Manager, 正式约会女神

Android零基础入门第7节:搞定Android模拟器,开启甜蜜之旅

Android零基础入门第8节:HelloWorld,我的第一趟旅程出发点

Android零基础入门第9节:Android应用实战,不懂代码也可以开发

Android零基础入门第10节:开发IDE大升级,终于迎来了Android Studio

Android零基础入门第11节:简单几步带你飞,运行Android Studio工程

Android零基础入门第12节:熟悉Android Studio界面,开始装逼卖萌

Android零基础入门第13节:Android Studio配置优化,打造开发利器

Android零基础入门第14节:使用高速Genymotion,跨入火箭时代

Android零基础入门第15节:掌握Android Studio项目结构,扬帆起航

Android零基础入门第16节:Android用户界面开发概述

Android零基础入门第17节:文本框TextView

Android零基础入门第18节:输入框EditText

Android零基础入门第19节:按钮Button

Android零基础入门第20节:复选框CheckBox和单选按钮RadioButton

Android零基础入门第21节:开关组件ToggleButton和Switch

Android零基础入门第22节:图像视图ImageView

Android零基础入门第23节:图像按钮ImageButton和缩放按钮ZoomButton

Android零基础入门第24节:自定义View简单使用,打造属于你的控件

Android零基础入门第25节:简单且最常用的LinearLayout线性布局

Android零基础入门第26节:两种对齐方式,layout_gravity和gravity大不同

Android零基础入门第27节:正确使用padding和margin

Android零基础入门第28节:轻松掌握RelativeLayout相对布局

Android零基础入门第29节:善用TableLayout表格布局

Android零基础入门第30节:两分钟掌握FrameLayout帧布局

Android零基础入门第31节:少用的AbsoluteLayout绝对布局

Android零基础入门第32节:新推出的GridLayout网格布局

Android零基础入门第33节:Android事件处理概述

Android零基础入门第34节:Android中基于监听的事件处理

Android零基础入门第35节:Android中基于回调的事件处理

Android零基础入门第36节:Android系统事件的处理

Android零基础入门第37节:初识ListView

Android零基础入门第38节:初识Adapter

Android零基础入门第39节:ListActivity和自定义列表项

Android零基础入门第40节:自定义ArrayAdapter

Android零基础入门第41节:使用SimpleAdapter

Android零基础入门第42节:自定义BaseAdapter

Android零基础入门第43节:ListView优化和列表首尾使用

Android零基础入门第44节:ListView数据动态更新

Android零基础入门第45节:网格视图GridView

Android零基础入门第46节:列表选项框Spinner

Android零基础入门第47节:自动完成文本框AutoCompleteTextView

Android零基础入门第48节:可折叠列表ExpandableListView

Android零基础入门第49节:AdapterViewFlipper图片轮播

Android零基础入门第50节:StackView卡片堆叠

Android零基础入门第51节:进度条ProgressBar

网友评论

登录后评论
0/500
评论
杰克.陈
+ 关注