Android 仿支付宝中的余额宝收益进度条

一、 看效果

二、上代码

package com.framework.widget;
import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;
import com.R;
/**
 * @author dahai
 * @ClassName: (仿支付宝) 收益进度条
 * @Description: ${todo}
 * @date ${date} ${time}
 * @email 202491024@qq.com
 * @since $android 进度条
 */
public class ProfitProgerssBar extends View {
 //背景色
 private static final int DEFAULT_BACK_COLOR = Color.parseColor("#ffffff");
 //字的颜色
 private static final int DEFAULT_TEXT_COLOR = Color.parseColor("#ffffff");
 //进度条背景颜色
 private static final int DEFAULT_PROGRESS_COLOR = Color.parseColor("#abacaf");
 //进度条默认的高度
 private static final float DEFAULT_PROGRESS_HEIGHT =120f;
 //文字的大小
 private static final float DEFAULT_TEXT_SIZE = 50;
 /**
  * 收益进度条左右两边margin大小
  */
 private static final int MARGIN_SIZE = 20;
 private Context context;
 /**
  * 背景颜色的画笔
  */
 private Paint backgroundPaint;
 /**
  * 收益进度颜色的画笔
  */
 private Paint progressPaint;
 /**
  * 画文字的画笔
  */
 private Paint textPaint;
 /**
  * 背景的宽度
  */
 private int view_background_width;
 /**
  * 背景的高度
  */
 private float view_background_height = DEFAULT_PROGRESS_HEIGHT;
 /**
  * 日期
  */
 private String date = "2016/12/07";
 /**
  * 描叙(百分比/元)
  */
 private String desc = "2.1234";
 /**
  * 要显示的长度的百分比
  */
 private int progress = 70;
 //进度条颜色
 private int progress_color = DEFAULT_PROGRESS_COLOR;
 //背景色
 private int progress_back_color = DEFAULT_BACK_COLOR;
 //字的颜色
 private int text_color = DEFAULT_TEXT_COLOR;
 //字的大小
 private float TEXT_SIZE = DEFAULT_TEXT_SIZE;
 public ProfitProgerssBar(Context context) {
  super(context);
  initView(context);
 }
 public ProfitProgerssBar(Context context, AttributeSet attrs) {
  super(context, attrs);
  initView(context);
 }
 public ProfitProgerssBar(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  initView(context);
 }
 private void initView(Context context) {
  this.context = context;
  TypedArray typedArray = this.context.obtainStyledAttributes(R.styleable.ProfitProgerssBar);
  progress_back_color = typedArray.getColor(R.styleable.ProfitProgerssBar_progress_backg_color,DEFAULT_BACK_COLOR);
  text_color = typedArray.getColor(R.styleable.ProfitProgerssBar_progress_text_color,DEFAULT_TEXT_COLOR);
  TEXT_SIZE = typedArray.getDimension(R.styleable.ProfitProgerssBar_progress_text_size,DEFAULT_TEXT_SIZE);
  backgroundPaint = new Paint();
  backgroundPaint.setStrokeWidth(10);
  backgroundPaint.setColor(progress_back_color);
  backgroundPaint.setDither(true);
  backgroundPaint.setAntiAlias(true);
  progressPaint = new Paint();
  progressPaint.setStrokeWidth(10);
  progressPaint.setDither(true);
  progressPaint.setAntiAlias(true);
  textPaint = new Paint();
  textPaint.setStrokeWidth(10);
  textPaint.setDither(true);
  textPaint.setAntiAlias(true);
  textPaint.setTextSize(TEXT_SIZE);
  DisplayMetrics d = new DisplayMetrics();
  ((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(d);
  view_background_width = d.widthPixels;
 }
 /**
  * 初始化 进度条
  * @param date
  * @param desc
  * @param progress
  * @param progressColor
  */
 public void init(String date,String desc,int progress,int progressColor){
  this.date = date;
  this.desc = desc;
  this.progress = progress;
  this.progress_color = progressColor;
 }
 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  view_background_height = this.getMeasuredHeight();
  RectF r = new RectF();
  r.left = 0;
  r.top = 0;
  r.right = view_background_width;
  r.bottom = view_background_height;////------------------------
  canvas.drawRect(r, backgroundPaint);
  RectF r1 = new RectF();
  r1.left = 0;
  r1.top = 0;
  r1.right = view_background_width * progress / 100;
  r1.bottom = view_background_height;////------------------------
  progressPaint.setColor(progress_color);
  canvas.drawRect(r1, progressPaint);
  textPaint.setColor(text_color);
  Rect r2 = new Rect();
  textPaint.getTextBounds(date,0,date.length(),r2);
  canvas.drawText(date, MARGIN_SIZE, (view_background_height-r2.top)/2, textPaint);//日期
  Rect r3 = new Rect();
  textPaint.getTextBounds(desc,0,desc.length(),r3);
  if(progress>95&&progress<100){
   canvas.drawText(desc, r1.right-textPaint.measureText(desc)-MARGIN_SIZE-30,(view_background_height-r3.top)/2, textPaint);
  }else if(progress>=100) {
   canvas.drawText(desc, r1.right-textPaint.measureText(desc)-MARGIN_SIZE-45,(view_background_height-r3.top)/2, textPaint);
  }else {
   canvas.drawText(desc, r1.right - textPaint.measureText(desc) - MARGIN_SIZE, (view_background_height - r3.top) / 2, textPaint);
  }
  invalidate();
 }
}

三、

<com.framework.widget.ProfitProgerssBar
 android:layout_width="match_parent"
 android:layout_height="35dp"
 android:layout_marginLeft="10dp"
 android:layout_marginRight="10dp"
 android:layout_marginTop="10dp"
 app:progress_back_color="@color/white"
 app:progress_text_color="@color/white"
 app:progress_text_size="14dp"
 android:id="@+id/profitProgerssBar"
 />
<declare-styleable name="ProfitProgerssBar">
 <attr name="progress_backg_color" format="color"/>
 <attr name="progress_text_color" format="color"/>
 <attr name="progress_text_size" format="dimension"/>
</declare-styleable>

以上所述是小编给大家介绍的Android 仿支付宝中的余额宝收益进度条,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Android自定义漂亮的圆形进度条

