开发的第32天-android自定义控件之 自己画个进度条

2019-3-13

标题安卓背词客开发日记

今天要实现的功能是将用户背单词的数据可视化 ，如下图所示。

解决办法

自己使用paint和canvas进行绘制。
下面说说绘制的流程

1. 得到屏幕分辨率 得到父容器的宽高
2. 分析自己的控件的位置信息
3. 开始绘制图形
4. 引用到布局文件中

使用这句代码可以得到屏幕的分辨率

  mScale = context.getResources().getDisplayMetrics().density;//得到系统分辨率

这就相当于有了我们平时写布局的dp 或xp的那种单位 ，比如说 10*mScale 就和10dp差不多。但是单位不相同，只是类比下。
用下面的函数得到父容器的宽和高

	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		super.onSizeChanged(w, h, oldw, oldh);//当形状改变时，就是我们自定义父容器大小时
		weight =  w;
		height =  h;
	}

第一步完成 开始第二步

分析自己的控件的位置信息

因此我们设置坐标为
left =0
right = X
top = 父级高度
bottom= 0

下面清楚了结构布局，开始画了，第三步开始

protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.onDraw(canvas);
		float min_weight = (weight) /100;//将进度条分等级，我是等分100份	
		int left = (int) (0);//设置左边坐标	
		int right = left + (int) (min_weight * mynumber);//设置右边坐标	
		int buttom = (int) (0);//设置底部坐标	
		int top = (int)(height);//设置上部坐标
		canvas.drawRect(left, top, right, buttom,BarPaint);	

		//写底部的坐标名
		canvas.drawText(name, left + 20*mScale   ,  buttom + 20
				* mScale, TextPaint);	
		//写柱状图上面的文字。
		canvas.drawText(mynumber+"", right + 30
				* mScale, buttom
				+20 * mScale, TextPaint);
		
	}

注释说的比较清楚，下面激动人心的时刻，源码来了

定义一个类Mybar.java

import java.util.List;

import com.devin.word_book.myOpenHepler;

import android.R.integer;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;

import android.graphics.Paint;


import android.util.AttributeSet;
import android.view.View;

@SuppressLint("DrawAllocation")
public class MyBar extends View {
	// 定义画笔

     public static int KNOWCOLOR=Color.parseColor("#8acb51");//设置画笔的颜色
	 public static int VAGUECOLOR=Color.parseColor("#ec945e");
	 public static int FORGETCOLOR=Color.parseColor("#d05b55");
		private Paint BarPaint;  //画进度条的笔
		private Paint TextPaint;//写文字的笔
		private float weight;
		private float height;
		private float mScale;
        private int	mynumber;
		private String name;
	public MyBar(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
        //给定义的画笔进行加工
  
        BarPaint = new Paint();
        TextPaint = new Paint();     
        BarPaint.setColor(KNOWCOLOR);
        TextPaint.setARGB(255, 51, 51, 51);
        BarPaint.setStyle(Paint.Style.FILL);//填充完全 没有边框什么的
        TextPaint.setAntiAlias(true);
        BarPaint.setAntiAlias(true);//抗锯齿，平滑
        mScale = context.getResources().getDisplayMetrics().density;//得到系统分辨率
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);//关闭硬件加速，否则可能会不显示
		TextPaint.setTextAlign(Paint.Align.RIGHT);
		TextPaint.setTextSize(15 * mScale);//设置画笔大小10设置10分辨率
		
	}

	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		super.onSizeChanged(w, h, oldw, oldh);//当形状改变时，就是我们自定义父容器大小时
		weight =  w;
		height =  h;
	}

	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.onDraw(canvas);
		float min_weight = (weight) /100;//将进度条分等级，我是等分100份
		
		int left = (int) (0);//设置左边坐标
		
		int right = left + (int) (min_weight * mynumber);//设置右边坐标
		
		int buttom = (int) (0);//设置底部坐标
		
		int top = (int)(height);//设置上部坐标
      
		
		canvas.drawRect(left, top, right, buttom,BarPaint);	

		//写底部的坐标名
		canvas.drawText(name, left + 20*mScale   ,  buttom + 20
				* mScale, TextPaint);
			
		//写柱状图上面的文字。
		canvas.drawText(mynumber+"", right + 30
				* mScale, buttom
				+20 * mScale, TextPaint);
		
	}
	public void setData(int number,int color,String name) {
          this.mynumber=number;
          this.name=name;
          BarPaint.setColor(color);
		  invalidate();
	}
    
}

下面写布局文件

文件的路径自己改下

                      <com.devin.tool.MyBar
                            android:id="@+id/mybar"
                            android:layout_width="match_parent"
                            android:layout_height="30dp"
                            android:layout_weight="0.74" />

下面写activity的引用

		MyBar memory_data_today_know=(MyBar)findViewById(R.id.mybar);
		memory_data_today_know.setData(50,MyBar.FORGETCOLOR,"认识");

今天就到这里，溜了 溜了