android自定义可拖拽的仪表盘

本文实例为大家分享了android自定义可拖拽的仪表盘的具体代码,供大家参考,具体内容如下

因为项目最近需要用到仪表盘,又不想使用之前使用的背景图的方式。主要是想自己写一点代码。觉得绘制要比图片好。于是有了下面这张图:

面从弧度,刻度,文字,指针都是canvas绘制出来的。

/**
 * Created by xulc on 2018/7/18.
 */

public class DashboardView extends View {
    private  int minWidthDP = 200;
    private  int minHeightDP = 100;

    private Paint arcPaint,arcInnerPaint,linePaint,textPaint;
    private int arcColor = Color.parseColor("#0096ff");  //外层弧形颜色
    private int arcInnerColor =  Color.parseColor("#FFFFFFFF");  //内层弧形颜色
    private int lineColor = Color.parseColor("#333333");   //线条颜色
    private int pointerColor = Color.parseColor("#439AFF");   //指针颜色

    private int arcWidthDP = 1;

    private RectF arcRectF,arcInnerRectF;

    private int widthDash = 0;//表盘的宽度

    private int mwidth =0;
    private int mheight = 0;

    private float shortlineLength = 0 ,longlineLength = 0;   //线的长度

    private Path path = new Path();

    private Path pointerPath = new Path();   //指针绘制路径

    private Region pointerRegion = new Region();  //指针区域

    private RectF rectF = new RectF();

    private boolean isChoosePointer = false;

    private int mdegree = 0;

    public DashboardView(Context context) {
        this(context,null);
    }