    这几天对Android中实现画圆弧及圆弧效果中所实现的效果进行了修改,改为进度圆心进度条,效果如图所示 TasksCompletedView.java 代码如下 import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.RectF; impo

  • Android 自定义view和属性动画实现充电进度条效果

    近期项目中需要使用到一种类似手机电池充电进度的动画效果,以前没学属性动画的时候,是用图片+定时器的方式来完成的,最近一直在学习动画这一块,再加上复习一下自定义view的相关知识点,所以打算用属性动画和自定义view的方式来完成这个功能,将它开源出来,供有需要的人了解一下相关的内容. 本次实现的功能类似下面的效果: 接下来便详细解析一下如何完成这个功能,了解其中的原理,这样就能举一反三,实现其他类似的动画效果了. 详细代码请看大屏幕 https://github.com/crazyandcoder

  • Android自定义View实现带数字的进度条实例代码

    第一步.效果展示 图1.蓝色的进度条 图2.红色的进度条 图3.多条颜色不同的进度条 图4.多条颜色不同的进度条 第二步.自定义ProgressBar实现带数字的进度条 0.项目结构 如上图所示:library项目为自定义的带数字的进度条NumberProgressBar的具体实现,demo项目为示例项目以工程依赖的方式引用library项目,然后使用自定义的带数字的进度条NumberProgressBar来做展示 如上图所示:自定义的带数字的进度条的library项目的结构图 如上图所示:de

  • android自定义进度条渐变色View的实例代码

    最近在公司,项目不是很忙了,偶尔看见一个兄台在CSDN求助,帮忙要一个自定义的渐变色进度条,我当时看了一下进度条,感觉挺漂亮的,就尝试的去自定义view实现了一个,废话不说,先上图吧! 这个自定义的view,完全脱离了android自带的ProgressView,并且没使用一张图片,这样就能更好的降低程序代码上的耦合性! 下面我贴出代码  ,大概讲解一下实现思路吧! 复制代码 代码如下: package com.spring.progressview; import android.conten

