Android 通过图片进行自定义View绘制

标签: android bitmap 自定义View ChartView
1238人阅读 评论(0) 收藏 举报
分类:

通过Android自定义图表:ChartView自定义View实现渲染
我们已经了解了如何简单的去绘制一个自定义View-图表和在如何去对一个自定义View中起部分内容进行渲染。
这次我们来了解一下,在自定义View的过程中如何通过图片来绘制一个View。

首先还是先看效果图

Images:

这里写图片描述

这个View其实是2张图片组成的,其中一张是背景图,一张是指针,现在我们传给这个View一个0-10的值,让这个指针指向我们给的这个值,需要注意的是,背景图给的刻度是不规则的。

那么如何实现这个效果呢,看,直接上代码:

View Code:

**
 * Created by JackWaiting on 2016/6/30.
 */
public class RuleCircleView extends View {

    private float mLeftPadding,mRightPadding,mTopPadding,mBottomPadding;  //上下左右边距
    private float mRectFWidth,mRectFHeight;  //控件高与宽
    private float mRadius;  //半径
    private Bitmap mNum6VBitmap,mNumPointer;
    private Rect mSrcRect,mDstRect;
    private Matrix mPointMatrix;
    private float mNum6VData = 0; //数据
    private float mDegrees = 0; //指针角度
    private float mScale = 0.7f;  //缩放比例
    private float mFirstPoint = 0, mSecondPoint = 5.97f, mThirdPoint = 6.18f,   mFourthPoint = 6.43f, mFifthPoint = 6.94f, mSixthPoint = 7.45f, mMaxPoint = 10;  //每个区间的关键点
    private int  mFristMaxDegrees = 270,mSecondMaxDegrees = 300,mThirdMaxDegrees = 330,mFourthMaxDegrees = 30,mFifthMaxDegrees = 90,mSixthMaxDegrees = 135;  //每个区间点的最大角度
    private float mFristDegrees  = 45,mSecondDegrees= 30,mThirdDegrees = 30,mFourthDegrees = 60,mFifthDegrees = 60,mSixthDegrees = 45;  //每个区间的角度范围

    public RuleCircleView(Context context) {
        super(context);
        init();
    }

    public RuleCircleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public RuleCircleView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    //初始化
    private void init() {
        mLeftPadding = PixelUtil.dp2px(10, getContext());
        mTopPadding = PixelUtil.dp2px(10, getContext());
        mRightPadding = PixelUtil.dp2px(10, getContext());
        mBottomPadding = PixelUtil.dp2px(10, getContext());
        mRadius = PixelUtil.dp2px(150, getContext());
        mNum6VBitmap= BitmapFactory.decodeResource(getResources(), R.mipmap.img_num_6v);
        mNumPointer = BitmapFactory.decodeResource(getResources(), R.mipmap.img_num_pointer);
    }

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

    }

    //描绘指针
    private void drawBitMapPointer(Canvas canvas) {
        canvas.drawBitmap(mNumPointer, mPointMatrix, null);
    }


    //拿到界面传给我们的值
    public void getNum6VData(float data) {
        this.mNum6VData = data;
    }

    //描绘背景图
    private void drawBitMapBackGround(Canvas canvas) {
        canvas.drawBitmap(mNum6VBitmap, mSrcRect,mDstRect, null);
    }

    //把用户给的值换算成角度
    private float getDegrees(float mNum6VData) {
        if(mNum6VData>=mFirstPoint &&mNum6VData<=mSecondPoint){
            return mFristMaxDegrees - ((mSecondPoint-mNum6VData)/mSecondPoint)*mFristDegrees;
        }
        else if(mNum6VData>mSecondPoint &&mNum6VData<=mThirdPoint){
            return mSecondMaxDegrees - ((mThirdPoint-mNum6VData)/(mThirdPoint-mSecondPoint))*mSecondDegrees;
        }
        else if(mNum6VData>mThirdPoint &&mNum6VData<=mFourthPoint){
            return mThirdMaxDegrees - ((mFourthPoint-mNum6VData)/(mFourthPoint-mThirdPoint))*mThirdDegrees;
        }
        else if(mNum6VData>mFourthPoint &&mNum6VData<=mFifthPoint){
            float flagNum = mFourthMaxDegrees - ((mFifthPoint-mNum6VData)/(mFifthPoint-mFourthPoint))*mFourthDegrees;
            //如果是负数,换算成对应的正数
            if(flagNum<0){
                flagNum = 360+flagNum;
            }
            return flagNum;
        }
        else if(mNum6VData>mFifthPoint &&mNum6VData<=mSixthPoint){
            return mFifthMaxDegrees - ((mSixthPoint-mNum6VData)/(mSixthPoint-mFifthPoint))*mFifthDegrees;
        }
        else if(mNum6VData>mSixthPoint &&mNum6VData<=mMaxPoint){
            return mSixthMaxDegrees - ((mMaxPoint-mNum6VData)/(mMaxPoint-mSixthPoint))*mSixthDegrees;
        }
        return 0;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mRectFWidth = w - mLeftPadding - mRightPadding;
        mRectFHeight = h  - mTopPadding - mBottomPadding;
        mSrcRect = new Rect(0, 0,mNum6VBitmap.getWidth(), mNum6VBitmap.getHeight());// BitMap源区域
        mDstRect = new Rect((int)(mRectFWidth/2-mRadius),(int) (mRectFHeight/2-mRadius),(int)(mRectFWidth/2+mRadius), (int)(mRectFHeight/2+mRadius));// BitMap目标区域
        mPointMatrix = new Matrix();
        mDegrees= getDegrees(mNum6VData);
        mPointMatrix.postRotate(mDegrees, mNumPointer.getWidth()/2,mNumPointer.getHeight()*12/13);
        mPointMatrix.postScale(mScale,mScale);
        mPointMatrix.postTranslate(mRectFWidth/2-mNumPointer.getWidth()/2*mScale,getHeight()/2 - mNumPointer.getHeight()*mScale);
    }

}

