Android custom View AirConditionerView hacking

package com.example.arc.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.SweepGradient;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.MeasureSpec;
import android.widget.Toast;

/**
 *                 Android custom View AirConditionerView hacking
 *
 * 声明:
 *     本人在知乎看到Android非常漂亮的自定义View文章后,因为对其绘图部分运作机制好
 * 奇,于是叫程梦真帮忙一起分析其中代码运作机制,花了两个半小时才将其整体hacking完。
 *
 *                                              2016-1-1 深圳 南山平山村 曾剑锋
 *
 *
 * 一、程序来源:
 *     1. 这种ui谁能给点思路?
 *         https://m.zhihu.com/question/38598212#answer-26400956
 *     2. github:mutexliu/ZhihuAnswer
 *         https://github.com/mutexliu/ZhihuAnswer
 *
 * 二、参考文档:
 *     1. 为什么安卓android变量命名多以小写"m"开头 ?
 *         http://www.01yun.com/mobile_development_question/20130303/194172.html
 *     2. 自定义View之onMeasure()
 *         http://blog.csdn.net/pi9nc/article/details/18764863
 *     3. MeasureSpec介绍及使用详解
 *         http://www.cnblogs.com/slider/archive/2011/11/28/2266538.html
 *     4. SweepGradient扫描渲染
 *         http://blog.csdn.net/q445697127/article/details/7867506
 *     5. SweepGradient
 *         http://developer.android.com/reference/android/graphics/SweepGradient.html
 *     6. 覆写onLayout进行layout,含自定义ViewGroup例子
 *         http://blog.csdn.net/androiddevelop/article/details/8108970
 *     7. View.MeasureSpec
 *         http://developer.android.com/reference/android/view/View.MeasureSpec.html#getMode(int)
 *
 * 三、绘图的三个步骤:
 *     1. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec);
 *     2. protected void onLayout(boolean changed, int left, int top, int right, int bottom);
 *         View中不需要实现。
 *     3. protected void onDraw(Canvas canvas);
 *
 */
public class AirConditionerView extends View {
    // 设置当前的温度
    // 这个值只能在16-28度之间,下面的private void checkTemperature(float t)方法中有限制
    private float mTemperature = 24f;
    // 画圆的paint
    private Paint mArcPaint;
    // 画上线的paint
    private Paint mLinePaint;
    // 写字的paint
    private Paint mTextPaint;

    // 这里是将控件宽度分为600份,mMinSize代表其中一份
    private float mMinSize;
    // 设置空心边框的宽度,其实就是圆弧的宽度
    private float mGapWidth;
    // 内圆半径
    private float mInnerRadius;
    // 外圆半径
    private float mRadius;
    // 中线点
    private float mCenter;

    // 圆弧矩形
    private RectF mArcRect;
    // 渐变渲染
    private SweepGradient mSweepGradient;

    // 接下来的三个构造函数是固定的写法,最后调用自己定义的的init方法
    public AirConditionerView(Context context) {
        super(context, null);
    }

    public AirConditionerView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

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

    private void init(){
        // Paint.Style.FILL              : 填充内部
        // Paint.Style.FILL_AND_STROKE    : 填充内部和描边
        // Paint.Style.STROKE            : 仅描边

        // 画圆弧的笔
        mArcPaint = new Paint();
        mArcPaint.setStyle(Paint.Style.STROKE);
        // 设置抗锯齿
        mArcPaint.setAntiAlias(true);

        // 画圆弧上的线的笔
        mLinePaint = new Paint();
        mLinePaint.setStyle(Paint.Style.STROKE);
        mLinePaint.setAntiAlias(true);
        // 设置笔的颜色
        mLinePaint.setColor(0xffdddddd);

        // 写字的笔
        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
        mTextPaint.setColor(0xff64646f);
    }

