微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Android自定义控件实现状态提示图表

分类：Android作者：编程之家AI导航网

前面分析那么多系统源码了，也该暂停下来休息一下，趁昨晚闲着看见一个有意思的需求就操练一下分析源码后的实例演练―-自定义控件。

这个实例很适合新手入门自定义控件。先看下效果图：

横屏模式如下：


竖屏模式如下：


看见没有，这个控件完全自定义的，连文字等都是自定义的，没有任何图片等资源，就仅仅是一个小的Java文件，这个界面只有一个控件。如下咱们看下实现代码。

实例代码

如下就是整个工程的源码了。

自定义上面展示的控件AreaChartsView源码：

/**
 * Author    : yanbo
 * Date     : 2015-06-03
 * Time     : 09:22
 * Description : 自定义区域描述图表View
 */
public class AreaChartsView extends View {
  private Paint mPaint;

  private int[] mZeroPos = new int[2];
  private int[] mMaxYPos = new int[2];
  private int[] mMaxXPos = new int[2];

  private int mWidth,mHight;
  private int mRealWidth,mRealHight;
  private String mTitleY,mTitleX;

  private ArrayList<Integer> mXLevel = new ArrayList<>();
  private ArrayList<Integer> mYLevel = new ArrayList<>();
  private ArrayList<String> mGridLevelText = new ArrayList<>();
  private ArrayList<Integer> mGridColorLevel = new ArrayList<>();
  private ArrayList<Integer> mGridTxtColorLevel = new ArrayList<>();

  private int mGridLevel = mXLevel.size() - 1;

  //title字符大小
  private int mXYTitleTextSize = 40;

  private int mMeasureXpos,mMeasureYpos;

  public AreaChartsView(Context context,AttributeSet attrs) {
    super(context,attrs);

    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaint.setAntiAlias(true);
    mPaint.setFilterBitmap(true);
  }

  @Override
  protected void onLayout(boolean changed,int left,int top,int right,int bottom) {
    super.onLayout(changed,left,top,right,bottom);
    mWidth = getWidth();
    mHight = getHeight();
  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    initPosition();
    drawXYTitle(canvas);
    drawXYLine(canvas);
    drawContent(canvas);
  }

  private void initPosition() {
    //初始化坐标图的xy交点原点坐标
    mZeroPos[0] = mXYTitleTextSize * 2;
    mZeroPos[1] = mHight - mXYTitleTextSize * 4;
    //初始化坐标图的X轴最大值坐标
    mMaxXPos[0] = mWidth;
    mMaxXPos[1] = mHight - mXYTitleTextSize * 4;
    //初始化坐标图的Y轴最大值坐标
    mMaxYPos[0] = mXYTitleTextSize * 2;
    mMaxYPos[1] = mXYTitleTextSize * 2;
  }

  private void drawXYTitle(Canvas canvas) {
    mPaint.setColor(Color.parseColor("#1FB0E7"));
    mPaint.setTextSize(mXYTitleTextSize);
    mPaint.setTextAlign(Paint.Align.LEFT);
    //画Y轴顶的title
    canvas.drawText(mTitleY,mMaxYPos[0] - mXYTitleTextSize * 2,mMaxYPos[1] - mXYTitleTextSize,mPaint);
    mPaint.setTextAlign(Paint.Align.RIGHT);
    //画X轴顶的title
    canvas.drawText(mTitleX,mMaxXPos[0],mMaxXPos[1] + mXYTitleTextSize * 2,mPaint);
  }

  private void drawXYLine(Canvas canvas) {
    mPaint.setColor(Color.DKGRAY);
    mPaint.setTextAlign(Paint.Align.RIGHT);
    //画XY轴
    canvas.drawLine(mMaxYPos[0],mMaxYPos[1],mZeroPos[0],mZeroPos[1],mPaint);
    canvas.drawLine(mZeroPos[0],mMaxXPos[1],mPaint);
  }