相信看了前面2篇的朋友在看这个代码,已经没多大压力了,这里多出了一个知识点是Matrix(),由于网上的内容已经讲解的很好了,这里就不重复了,推荐一个链接Android Matrix理论与应用详解,配合上面的注释,你可以下载源码体验一般,使用Bitmap进行View绘制,有时候会很省事。

以下是代码下载地址:

Github下载地址:https://github.com/JackWaiting/ChartView

查看评论

Android View 绘制流程 及 自定义View

View绘制流程调用链图 记清楚函数调用的顺序才能准确地进行调用。 根据调用链,可将整个绘制过程分为三部分:Measure - Layout - Draw Measu...
  • asdf717
  • asdf717
  • 2016-09-19 14:29:39
  • 972

Android TextView中显示图片的4种方式

我们知道,TextView控件一般是用来显示文本的,而图片一般是用ImageView控件来显示。那TextView能否显示图片呢?答案是肯定的!下面列出常见的4种方式。...
  • hwe_xc
  • hwe_xc
  • 2016-03-17 11:28:55
  • 21156

android自定义View绘制几何图形

Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形) 1、首先说一下canvas类: Class Overview The Canvas cla...
  • qq_34308476
  • qq_34308476
  • 2016-06-12 14:19:52
  • 3000

自定义初学5——自定义View显示图片

前面已经简单介绍过一些自定义View的实现,现在再利用自定义View实现显示一张图片的功能                                                      ...
  • xuemengrui12
  • xuemengrui12
  • 2016-04-22 11:45:57
  • 3875

支持富文本插入图片,文本的自定义View

在比较潮流的App中,我们经常看到富文本的身影,能支持图文混排,其实图文混排不是那么难,这段时间由于项目的需要,我自己实现了图文混排,即能支持插入图排,又可以编辑文本。其实原理很简单,把ImageVi...
  • monkey646812329
  • monkey646812329
  • 2017-04-17 18:14:01
  • 471

Android自定义View——柱状图

之前的文章已经介绍了怎么绘制饼图和曲线图,今天这里介绍另一种常用的统计图——柱状图。 依旧是看一下效果图: 可以看到,图中有两幅柱状图,这里简单说明一下:第一幅是单柱状图,是根据同一组数据绘制的,...
  • liuwan1992
  • liuwan1992
  • 2016-10-04 17:01:51
  • 5997

Android自定义图表:ChartView

效果图 Design images : View Code:/** * Created by JackWaiting on 2016/6/24. */ public class CharVie...
  • zhanggang740
  • zhanggang740
  • 2016-06-27 16:44:06
  • 1992

Android 自定义View之绘图

【Android 自定义View之绘图】 Android 自定义View之绘图 基础图形的绘制 一Paint与Canvas Paint Paint的基本设置函数 setAntiAliastrue...
  • moira33
  • moira33
  • 2018-01-19 22:33:48
  • 242

Android自定义View实现图片显示,并实现缩放、拖拽、切换功能

这里贴三个文件的源代码,第一个是main.java package com.example.test; import java.util.ArrayList; import java.util...
  • lier171
  • lier171
  • 2013-05-29 19:04:54
  • 1632

android之各种图形绘制

Android中绘制图片或形状是我们常遇到的事情,通过最近的学习与在网上学习的案例与资料那么我今天就总结一下android中绘制用到的一些类和方法,其中其中主要包括3个类Canvas,Paint,Bi...
  • mxcsdn
  • mxcsdn
  • 2016-05-07 11:04:05
  • 1963
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 26万+
    积分: 2691
    排名: 1万+
    博客专栏
    文章分类
    最新评论