    private void initSize(){
        //寬度
        mGapWidth = 56*mMinSize;
        //内圆半径
        mInnerRadius = 180*mMinSize;
        mCenter = 300*mMinSize;
        //外圆半径
        mRadius = 208*mMinSize;

        // 包含圆弧的矩形
        mArcRect = new RectF(mCenter-mRadius, mCenter-mRadius, mCenter+mRadius, mCenter+mRadius);

        // 设置渐变色、渐变位置
        /**
         * A subclass of Shader that draws a sweep gradient around a center point.
         *
         * Parameters
         * cx            The x-coordinate of the center
         * cy            The y-coordinate of the center
         * colors        The colors to be distributed between around the center. There must be at least 2 colors in the array.
         * positions    May be NULL. The relative position of each corresponding color in the colors array, beginning with 0 and ending with 1.0. If the values are not monotonic, the drawing may produce unexpected results. If positions is NULL, then the colors are automatically spaced evenly.
         */
        int[] colors = {
            0xFFE5BD7D,0xFFFAAA64,
            0xFFFFFFFF, 0xFF6AE2FD,
            0xFF8CD0E5, 0xFFA3CBCB,
            0xFFBDC7B3, 0xFFD1C299,
            0xFFE5BD7D,
        };
        float[] positions = {0,1f/8,2f/8,3f/8,4f/8,5f/8,6f/8,7f/8,1};
        mSweepGradient = new SweepGradient(mCenter, mCenter, colors , positions);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        /*****************   变色弧形部分  ************************/
        // draw arc 設置空心邊框的寬度
        // Set the width for stroking. Pass 0 to stroke in hairline mode. Hairlines always draws a single pixel independent of the canva‘s matrix.
        mArcPaint.setStrokeWidth(mGapWidth);
        int gapDegree = getDegree();
        // 绘制梯度渐变
        // Set or clear the shader object.
        mArcPaint.setShader(mSweepGradient);
        //画渐变色弧形
        // Draw the specified arc, which will be scaled to fit inside the specified oval.
        // If the start angle is negative or >= 360, the start angle is treated as start angle modulo 360.
        // If the sweep angle is >= 360, then the oval is drawn completely. Note that this differs slightly from SkPath::arcTo, which treats the sweep angle modulo 360. If the sweep angle is negative, the sweep angle is treated as sweep angle modulo 360
        // The arc is drawn clockwise. An angle of 0 degrees correspond to the geometric angle of 0 degrees (3 o‘clock on a watch.)
        // Parameters
        //    oval            The bounds of oval used to define the shape and size of the arc
        //    startAngle    Starting angle (in degrees) where the arc begins
        //    sweepAngle    Sweep angle (in degrees) measured clockwise
        //    useCenter        If true, include the center of the oval in the arc, and close it if it is being stroked. This will draw a wedge
        //    paint            The paint used to draw the arc
        canvas.drawArc(mArcRect, -225, gapDegree + 225, false, mArcPaint);

        /*****************   白色弧形部分  ************************/
        mArcPaint.setShader(null);
        mArcPaint.setColor(Color.WHITE);

        //画渐变色弧形
        canvas.drawArc(mArcRect, gapDegree, 45 - gapDegree, false, mArcPaint);

        // draw line
        /*****************   画线部分  ************************/
        mLinePaint.setStrokeWidth(mMinSize*1.5f);
        // 将圆等分成120份,每份占360度的3度
        for(int i = 0; i<120; i++){
            // (75-45)*3 = 30*3 = 90,不绘直线部分占90度,正好符合空白区
            if(i<=45 || i >= 75){
                float top = mCenter-mInnerRadius-mGapWidth;
                // 2度分成15格
                if(i%15 == 0){
                    top = top - 20*mMinSize;
                }
                // 绘制垂直线
                canvas.drawLine(mCenter, mCenter - mInnerRadius, mCenter, top, mLinePaint);
            }
            /**
             * Preconcat the current matrix with the specified rotation.
             *
             * Parameters
             * degrees    The amount to rotate, in degrees
             * px    The x-coord for the pivot point (unchanged by the rotation)
             * py    The y-coord for the pivot point (unchanged by the rotation)
             *
             * 坐标系旋转3度,不是已经绘制的图形旋转3度
             */
            canvas.rotate(3,mCenter,mCenter);
        }

        // draw text
        /*****************   弧形外部显示温度度数文字 部分  ************************/
        mTextPaint.setTextSize(mMinSize*30);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
        for(int i = 16; i<29; i+=2){
            /**
             * 计算文字在圆弧边缘的位置,用到三角函数计算。
             */
            float r = mInnerRadius+mGapWidth + 40*mMinSize;
            float x = (float) (mCenter + r*Math.cos((26-i)/2*Math.PI/4));
            float y = (float) (mCenter - r*Math.sin((26-i)/2*Math.PI/4));
            canvas.drawText(""+i, x, y - ((mTextPaint.descent() + mTextPaint.ascent()) / 2), mTextPaint);
        }
    }