    public DashboardView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }
    //初始化相关资源
    private void initPaint() {
        arcPaint = new Paint();
        arcPaint.setColor(arcColor);
        arcPaint.setAntiAlias(true);
        arcPaint.setStrokeCap(Paint.Cap.SQUARE);
        arcPaint.setStrokeWidth(1);
        arcPaint.setStyle(Paint.Style.FILL);

        arcInnerPaint = new Paint();
        arcInnerPaint.setColor(arcInnerColor);
        arcInnerPaint.setAntiAlias(true);
        arcInnerPaint.setStrokeCap(Paint.Cap.SQUARE);
        arcInnerPaint.setStrokeWidth(1);
        arcInnerPaint.setStyle(Paint.Style.FILL);

        linePaint = new Paint();
        linePaint.setColor(lineColor);
        linePaint.setAntiAlias(true);
        linePaint.setStrokeCap(Paint.Cap.SQUARE);
        linePaint.setStrokeWidth(arcWidthDP);
        linePaint.setStyle(Paint.Style.FILL);

        textPaint = new Paint();
        textPaint.setColor(lineColor);
        textPaint.setAntiAlias(true);
        linePaint.setStrokeCap(Paint.Cap.SQUARE);
        linePaint.setStrokeWidth(arcWidthDP);
        linePaint.setStyle(Paint.Style.STROKE);
        textPaint.setTextAlign(Paint.Align.LEFT);
        textPaint.setTextSize(30);

        arcRectF = new RectF();
        arcInnerRectF = new RectF();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        if(widthSize < DensityUtil.dip2px(getContext(),minWidthDP)||heightSize < DensityUtil.dip2px(getContext(),minHeightDP)){
            widthSize = DensityUtil.dip2px(getContext(),minWidthDP);
            heightSize = DensityUtil.dip2px(getContext(),minHeightDP);
        }

        if(widthSize/2 != heightSize){
            heightSize = widthSize/2;
        }

        setMeasuredDimension(widthSize,heightSize + 50);

        arcRectF.left = 0;
        arcRectF.bottom = heightSize*2;
        arcRectF.right = widthSize;
        arcRectF.top = 0;

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        widthDash = DensityUtil.dip2px(getContext(),50);

        arcInnerRectF.left = widthDash;
        arcInnerRectF.bottom = arcRectF.bottom - widthDash;
        arcInnerRectF.right = arcRectF.bottom -widthDash;
        arcInnerRectF.top = widthDash;
        shortlineLength = widthDash/7;
        longlineLength = widthDash/5;
        mwidth = getWidth();
        mheight = getHeight() - 50;

        Log.d("xulc","mheight----->"+mheight);
        Log.d("xulc","arcRectF.bottom----->"+arcRectF.bottom);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        arcPaint.setColor(arcColor);
        canvas.drawArc(arcRectF,180,180,true,arcPaint);  //绘制外弧形
        canvas.drawArc(arcInnerRectF,180,180,true,arcInnerPaint);  //绘制内部弧形
        canvas.save();
        drawScale(canvas);  //绘制刻度
        canvas.restore();
        drawText(canvas);  //绘制文本
        drawPointer(canvas,mdegree);  //绘制指针
    }

    private int mradius = 50;

    //绘制指针
    private void drawPointer(Canvas canvas,float degree){
        pointerPath.reset();
        if(isChoosePointer){
            arcPaint.setColor(pointerColor);
        }
        pointerPath.reset();
        pointerPath.moveTo((float)( mwidth/2 - mradius*Math.sin(degree/180f*Math.PI)),(float)( mheight + mradius*Math.cos(degree/180f*Math.PI))); //下切点
        pointerPath.lineTo(mwidth/2 -  (float) Math.cos(degree/180f*Math.PI)*(mheight - widthDash - longlineLength -mradius),mheight - (float) Math.sin(degree/180f*Math.PI)*(mheight - widthDash - longlineLength-mradius));
        pointerPath.lineTo((float)( mwidth/2 + mradius*Math.sin(degree/180f*Math.PI)),(float)( mheight - mradius*Math.cos(degree/180f*Math.PI)));
        pointerPath.close();
        pointerPath.computeBounds(rectF,true);
        pointerRegion.setPath(pointerPath,new Region((int) rectF.left,(int) rectF.top,(int) rectF.right,(int) rectF.bottom));
        canvas.drawPath(pointerPath,arcPaint);   //path转化为Region区域,方便判断用户点击的位置
        path.reset();
        arcPaint.setColor(arcColor);
        path.addCircle(mwidth/2,mheight,mradius, Path.Direction.CW);
        canvas.drawPath(path,arcPaint);
        textPaint.setTextAlign(Paint.Align.CENTER);
        canvas.drawText(""+mdegree,mwidth/2,mheight,textPaint);
    }

    //设置度数
    public void setDegree(int degree){
        if(0<=degree && degree<=180){
            mdegree = degree;
            invalidate();
        }
    }

    //触摸事件
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float startx ,starty;
        if(event.getAction()==MotionEvent.ACTION_DOWN){
            startx = event.getX(); starty = event.getY();
            if(pointerRegion.contains((int) startx,(int) starty)){  //在其中
                isChoosePointer =true;
                invalidate();
                return true;   //消费当前事件,否则不会继续分发后续事件
            }
            return false;
        }else if(event.getAction()==MotionEvent.ACTION_MOVE){
            if(isChoosePointer){
                float x = event.getX(); float y = event.getY();
                if(y <= mheight && x!=mwidth/2){
                    double degree=  Math.atan2((mheight-y) ,(mwidth/2 - x));
                    setDegree((int) (degree/Math.PI*180));
                }else{
                    if(y > mheight&& x < mwidth/2){  //说明滑到下面了
                        setDegree(0);
                    }else if(y > mheight&& x > mwidth/2){
                        setDegree(180);
                    }
                }
                return true;
            }else{
                return false;
            }

        }else if(event.getAction()==MotionEvent.ACTION_UP||event.getAction()==MotionEvent.ACTION_CANCEL){
            isChoosePointer =false;
            invalidate();
            return true;
        }
        return super.onTouchEvent(event);
    }

    //绘制文字
    private void drawText(Canvas canvas) {
        textPaint.setTextAlign(Paint.Align.LEFT);
        for(int i=0;i<=6;i++){
            int degree = i*30;
            float textWidth = textPaint.measureText(""+degree);
            if(degree ==0){
                canvas.drawText("" + degree,mwidth/2 - (float) Math.cos(degree/180f*Math.PI)*(mheight - widthDash - longlineLength -10) - textWidth/2,mheight - (float) Math.sin(degree/180f*Math.PI)*(mheight - widthDash - longlineLength-10)+7,textPaint);
            }   //向右边移动7个像素  向下边移动7个像素
            else if(degree == 30){
                    canvas.drawText("" + degree,mwidth/2 - (float) Math.cos(degree/180f*Math.PI)*(mheight - widthDash - longlineLength-10) - textWidth/2,mheight - (float) Math.sin(degree/180f*Math.PI)*(mheight - widthDash - longlineLength-10)+7 ,textPaint);
            }else if(degree ==60){
                canvas.drawText("" + degree,mwidth/2 - (float) Math.cos(degree/180f*Math.PI)*(mheight - widthDash - longlineLength-10) - textWidth/2,mheight - (float) Math.sin(degree/180f*Math.PI)*(mheight - widthDash - longlineLength-10)+7 ,textPaint);
            }else if(degree ==90){
                canvas.drawText("" + degree,mwidth/2 - (float) Math.cos(degree/180f*Math.PI)*(mheight - widthDash - longlineLength-10) - textWidth/2,mheight - (float) Math.sin(degree/180f*Math.PI)*(mheight - widthDash - longlineLength-10)+7 ,textPaint);
            }else{
                canvas.drawText("" + degree,mwidth/2 - (float) Math.cos(degree/180f*Math.PI)*(mheight - widthDash - longlineLength - 10) - textWidth,mheight - (float) Math.sin(degree/180f*Math.PI)*(mheight - widthDash - longlineLength-10)+7 ,textPaint);
            }
        }
    }

    //绘制刻度
    private void drawScale(Canvas canvas){
        for(int i=0;i<=36;i++){   //180角度,30度一个长线 0 30 60 90 120 150 180  5条小线   5度一个小线
            if(i%6==0){//长线
                canvas.drawLine(widthDash,mheight,widthDash + longlineLength ,mheight,linePaint);
            }else{ //短线
                canvas.drawLine(widthDash,mheight,widthDash + shortlineLength ,mheight,linePaint);
            }
            canvas.rotate(5,mwidth/2,mheight);
        }
    }
}

