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