  private void drawContent(Canvas canvas) {
    mGridLevel = mXLevel.size() - 1;
    //计算出偏移title等显示尺标后的真实XY轴长度，便于接下来等分
    mRealWidth = (mWidth - mXYTitleTextSize * 2);
    mRealHight = (mHight - mXYTitleTextSize * 4);
    //算出等分间距
    int offsetX = mRealWidth/(mGridLevel);
    int offsetY = mRealHight/(mGridLevel+1);
    //循环绘制content
    for (int index=0; index<mGridLevel+1; index++) {
      mPaint.setColor(Color.DKGRAY);
      mPaint.setTextAlign(Paint.Align.RIGHT);
      mPaint.setTextSize(mXYTitleTextSize-5);
      //绘制X轴的那些坐标区间点，包含0点坐标
      canvas.drawText(String.valueOf(mXLevel.get(index)),mZeroPos[0]+(index*offsetX),mZeroPos[1] + mXYTitleTextSize,mPaint);

      if (index != 0) {
        //绘制Y轴坐标区间点，不包含0点坐标，X轴已经画过了
        canvas.drawText(String.valueOf(mYLevel.get(index)),mZeroPos[1]-(index*offsetY),mPaint);
      }

      if (index == mGridLevel) {
        //坐标区间 = 真实区间 + 1
        break;
      }

      mPaint.setColor(mGridColorLevel.get(mGridLevel - 1 - index));
      mPaint.setStyle(Paint.Style.FILL);
      //绘制区间叠加图谱方块，从远到0坐标，因为小的图会覆盖大的图
      canvas.drawRect(mMaxYPos[0],mMaxYPos[1] + index*offsetY,mMaxXPos[0]-index*offsetX,mPaint);

      mPaint.setColor(mGridTxtColorLevel.get(index));
      mPaint.setTextAlign(Paint.Align.RIGHT);
      mPaint.setTextSize(mXYTitleTextSize);
      //绘制每个方块状态区间的提示文字
      canvas.drawText(mGridLevelText.get(index),mMaxXPos[0] - index * offsetX - mXYTitleTextSize,mMaxYPos[1] + index * offsetY + mXYTitleTextSize,mPaint);
    }
    //绘制当前坐标
    drawNotice(canvas,offsetX,offsetY);
  }

  private void drawNotice(Canvas canvas,int offsetX,int offsetY) {
    int realPosX = 0;
    int realPosY = 0;
    //计算传入的x值与真实屏幕坐标的像素值的百分比差值转换
    for (int index=0; index<mGridLevel; index++) {
      if (mMeasureXpos >= mXLevel.get(index) && mMeasureXpos < mXLevel.get(index+1)) {
        int subValue = mMeasureXpos - mXLevel.get(index);
        int offset = mXLevel.get(index+1) - mXLevel.get(index);
        realPosX = mZeroPos[0] + index*offsetX + (subValue / offset);
        break;
      }
    }
    //计算传入的y值与真实屏幕坐标的像素值的百分比差值转换
    for (int index=0; index<mGridLevel; index++) {
      if (mMeasureYpos >= mYLevel.get(index) && mMeasureYpos < mYLevel.get(index+1)) {
        int subValue = mMeasureYpos - mYLevel.get(index);
        int offset = mYLevel.get(index+1) - mYLevel.get(index);
        realPosY = mZeroPos[1] - index*offsetY - (offsetY - (subValue / offset));
        break;
      }
    }
    //画我们传入的坐标点的标记小红点
    mPaint.setColor(Color.RED);
    mPaint.setStyle(Paint.Style.FILL);
    canvas.drawCircle(realPosX,realPosY,8,mPaint);

    int[] centerPos = {mZeroPos[0] + mRealWidth/2,mZeroPos[1] - mRealHight/2};

    mPaint.setColor(Color.WHITE);
    mPaint.setStyle(Paint.Style.FILL_AND_stroke);
    RectF rectF = null;
    Path path = new Path();
    //画红点旁边的提示框和文字，有四个区域，然后提示框的小三角指标方位不同
    if (realPosX <= centerPos[0] && realPosY >= centerPos[1]) {
      //left-bottom
      //画三角形
      path.moveto(realPosX+5,realPosY+5);
      path.lineto(realPosX+15,realPosY+15);
      path.lineto(realPosX+15,realPosY-15);
      //画矩形背景
      rectF = new RectF(realPosX+15,realPosY-40,realPosX+200,realPosY + 30);
      canvas.drawRoundRect(rectF,15,mPaint);
      //画提示框的文字
      mPaint.reset();
      mPaint.setColor(Color.RED);
      mPaint.setTextSize(mXYTitleTextSize - 5);
      canvas.drawText("("+mMeasureXpos+","+mMeasureYpos+")",realPosX+30,mPaint);
    }
    else if (realPosX <= centerPos[0] && realPosY < centerPos[1]) {
      //left-top
      path.moveto(realPosX+5,realPosY+15);
      path.lineto(realPosX + 15,realPosY - 15);

      rectF = new RectF(realPosX+15,realPosY - 20,realPosY + 50);
      canvas.drawRoundRect(rectF,mPaint);

      mPaint.reset();
      mPaint.setColor(Color.RED);
      mPaint.setTextSize(mXYTitleTextSize - 5);
      canvas.drawText("("+mMeasureXpos+",realPosY+20,mPaint);
    }
    else if (realPosX > centerPos[0] && realPosY >= centerPos[1]) {
      //right-bottom
      path.moveto(realPosX-5,realPosY+5);
      path.lineto(realPosX-15,realPosY+15);
      path.lineto(realPosX - 15,realPosY - 15);

      rectF = new RectF(realPosX-200,realPosX-15,realPosX-180,mPaint);
    }
    else if (realPosX > centerPos[0] && realPosY < centerPos[1]) {
      //right-top
      path.moveto(realPosX-5,realPosY+30,mPaint);
    }

    path.close();
    mPaint.setColor(Color.WHITE);
    mPaint.setStyle(Paint.Style.FILL_AND_stroke);
    canvas.drawPath(path,mPaint);
  }

  //设置当前比值
  public void updateValues(int x,int y) {
    mMeasureXpos = x;
    mMeasureYpos = y;

    postInvalidate();
  }

  //设置XY轴顶角的title字体大小
  public void setTitleTextSize(int size) {
    mXYTitleTextSize = size;
  }

  //初始化X轴的坐标区间点值，可以不均等分
  public void initXLevelOffset(ArrayList<Integer> list) {
    mXLevel.clear();
    mXLevel.addAll(list);
  }

  //初始化Y轴的坐标区间点值，可以不均等分
  public void initYLevelOffset(ArrayList<Integer> list) {
    mYLevel.clear();
    mYLevel.addAll(list);
  }

  //初始化每个区间的提示文字，如果不想显示可以设置""
  public void initGridLevelText(ArrayList<String> list) {
    mGridLevelText.clear();
    mGridLevelText.addAll(list);
  }

  //初始化每个区间的颜色
  public void initGridColorLevel(ArrayList<Integer> list) {
    mGridColorLevel.clear();
    mGridColorLevel.addAll(list);
  }

  //初始化每个区间的提示文字颜色
  public void initGridTxtColorLevel(ArrayList<Integer> list) {
    mGridTxtColorLevel.clear();
    mGridTxtColorLevel.addAll(list);
  }

  //初始化XY轴title
  public void initTitleXY(String x,String y) {
    mTitleX = x;
    mTitleY = y;
  }
}

再来看下布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools" 
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <com.yanbober.customerviewdemo.areachartsview.AreaChartsView
    android:id="@+id/area_charts_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="10dp"/>

</RelativeLayout>

再看看主界面：

public class MainActivity extends AppCompatActivity {
  private AreaChartsView mAreaChartsView;
  private Timer timer;

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