    private int getDegree(){
        checkTemperature(mTemperature);
        return -225 + (int)((mTemperature-16)/12*90+0.5f)*3;
    }
    /*****************   用来控制事件的三个方法  ************************/
    private void checkTemperature(float t){
        if(t<16 || t > 28){
            throw new RuntimeException("Temperature out of range");
        }
    }

    public void setTemperature(float t){
        checkTemperature(t);
        mTemperature = t;
        // To force a view to draw, call invalidate().
        invalidate();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // 获取触摸位置
        float x = event.getX();
        float y = event.getY();

        // 计算触摸点到中心点的距离,判断该点是否在圆弧之内
        double distance = Math.sqrt((x - mCenter) * (x - mCenter) + (y - mCenter) * (y - mCenter));
        if(distance < mInnerRadius || distance > mInnerRadius + mGapWidth){
            return false;
        }
        // 判断是否在空白区
        double degree = Math.atan2(-(y-mCenter),x-mCenter);
        if(-3*Math.PI/4<degree && degree < -Math.PI/4){
            return false;
        }
        // 计算角度,并转换为对应的温度,设置当前温度,设置温度之后会自动对View进行重绘
        if(degree < -3*Math.PI/4){
            degree = degree + 2*Math.PI;
        }
        float t = (float) (26 - degree*8/Math.PI);
        setTemperature(t);

        return true;
    }
    /*****************   为了获得mMinSize  ************************/
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int desiredWidth = Integer.MAX_VALUE;

        /**
         * Extracts the mode from the supplied measure specification.
         *
         * Parameters
         *     measureSpec    the measure specification to extract the mode from
         * Returns
         *     UNSPECIFIED, AT_MOST or EXACTLY
         */
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        int width;
        int height;

        //Measure Width
        if (widthMode == MeasureSpec.EXACTLY) {
            //Must be this size
            width = widthSize;
            //Toast.makeText(getContext(), "MeasureSpec.EXACTLY", 0).show();
        } else if (widthMode == MeasureSpec.AT_MOST) {
            width = Math.min(desiredWidth, widthSize);
            //Toast.makeText(getContext(), "MeasureSpec.AT_MOST"+desiredWidth+" "+widthSize, 0).show();
        } else {
            //Be whatever you want
            width = desiredWidth;
            //Toast.makeText(getContext(), "MeasureSpec.UNSPECIFIED", 0).show();
        }
        mMinSize = width/600f;

        int size = width;
        initSize();
        //Measure Height
        if (heightMode == MeasureSpec.EXACTLY) {
            //Must be this size
            height = heightSize;
        } else if (heightMode == View.MeasureSpec.AT_MOST) {
            //Can‘t be bigger than...
            height = Math.min(size, heightSize);
        } else {
            //Be whatever you want
            height = size;
        }

        //MUST CALL THIS
        /**
         * This method must be called by onMeasure(int, int) to store the measured width and measured height. Failing to do so will trigger an exception at measurement time.
         *
         * Parameters
         *     measuredWidth    The measured width of this view. May be a complex bit mask as defined by MEASURED_SIZE_MASK and MEASURED_STATE_TOO_SMALL.
         *     measuredHeight    The measured height of this view. May be a complex bit mask as defined by MEASURED_SIZE_MASK and MEASURED_STATE_TOO_SMALL.
         */
        setMeasuredDimension(width, height);
    }

}

时间: 2024-10-19 01:43:21

Android custom View AirConditionerView hacking的相关文章

Android Custom View