  • Android自定义带水滴的进度条样式(带渐变色效果)

    一.直接看效果 二.直接上代码 1.自定义控件部分 package com.susan.project.myapplication; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.grap

  • Android自定义View之圆形进度条式按钮

    介绍 今天上班的时候有个哥们问我怎么去实现一个按钮式的进度条,先来看看他需要实现的效果图. 和普通的圆形进度条类似,只是中间的地方有两个状态表示,未开始,暂停状态.而且他说圆形进度的功能已经实现了.那么我们只需要对中间的两个状态做处理就行了. 先来看看实现的效果图: 上面说了我们只需要处理中间状态的变化就可以了,对于进度的处理直接使用了弘洋文章中实现: http://blog.csdn.net/lmj623565791/article/details/43371299 下面开始具体实现. 具体实

  • Android view自定义实现动态进度条

    Android  自定义view实现动态进度条 效果图: 这个是看了梁肖的demo,根据他的思路自己写了一个,但是我写的这个貌似计算还是有些问题,从上面的图就可以看出来,左侧.顶部.右侧的线会有被截掉的部分,有懂得希望能给说一下,改进一下,这个过程还是有点曲折的,不过还是觉得收获挺多的.比如通动画来进行动态的展示(之前做的都是通过Handler进行更新的所以现在换一种思路觉得特别好),还有圆弧的起止角度,矩形区域的计算等!关于绘制我们可以循序渐进,比如最开始先画圆,然后再画周围的线,最后设置动画

  • Android自定义View基础开发之图片加载进度条

    学会了Paint,Canvas的基本用法之后,我们就可以动手开始实践了,先写个简单的图片加载进度条看看. 按照惯例,先看效果图,再决定要不要往下看: 既然看到这里了,应该是想了解这个图片加载进度条了,我们先看具体用法,再看自定义View的实现: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.co

  • Android实现环形进度条代码

    本文参考借鉴:http://www.jb51.net/article/102983.htm 先上效果图: 自定义控件:AttendanceProgressBar 代码如下: public class AttendanceProgressBar extends View { // 画圆环底部的画笔 private Paint mCirclePaint; // 画圆环的画笔 private Paint mRingPaint; // 画字体的画笔 private Paint mTextPaint; /

  • Android实现环形进度条的实例

    Android实现环形进度条的效果图如下: 自定义控件:AttendanceProgressBar 代码如下: public class AttendanceProgressBar extends View { // 画圆环底部的画笔 private Paint mCirclePaint; // 画圆环的画笔 private Paint mRingPaint; // 画字体的画笔 private Paint mTextPaint; // 圆形颜色 private int mCircleColor

  • Android编程基于自定义View实现绚丽的圆形进度条功能示例

    本文实例讲述了Android编程基于自定义View实现绚丽的圆形进度条功能.分享给大家供大家参考,具体如下: 本文包含两个组件,首先上效果图: 1.ProgressBarView1(支持拖动): 2.ProgressBarView2(不同进度值显示不同颜色,不支持拖拽):   代码不多,注释也比较详细,全部贴上了: (一)ProgressBarView1: /** * 自定义绚丽的ProgressBar. */ public class ProgressBarView1 extends View

  • Android自定义View实现钟摆效果进度条PendulumView

    在网上看到了一个IOS组件PendulumView,实现了钟摆的动画效果.由于原生的进度条确实是不好看,所以想可以自定义View实现这样的效果,以后也可以用于加载页面的进度条. 废话不多说,先上效果图 底部黑边是录制时不小心录上的,可以忽略. 既然是自定义View我们就按标准的流程来,第一步,自定义属性 自定义属性 建立属性文件 在Android项目的res->values目录下新建一个attrs.xml文件,文件内容如下: <?xml version="1.0" enco

随机推荐