    mAreaChartsView = (AreaChartsView) this.findViewById(R.id.area_charts_view);

    //初始化自定义图表的规格和属性
    ArrayList<Integer> mXLevel = new ArrayList<>();
    ArrayList<Integer> mYLevel = new ArrayList<>();
    ArrayList<String> mGridLevelText = new ArrayList<>();
    ArrayList<Integer> mGridColorLevel = new ArrayList<>();
    ArrayList<Integer> mGridTxtColorLevel = new ArrayList<>();
    //初始化x轴坐标区间
    mXLevel.add(0);
    mXLevel.add(60);
    mXLevel.add(90);
    mXLevel.add(100);
    mXLevel.add(110);
    mXLevel.add(120);
    //初始化y轴坐标区间
    mYLevel.add(0);
    mYLevel.add(90);
    mYLevel.add(140);
    mYLevel.add(160);
    mYLevel.add(180);
    mYLevel.add(200);
    //初始化区间颜色
    mGridColorLevel.add(Color.parseColor("#1FB0E7"));
    mGridColorLevel.add(Color.parseColor("#4FC7F4"));
    mGridColorLevel.add(Color.parseColor("#4FDDF2"));
    mGridColorLevel.add(Color.parseColor("#90E9F4"));
    mGridColorLevel.add(Color.parseColor("#B2F6F1"));
    //初始化区间文字提示颜色
    mGridTxtColorLevel.add(Color.parseColor("#EA8868"));
    mGridTxtColorLevel.add(Color.parseColor("#EA8868"));
    mGridTxtColorLevel.add(Color.parseColor("#EA8868"));
    mGridTxtColorLevel.add(Color.WHITE);
    mGridTxtColorLevel.add(Color.BLACK);
    //初始化区间文字
    mGridLevelText.add("异常");
    mGridLevelText.add("过高");
    mGridLevelText.add("偏高");
    mGridLevelText.add("正常");
    mGridLevelText.add("偏低");

    mAreaChartsView.initGridColorLevel(mGridColorLevel);
    mAreaChartsView.initGridLevelText(mGridLevelText);
    mAreaChartsView.initGridTxtColorLevel(mGridTxtColorLevel);
    mAreaChartsView.initXLevelOffset(mXLevel);
    mAreaChartsView.initYLevelOffset(mYLevel);
    mAreaChartsView.initTitleXY("投入量(H)","产出量(H)");
  }

