android自定义 ProgressBar(继承自View)
github上已经有如此多漂亮的progressbar,可还是满足不了美工MM的胃口,无奈只得根据美工的需求,自定义一个符合要求的progrssbar了,美工给的效果图如下:
好看是好看,还要求上面指示器的颜色随着进度去改变,上网找了一番还真没有发现完全符合要求的,只好自己想办法了。
思路:1.肯定的继承View或者progressbar去重写,由于我对progressbar的源码不太熟悉,就继承View开始自定义。继承progressbar一定可以更加轻松的实现,应为基本只需重写onDraw()方法即可。
2.就是重写 View的onDraw(), onMeasure(),onDetachedFromWindow(),onTouchEvent() 等若干方法。
思路就这么点,下面先看最终效果:
模拟器中的圆角度数有点太园了,用的时候可以调整下。
源码如下:
package com.example.demo;import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;
import android.view.WindowManager;/*** @author rzq* @function 风险指数标示View**/
public class IndiactorView extends View {/*** 公共部分*/private static final int MAX = 100;private static final int ROUND_DEGREE = 8;private static final int[] cursorColors = new int[] { R.color.color_7ea1de,R.color.color_7aa7d6, R.color.color_73adcd, R.color.color_6cb4c4,R.color.color_66bbba, R.color.color_63c6a8, R.color.color_63cd99,R.color.color_6bce90, R.color.color_7dce8a, R.color.color_96cc84,R.color.color_b2c97d, R.color.color_d3c477, R.color.color_e9be72,R.color.color_fab76d, R.color.color_ffae68, R.color.color_ff9c60,R.color.color_f87653, R.color.color_ff8a5a, R.color.color_f0674e,R.color.color_e85548 };private Context mContext;private Resources res;private Paint mPaint;private DisplayMetrics dm;/*** resource*/private Bitmap bitmapProgress;private Bitmap bitmapIndictor;/*** 进度条宽高,坐标*/private float bitmapProgressWidth, bitmapProgressHeight;private float bitmapProgressX, bitmapProgressY;private float bitmapIndictorWidth, bitmapIndictorHeight;/*** 手机屏幕宽高*/private int screenHeight, screenWidth;/*** 指示矩形的宽高*/private int rectWidth;private int rectHeight;/*** 风险指数内容*/private int cursorPosition = 0;private float precent = 0;private String drawText = "0/100";public IndiactorView(Context context, AttributeSet attrs) {super(context, attrs);this.mContext = context;this.res = getResources();initView();}private void initView() {mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);dm = new DisplayMetrics();WindowManager wm = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE);wm.getDefaultDisplay().getMetrics(dm);screenWidth = dm.widthPixels;screenHeight = dm.heightPixels;rectWidth = dip2px(47);rectHeight = dip2px(25);bitmapProgress = BitmapFactory.decodeResource(res,R.drawable.icon_indictor);bitmapIndictor = BitmapFactory.decodeResource(res, R.drawable.san_jiao);bitmapProgressWidth = bitmapProgress.getWidth();bitmapProgressHeight = bitmapProgress.getHeight();bitmapIndictorWidth = bitmapIndictor.getWidth();bitmapIndictorHeight = bitmapIndictor.getHeight();bitmapProgressX = (screenWidth - bitmapProgressWidth) / 2;bitmapProgressY = rectHeight + bitmapIndictorHeight;}/*** 更新游标位置* * @param position*/public void setPosition(int position) {cursorPosition = position;precent = (position * bitmapProgressWidth) / MAX;drawText = new StringBuilder().append(position).append("/100").toString();/*** 还要根据position设置paint颜色*/int offset = position / 5;if (offset == 20) {offset = offset - 1;}mPaint.setColor(res.getColor(cursorColors[offset]));invalidate();}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {int viewHeight = (int) (bitmapIndictorHeight + bitmapProgressHeight + rectHeight);setMeasuredDimension((int) screenWidth, viewHeight);}@Overridepublic boolean onTouchEvent(MotionEvent event) {return super.onTouchEvent(event);}@Overrideprotected void onDraw(Canvas canvas) {/*** 游标当前X坐标*/float cursorX = (cursorPosition > 0) ? (bitmapProgressX + precent - bitmapIndictorWidth / 2): (bitmapProgressX + precent);canvas.drawBitmap(bitmapProgress, bitmapProgressX, bitmapProgressY,null);canvas.drawBitmap(bitmapIndictor, cursorX, rectHeight, null);/*** 边界判断,防止超出屏幕*/if (cursorX + rectWidth >= screenWidth) {cursorX = cursorX - rectWidth + bitmapIndictorWidth;}RectF rect = new RectF(cursorX, 0, cursorX + rectWidth, rectHeight - 1);canvas.drawRoundRect(rect, ROUND_DEGREE, ROUND_DEGREE, mPaint);mPaint.setColor(Color.WHITE);mPaint.setTextSize(dip2px(11));float cursorTextX = (rectWidth - mPaint.measureText(drawText)) / 2;float cursorTextY = ((rectHeight / 2) - ((mPaint.descent() + mPaint.ascent()) / 2));canvas.drawText(drawText, cursorX + cursorTextX, cursorTextY, mPaint);}/*** 释放资源,竟可能少消耗内存*/@Overrideprotected void onDetachedFromWindow() {mContext = null;res = null;mPaint = null;dm = null;bitmapIndictor = null;bitmapProgress = null;}/*** 根据手机的分辨率从 dp 的单位 转成为 px(像素)*/private int dip2px(float dpValue) {return (int) (dpValue * dm.density + 0.5f);}
}
View使用:
package com.example.demo;import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;public class MainActivity extends Activity {private IndiactorView indictorView;private int i = 0;private Handler handler = new Handler() {public void handleMessage(Message msg) {indictorView.setPosition(i++);if (i <= 100) {this.sendEmptyMessageDelayed(0x01, 500);}};};@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);indictorView = (IndiactorView) findViewById(R.id.indictor_view);indictorView.setPosition(i);handler.sendEmptyMessageDelayed(0x01, 500);}}
注释的已经很详细了,就不在啰嗦的解释代码了,源码及如何使用DEMO会在最后给出。
扩展:对指示器添加触摸事件处理,可以将此progressbar扩站位一个带指示器的SeekBar,待后续完成后给出。有兴趣的也可以自行扩展。
DEMO下载
android自定义 ProgressBar(继承自View)相关推荐
- android 自定义背景园,Android 自定义ProgressBar 进度条颜色和背景颜色
Android 自定义ProgressBar 进度条颜色和背景颜色 首先,在drawable目录下新建文件 personal_center_level_progress_bg.xmlandroid a ...
- Android自定义仿Siri曲线View
Android自定义仿Siri曲线View 效果图 代码实现 仔细观察效果图可以发现,波浪其实是由4条贝塞尔曲线组成的,可以在自定义View的onDraw函数中,用Path.quadTo函数画出4条曲 ...
- android 自定义progressbar demo,Android自定义View――动态ProgressBar之模仿360加速球
在之前一篇文章中我们讲解了三种ProgressBar的做法,详见-><Android 自定义View--自定义ProgressBar >.这一节中我们模仿360加速球制作一个动态Pr ...
- android自定义progressbar 图片,自定义ProgressBar(自定义View和ClipDrawable)
开发中经常需要自定义ProgressBar,这里用了自定义View和ClipDrawable实现简单的ProgressBar 自定义View效果: public class CustomProgres ...
- Android 自定义ProgressBar 实现进度圆环
实现的效果如下图 实现效果图demo 的地址 代码很简单自定义ProgressBar 下面直接列举下代码 progressBarView 的代码如下 public class ProgressBarV ...
- Android自定义progressBar
通过继承系统ProgressBar实现 效果图 实现 HorizontalProgressBarWithNumber 自定义属性 <?xml version="1.0" en ...
- android自定义progressbar样式,Android开发中如何实现自定义ProgressBar的样式
Android开发中如何实现自定义ProgressBar的样式 发布时间:2020-11-20 16:08:10 来源:亿速云 阅读:294 作者:Leah Android开发中如何实现自定义Prog ...
- android组件什么时候加载到r文件,Android自定义加载loading view动画组件
我写写使用步骤 自定义view(CircleProgress )的代码 package com.hysmarthotel.view; import com.hysmarthotel.roomcontr ...
- android 自定义ViewGroup和对view进行切图动画实现滑动菜单SlidingMenu[转]
http://blog.csdn.net/jj120522/article/details/8095852 示意图就不展示了,和上一节的一样,滑动菜单SlidingMenu效果如何大家都比较熟悉,在这 ...
- android自定义进度条渐变色View,不使用任何图片资源
最近在公司,项目不是很忙了,偶尔看见一个兄台在CSDN求助,帮忙要一个自定义的渐变色进度条,我当时看了一下进度条,感觉挺漂亮的,就尝试的去自定义view实现了一个,废话不说,先上图吧! 这个自 ...
最新文章
- ASP.net的身份验证方式有哪些?分别是什么原理?
- ajax与HTML5 history pushState/replaceState实例
- CentOS配置启动ssh与开机自启
- OC中使用 static 、 extern、 const使用
- Linux命令之su -- 用于切换当前用户身份到其他用户身份
- FZU 2124 吃豆人 bfs
- 程序猿怎样的生活方式才能兼顾工作、家庭和自我提升
- 5·19网络故障:DNS服务器被攻击
- [导入]C#做的一个加密/解密的类
- 如何在 macOS Monterey 中管理应用程序和联系人的 Mac 通知?
- 《计算机操作系统》练习题
- gomod下导入模块的方法
- 创建MyOffice项目
- java spring boot2 springMVC thymeleaf 整合案例
- iOS申请真机调试证书 图文详解
- 你知道怎么用STM32控制舵机吗?
- 线性代数matlab的心得体会,关于线性代数心得体会
- ANSYS 有限元分析 几何建模
- python分析微博数据中心_数据分析如何驱动社交媒体营运
- 这表白代码让我虎躯一震!
热门文章
- 实战:基于服务端开发和前后端分离开发区别
- Javascript:ES6语法简述
- Cesium:实现动态画点、线并测距
- 程序开发中常用的密码学家的算法推荐清单
- 使用缓冲字符流BufferedReader和文件字符流FileReader读取文本文件
- 点云质量评估_点云配准中常用的评价指标
- 算法笔记_面试题_数组/链表/跳表/各种数据结构复杂度对比
- 哈夫曼编码(Huffman Coding) cpp完整代码实现 详细注释 ASCII码表
- EFM (Explicit Factor Models)显因子模型
- 「学术放养」和「认真负责」并不冲突,芝大CS博士谈从导师身上学到的几件事...