Android自定义View

作者: Daniel_adu | 来源:发表于2017-05-08 19:41 被阅读82次

    Android自定义View

    参考:
    从此再有不愁自定义View——Android自定义view详解
    android View绘制源码分析(上)
    android View绘制源码分析(下)

    1.介绍

    自定义一个View有以下几个步骤:Measure,Layout,Draw。
    一个说明这个view的大小,一个定制位置,一个绘制这个view

    2.Measure

    measure的方法如下:
    void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    有两个参数,一个是宽度参数,一个是高度参数。
    一个int是4个字节,在measureapec中,使用前2位表示mode,后面30位表示size。
    mode有三种:EXACTLY, AT_MOSTUNSPECIFIED。当父布局是EXACTLY时,子控件确定大小或者match_parent,mode都是EXACTLY,子控件是wrap_content时,mode为AT_MOST;当父布局是AT_MOST时,子控件确定大小,mode为EXACTLY,子控件wrap_content或者match_parent时,mode为AT_MOST
    可以使用如下方法来看采用的模式和size大小

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            int widthMode = MeasureSpec.getMode(widthMeasureSpec);
            int widthSize = MeasureSpec.getSize(widthMeasureSpec);
            int heightMode = MeasureSpec.getMode(heightMeasureSpec);
            int heightSize = MeasureSpec.getSize(heightMeasureSpec);
            int size = 1111;
            int measureWidth = widthMode==MeasureSpec.EXACTLY ? widthSize : size;
            int measureHeight = heightMode==MeasureSpec.EXACTLY ? heightSize : size;
            setMeasuredDimension(measureWidth,measureHeight);
        }
    
    

    3.自定义属性

    (1)先在res/values/下建立xml文件,比如:attrs.xml,在里面自定义属性,比如这里background_color和size

    <resources>
        <declare-styleable name="MyView">
            <attr name="background_color" format="color"/>
            <attr name="size" format="dimension"/>
        </declare-styleable>
    </resources>
    
    

    (2)在布局文件xml中将这个自定义属性用上:

     <com.microsoft.hond.fortest.MyView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginRight="16dp"
                android:layout_marginTop="16dp"
                app:background_color="@color/colorPrimary"
                app:size="24dp"
                />
    
    

    现在已经用上了,但是还不知道这个属性是干嘛用的,因此需要在代码中把这两个属性的值拿出来,然后把其值用到真正的属性中去。

    (3)在自定义的View中,比如这里的MyView.java,有三种构造方法,采用第三种构造,即有三个输入参数的构造方法。

     public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            // TODO Auto-generated constructor stub
            TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.MyView,defStyleAttr,R.style.AppTheme);
    
            customer_size = a.getDimensionPixelSize(R.styleable.MyView_size,size);
            customer_background = a.getColor(R.styleable.MyView_background_color, Color.RED);
    
            a.recycle();
        }
    
    

    先用obtainStyledAttributes取得xml中属性的名字,然后使用get方法获得各自的属性的值,最后调用recycle方法

    4. Paint

    在onDraw中最主要的就是使用paint画图了。首先要知道的是measure和layout为draw提供了一个入参Canvas,就是画布,告诉开发者在这个地方这块布上进行画画。而这时候需要掏出一支笔,是红笔蓝笔,还是粗的笔细的笔,就需要使用Paint类去定义了。
    比如下面这个Paint定义

        private void initPaint() {
            bgPaint = new Paint();
            bgPaint.setColor(bgPaintColor);
            bgPaint.setAntiAlias(true);
            bgPaint.setStrokeWidth(paintBold);
            //使得画笔更加圆滑
            bgPaint.setStrokeJoin(Paint.Join.ROUND);
            bgPaint.setStrokeCap(Paint.Cap.ROUND);
    
            bfPaint = new Paint();
            bfPaint.setColor(beforePaintColor);
            bfPaint.setAntiAlias(true);
            bfPaint.setStrokeWidth(paintBold);
            bfPaint.setStrokeJoin(Paint.Join.ROUND);
            bfPaint.setStrokeCap(Paint.Cap.ROUND);
    
            textPaint = new Paint();
            textPaint.setColor(textColor);
            textPaint.setAntiAlias(true);
            textPaint.setTextAlign(Paint.Align.CENTER);
            textPaint.setTextSize(40);
        }
    
    

    上面就掏出了三支笔bgPaint,bfPain和textPaint

    5.onDraw

    onDraw就是当你有了画布,有了画笔,系统为Canvas画布提供了一系列的画画方式,比如你想画什么,画圆就用drawCircle,画线就用drawLine,里面一般带上需要的参数,比如画圆就带上圆心的x和y,还有半径。另外每一个方法都要带上画笔paint。

    6.插入属性动画ValueAnimatorObjectAnimator

    先定义一个ValueAnimator,然后对其属性进行配置

    public void startAnimation() {
            mAnimator = ValueAnimator.ofFloat(1, 2);
            mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    scale = (float) animation.getAnimatedValue();
                    postInvalidate();
                }
            });
    
            // 重复次数 -1表示无限循环
            mAnimator.setRepeatCount(-1);
            //重复周期
            mAnimator.setDuration(1000);
            // 重复模式, RESTART: 重新开始 REVERSE:恢复初始状态再开始
            mAnimator.setRepeatMode(ValueAnimator.REVERSE);
    
            mAnimator.start();
        }
    
    

    通过调整scale的大小来调整园的大小,因此可以看到每一秒圆的半径就会放大一倍然后变成原先状态。

    ObjectAnimator是对ValueAnimator的继承,可以对某一个view对象而不是一个value进行操作,比如可以直接对一个textView操作,不需要通过值来改变。
    ObjectAnimator对于大部分的来说已经够用了(如果不是自己绘制的view),毕竟大部分的view可以输入进来直接记性变换,而只有一些很强的定制的view需要通过值来改变。
    使用:

        private void setAnimal() {
            ObjectAnimator animator = ObjectAnimator.ofFloat(mTextView, "alpha", 1f, 0f, 1f);
            animator.setDuration(5000);
            animator.setRepeatCount(-1);
            // 重复模式, RESTART: 重新开始 REVERSE:恢复初始状态再开始
            animator.setRepeatMode(ValueAnimator.REVERSE);
            animator.start();
        }
    
    

    比如上面代码,就通过改变一个textView的alpha属性,使其透明度不断变化。达到了动画的要求。
    总结:简单的有对象的(如textView等等)直接使用ObjectAnimator改变属性值,自己定制的,使用ValueAnimator,通过改变值来改变绘制。

    7.View的点击事件

    通过覆写onTouch达到目的

    float x = event.getX();
            float y = event.getY();
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN: //按下
                    setDefault();
                    handleDown(x, y);
                    return true;
                case MotionEvent.ACTION_UP: //弹起
                    type = 1;//弹起刷新
                    invalidate();//刷新界面
                    //一次按下结束,返回点击的数字
                    if (onNumberClickListener != null) {
                        if (number != null) {
                            if (number.equals("delete")) {
                                onNumberClickListener.onNumberDelete();
                            } else {
                                onNumberClickListener.onNumberReturn(number);
                            }
                        }
                    }
                    //恢复默认
                    setDefault();
                    return true;
                case MotionEvent.ACTION_CANCEL:  //取消
                    //恢复默认值
                    setDefault();
                    return true;
            }
            return false;
    
    

    上面是一个计算器view的点击事件,先获取点击的位置x和y,然后判断点击的属性,是按下,还是松开,还是移动,分别对应不同的动作。

    相关文章

      网友评论

        本文标题:Android自定义View

        本文链接:https://www.haomeiwen.com/subject/thdvtxtx.html