  @Override
  protected void onStart() {
    super.onStart();
    timer = new Timer();
    timer.schedule(new TimerTask() {
      @Override
      public void run() {
        Random random = new Random();
        int x = random.nextInt(120) % (120 + 1) + 0;
        Random randomy = new Random();
        int y = randomy.nextInt(200) % (200 + 1) + 0;
        //随机模拟赋值
        mAreaChartsView.updateValues(x,y);
      }
    },1000);
  }

  @Override
  protected void onPause() {
    super.onPause();
    timer.cancel();
  }
}

总结

上面代码很简单，核心的都已经注释了，不需要过多解释。核心思路就是一些坐标点的计算。该控件支持设置mergin及width与hight等属性，支持自定义所有颜色及显示及坐标区分等，唯一缺陷就是没来得及写attr属性xml设置这些值，有兴趣的自己实现吧，我是没时间了。

可以发现，自定义view无非就是重写前面文章分析的那三个方法而已。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Android 性能优化——之控件的优化
Android性能优化——之控件的优化 前面讲了图像的优化，接下来分享一下控件的性能优化，这里主要是面向自定义View的优化。 1、首先先说一下我们在自定义View中可能会犯的3个错误： 1）UselesscallstoonDraw()：我们知道调用View.invalidate()会触发Vi...
android TextView描边
前言 上一篇已经讲了如何实现textView中粗字体效果，里面主要重写了onDraw方法。 这一边讲一个进阶功能，实现textView的描边效果。 上效果图。 上代码： 原理讲解： 效果实现思路是：因为系统api只给paint设置strokewidth方法，却没有提供设置描边的色值的方法，而且我们通
GreenDao教程1
最近项目重构，涉及到了数据库和文件下载，发现GreenDao这个框架还是不错的。直接面向对象的，可以通过对对象的操作，实现数据的存储。 但是官网上的API是在不敢恭维，文档写的很糙，看了半天，才搞懂一系列的流程。在此进行一下纪念。免得那天需要修改的时候，一脸懵逼。直接上干货 官网地址：http://
WebView加载页面的两种方式——网络页面和本地页面
WebView加载页面的两种方式 一、加载网络页面 加载网络页面，是最简单的一种方式，只需要传入http的URL就可以，实现WebView加载网络页面 代码如下图： 二、加载本地页面 1、加载assets目录下的HTML页面： 加载assets目录的页面，大多数可以用来做页面数据的存储打包，这样可以
Android 全局使用第三方字体
给APP全局设置字体主要分为两个方面来介绍 一、给原生界面设置第三方字体 1、准备工作-下载第三方字体：传送门 将文件放入工程assets目录下。（一般个人习惯单独命名一个文件夹放字体文件，也可直接放入根目录，但记得改引用路径） 2、代码实现 a、自定义application，将第三方的字体，替换当
Android中粗字体
前言 最近UI大牛出了一版新的效果图，按照IOS的效果做的，页面里面有普通字体、中粗字体、加粗字体。对于IOS的小伙伴，分分钟搞定，但是对于Android开发的我，瞬间懵逼了。WTF！ 安卓只有粗和不粗呀，哪有中粗这回事。硬着头皮做出来一版之后，看到UI嫌弃的表情。深深的刺痛了我的完美心。说啥也要搞
TabLayout基本使用
前言 Tablayout继承自HorizontalScrollView，可以用作顶部标签效果、底部导航栏效果。一般多与ViewPager一起使用。 想直接了解如何实现短下滑效果的请看：TabLayout的高级用法 首先上几个效果图。 图： 使用方法 下面我们来看如何使用， 第一步，先在gradle引
AndroidStudio 各种异常情况处理大法
最近使用AndroidStudio出现了.java文件，显示为xml文件等问题，通过各种采坑之后，发现删除本地的缓存文件这个方法最管用，差不多可以根治95%的莫名其妙的问题。解决办法如下； 先将AS关闭，然后找到你电脑的目录C:\Users\用户名\.AndroidStudio3.5\system\
Android文件各种存储路径的比较
1、File cacheDir = context.getCacheDir(); 应用内部存储空间（数据文件私有）文件存储到这个路径下，不需要申请权限，当应用被卸载的时候，目录下的文件会被删除。 需要注意的是，这个文件的目录和应用的存储位置有关， 当应用被移动到外部存储设备的时候，文件的绝对路径也是
汉诺塔问题
汉诺塔问题 最近面试题遇到过汉诺塔的问题，当时竟然懵逼了，不会了！！大学研究的问题竟然都忘光了，于是抓紧捡起来。然而在网上看了看博客，发现非递归算法还真挺多。下面总结了一下。 一、递归算法 1、递归算法优缺点：递归算法算是最易于理解也是最容易实现的，但是对内存的消耗也是巨大的，因为递归需要系统堆栈来
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native