整体代码差不多就这样,代码中详尽的注释。代码基本上都在这了,就不上传git了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android自定义view之仿支付宝芝麻信用仪表盘示例

    自定义view练习 仿支付宝芝麻信用的仪表盘 对比图: 首先是自定义一些属性,可自己再添加,挺基础的,上代码 <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="RoundIndicatorView"> <!--最大数值--> <attr name="maxNum" form

  • android实现简单仪表盘效果

    本文实例为大家分享了android实现简单仪表盘效果的具体代码,供大家参考,具体内容如下 实现这个效果: 中间的文字很好写,外层的进度条就需要自定义控件了,代码如下: public class CirCleProgressBar extends View { private Paint circlePaint; private Paint textPaint; private int circleColor;//圆弧颜色 private int circleBgColor;//圆弧背景颜色 pr

  • Android自定义View实现渐变色仪表盘

    前言:最近一直在学自定义View的相关知识,感觉这在Android中还是挺难的一块,当然这也是每个程序员必经之路,正好公司项目要求实现类似仪表盘的效果用于直观的显示公司数据,于是就简单的写了个demo,记录实现的过程.上篇<Android自定义View实现圆弧进度效果>简单记录了圆弧及文字的绘制,渐变色的仪表盘效果将更加升入的介绍canvas及paint的使用(如画布旋转,paint的渐变色设置等). 知识梳理 1.圆弧渐变色(SweepGradient) 2.圆弧上刻度绘制 3.指针指示当前

  • Android实现仪表盘控件开发

    仪表盘在工业软件中很常见,今天整一个图片式仪表盘控件(非几何图形绘制).实现非常简单,一张背景图,一张指针.创建一个RelativeLayout布局文件,然后在里面布置好控件的位置,代码如下 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" androi

  • Android实现仪表盘效果

    本文实例为大家分享了Android实现仪表盘效果的具体代码,供大家参考,具体内容如下 仪表盘效果,圆弧可变色,效果图如下: 通过自定义view实现,代码如下: public class DashboardView extends View { private int mRadius; // 画布边缘半径(去除padding后的半径) private int mStartAngle = 150; // 起始角度 private int mSweepAngle = 240; // 绘制角度 priv

  • Android绘制仪表盘指针刻度

    本文实例为大家分享了Android绘制仪表盘指针刻度的具体代码,供大家参考,具体内容如下 不废话,先看效果图: 表盘的绘制重点有两点: 1.表盘刻度的绘制 2.表盘指针旋转到指定刻度的实现 表盘刻度的绘制 刻度的绘制可以采用画线.然后循环旋转画布的方式实现,我这里通过绘制弧线,第一个刻度占1度,与第二个刻度的间距是2度,那么第二个刻度的起始角度为第一个刻度的起始角度+1度+间距2度,以此类推,循环绘制,完成刻度的绘制.实现代码如下: //绘制刻度线,通过两次不同大小圆的遮罩,达到刻度的长短粗细效

  • Android自定义View仿支付宝芝麻信用分仪表盘

    先看下iOS的芝麻信用分截图 这是我做的效果,还是有点差距的 支付宝9.9版本芝麻信用分的实现 首先初始化各种画笔,默认的size,padding,小圆点. (因为实在找不到原版芝麻信用的带点模糊效果的小圆点,所以只好用这个代替) //View的默认大小 defaultSize = dp2px(250); //默认Padding大小 arcDistance = dp2px(14); //外层圆环画笔 mMiddleArcPaint = new Paint(Paint.ANTI_ALIAS_FLA

  • Android自定义View制作仪表盘界面

    前言 最近我跟自定义View杠上了,甚至说有点上瘾到走火入魔了.身为菜鸟的我自然要查阅大量的资料,学习大神们的代码,这不,前两天正好在郭神在微信公众号里推送一片自定义控件的文章--一步步实现精美的钟表界面.正适合我这种菜鸟来学习,闲着没事,我就差不多依葫芦画瓢也写了一个自定义表盘View,现在纯粹最为笔记记录下来.先展示下效果图: 下面进入正题 自定义表盘属性 老规矩,先在attrs文件里添加表盘自定义属性 <declare-styleable name="WatchView"&

  • android自定义可拖拽的仪表盘

    本文实例为大家分享了android自定义可拖拽的仪表盘的具体代码,供大家参考,具体内容如下 因为项目最近需要用到仪表盘,又不想使用之前使用的背景图的方式.主要是想自己写一点代码.觉得绘制要比图片好.于是有了下面这张图: 面从弧度,刻度,文字,指针都是canvas绘制出来的. /** * Created by xulc on 2018/7/18. */ public class DashboardView extends View { private int minWidthDP = 200; p

  • Android自定义可拖拽的悬浮按钮DragFloatingActionButton

    悬浮按钮FloatingActionButton是Android 5.0系统添加的新控件,FloatingActionButton是继承至ImageView,所以FloatingActionButton拥有ImageView的所有属性.本文讲解的是一个实现了可拖拽的悬浮按钮,并为此添加了类似于qq的吸附边框的功能.在此之前,先了解下其简单的使用方式吧: 首先你得添加其依赖 compile 'com.android.support:design:25.3.1' 然后在布局文件中使用. <andro

  • Android 自定义可拖拽View界面渲染刷新后不会自动回到起始位置

    以自定义ImageView为例: /** * 可拖拽ImageView * Created by admin on 2017/2/21. */ public class FloatingImageView extends ImageView{ public FloatingImageView(Context context) { super(context); } public FloatingImageView(Context context, AttributeSet attrs) { su

  • Android中RecyclerView拖拽、侧删功能的实现代码

    废话不多说,下面展示一下效果. 这是GridView主文件实现. public class GridViewActivity extends AppCompatActivity { RecyclerView mRecyclerView; List<String> mStringList; RecyclerAdapter mRecyAdapter; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { s

  • Vue自定义指令拖拽功能示例

    下面给大家分享vue自定义指令拖拽功能代码,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实例方法</title> <meta name="viewport" content="width=device-width, initial-scale=1

  • Android实现View拖拽跟随手指移动效果

    今天想实现这个功能,但是网上搜索代码,都是利用setPadding,setMargin 等方法去实现的,这在Android 4.0 以前是没问题的,但是,android 4.0 后系统已经提供了更简单的方法给我们用了,就是setTranslationX() 和setTranslationY() .这两个是View的属性方法.现在我就用这两个方法实现一个View可以跟着手指移动拖拽的效果.代码非常非常简单: public class DragView extends TextView { floa

  • Android TouchListener实现拖拽删实例代码

    Android TouchListener实现拖拽删实例代码 如果为一个控件设置了该触摸监听, 控件会随着用户的拖动而移动, 如果拖动的距离大过设置的临界值, 那么当松开手指时会有回调onDragComplete, 用户可在该方法中将该控件从父布局中删除, 或这进行其他操作. 如果用户拖拽的距离小于临界值, 那么当用户松开手指时控件会回谈到原来的初始位置.这时会触发onDragRebound回调. 如果用户触摸控件之后没有拖拽而是直接松开手指, 会触发onClick回调, 这样用户就不用为该控件

  • Android实现可拖拽的GridView效果长按可拖拽删除数据源

    Android 可拖拽的GridView效果实现, 长按可拖拽和item实时交换 简单修改,完成自己想要的功能:长按,移到垃圾桶,删除数据. 主要思路是: 1.获取到用户长按的操作 2.获取按下的图片的bitmap以及移动的时候动态刷新镜像 3 action_up的时候判断镜像的位置,进入是否删除逻辑 自定义控件 package com.leafact.GridView; import android.app.Activity; import android.content.Context; i

  • Android实现可拖拽列表和多选功能

    本文实例为大家分享了Android实现可拖拽列表和多选的具体代码,供大家参考,具体内容如下 这是我已经完成的一个已经上线的OA软件的一个模块,这个模块的功能不多,已经放到GitHub上面开源了,有感兴趣的朋友可以看看UIFrame 主窗口JAVA代码 /** * 编辑状态下长按拖动条目 * 1.通过ItemTouchHelper.Callback实现长按拖动 * 2.通过isEditable的值判断是否编辑状态,初值是false * 3.切换编辑状态要把isEditable的值取反,并改变复选框

  • Android实现按钮拖拽还原功能

    具体代码如下所示: public class MainActivity extends AppCompatActivity { private ImageButton ibOk ; private int lastX; private int lastY; private int startLeft; private int startRight; private int startTop; private int startBottom; @Override protected void on

随机推荐