http://www.cnblogs.com/angeldevil/p/3479431.html Android Custom View,布布扣,bubuko.com

Android中View的绘制过程 onMeasure方法简述

Android中View的绘制过程 当Activity获得焦点时,它将被要求绘制自己的布局,Android framework将会处理绘制过程,Activity只需提供它的布局的根节点. 绘制过程从布局的根节点开始,从根节点开始测量和绘制整个layout tree. 每一个ViewGroup 负责要求它的每一个孩子被绘制,每一个View负责绘制自己. 因为整个树是按顺序遍历的,所以父节点会先被绘制,而兄弟节点会按照它们在树中出现的顺序被绘制. 绘制是一个两遍(two pass)的过程:一个mea

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

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

【转】Android中View的绘制过程 onMeasure方法简述 附有自定义View例子

Android中View的绘制过程 当Activity获得焦点时,它将被要求绘制自己的布局,Android framework将会处理绘制过程,Activity只需提供它的布局的根节点. 绘制过程从布局的根节点开始,从根节点开始测量和绘制整个layout tree. 每一个ViewGroup 负责要求它的每一个孩子被绘制,每一个View负责绘制自己. 因为整个树是按顺序遍历的,所以父节点会先被绘制,而兄弟节点会按照它们在树中出现的顺序被绘制. 绘制是一个两遍(two pass)的过程:一个mea

【十一】注入框架RoboGuice使用:(Your First Injection into a Custom View class)

上一篇我们简单的介绍了一下RoboGuice的使用([十]注入框架RoboGuice使用:(Your First Testcase)),今天我们来看下自定义View的注入(Custom View). 在开始本文之前,你先要熟悉普通Java对象的注入(点击进入).在RoboGuice 3.0版本中你同样给自定义View(Custom View)进行诸如. class MyView extends View { @Inject Foo foo; @InjectView(R.id.my_view) T

[原] Android 自定义View步骤

例子如下:Android 自定义View 密码框 例子 1 良好的自定义View 易用,标准,开放. 一个设计良好的自定义view和其他设计良好的类很像.封装了某个具有易用性接口的功能组合,这些功能能够有效地使用CPU和内存,并且十分开放的.但是,除了开始一个设计良好的类之外,一个自定义view应该: l 符合安卓标准 l 提供能够在Android XML布局中工作的自定义样式属性 l 发送可访问的事件 l 与多个Android平台兼容. Android框架提供了一套基本的类和XML标签来帮您创

我的Android进阶之旅------&gt;Android自定义View实现带数字的进度条(NumberProgressBar)

今天在Github上面看到一个来自于 daimajia所写的关于Android自定义View实现带数字的进度条(NumberProgressBar)的精彩案例,在这里分享给大家一起来学习学习!同时感谢daimajia的开源奉献! 第一步.效果展示 图1.蓝色的进度条 图2.红色的进度条 图3.多条颜色不同的进度条 图4.多条颜色不同的进度条 版权声明:本文为[欧阳鹏]原创文章,欢迎转载,转载请注明出处! [http://blog.csdn.net/ouyang_peng/article/deta

Android中View绘制优化之三---- 优化View

本文原创, 转载请注明出处:http://blog.csdn.net/qinjuning 译三: 优化视图 关于如何设计自定义View以及响应触摸时间等,请看Android developer : 地址:http://developer.android.com/training/custom-views/index.html 本文翻译地址:Optimizing the View 通过前面的学习,现在该设计良好的View能够响应手势以及状态之间进行转换,除此之外你必须确保View 运行的流畅快速.

Android中View的绘制过程 onMeasure方法简述 附有自定义View例子

Android中View的绘制过程 当Activity获得焦点时,它将被要求绘制自己的布局,Android framework将会处理绘制过程,Activity只需提供它的布局的根节点. 绘制过程从布局的根节点开始,从根节点开始测量和绘制整个layout tree. 每一个ViewGroup 负责要求它的每一个孩子被绘制,每一个View负责绘制自己. 因为整个树是按顺序遍历的,所以父节点会先被绘制,而兄弟节点会按照它们在树中出现的顺序被绘制. 绘制是一个两遍(two pass)的过程:一个mea