自定义View（重绘）

最新推荐文章于 2023-02-27 00:02:42 发布

u010542146

最新推荐文章于 2023-02-27 00:02:42 发布

阅读量3.8k

点赞数 1

分类专栏： android学习路

android学习路专栏收录该内容

91 篇文章 0 订阅

订阅专栏

这里的定义View是创建全新的View

下面有2个实例

1.带弧形的
(1)重写onMeasure(),获得View的长和高
(2)根据获得的长和高来画图

1.ArcView.java

package com.example.day0113.ui.view;

import android.R.color;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.FontMetrics;
import android.graphics.Paint.Style;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

public class ArcView extends View{

    private Paint paint;
    private Paint whitePaint;
    private Paint arcPaint;
    private int width;
    private int height;
    private float x;//中心点x
    private float y;//中心点y
    private float radius;
    private float fontHeight;//文字的高度
    private RectF mrectf;
    private float arcRadius;
    private int mTextSize;
    private int mArcWidth;
    public ArcView(Context context, AttributeSet attrs) {
        super(context, attrs);

//      width = getResources().getDisplayMetrics().widthPixels;
//      height = getResources().getDisplayMetrics().heightPixels;
    }


    private void init() {
        x = width/2;
        y = height/2;
        radius = width/4;
        arcRadius = width/3;
        mTextSize = width/10;
        mArcWidth = width/20;

        paint = new Paint();
        paint.setColor(Color.BLACK);
        paint.setStyle(Style.FILL);
        paint.setAntiAlias(true);//设置抗锯齿
        whitePaint = new Paint();
        whitePaint.setColor(Color.WHITE);
        whitePaint.setStyle(Style.FILL);
        whitePaint.setTextSize(mTextSize);
        whitePaint.setTextAlign(Paint.Align.CENTER);//让Text水平居中
        FontMetrics fontMetrics = whitePaint.getFontMetrics(); 
        // 计算文字高度 
        fontHeight = fontMetrics.bottom - fontMetrics.top; //用来让Text垂直居中

        arcPaint = new Paint();
        arcPaint.setColor(Color.BLACK);
        arcPaint.setStyle(Style.STROKE);//设置空心
        arcPaint.setStrokeWidth(mArcWidth);//设置画笔的粗细
        arcPaint.setAntiAlias(true);//设置抗锯齿
        mrectf = new RectF((float)(x-arcRadius), (float)(y-arcRadius), (float)(x+arcRadius), (float)(y+arcRadius));
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = measureWidth(widthMeasureSpec);//得到View的宽
        height = measureHight(heightMeasureSpec);//得到View的高
        setMeasuredDimension(width,height);

        init();//初始化
    }

    private int measureWidth(int widthMeasureSpec) {
        int result = 0;
        int specMode = MeasureSpec.getMode(widthMeasureSpec);
        int specSize = MeasureSpec.getSize(widthMeasureSpec);
        if (specMode == MeasureSpec.EXACTLY) {
            result = specSize;
        } else {
            result = 200;
            if (specMode == MeasureSpec.AT_MOST) {
                result = Math.min(result, specSize);
            }
        }
        return result;
    }

    private int measureHight(int heightMeasureSpec) {
        int result = 0;
        int specMode = MeasureSpec.getMode(heightMeasureSpec);
        int specSize = MeasureSpec.getSize(heightMeasureSpec);
        if (specMode == MeasureSpec.EXACTLY) {
            result = specSize;
        } else {
            result = 200;
            if (specMode == MeasureSpec.AT_MOST) {
                result = Math.min(result, specSize);
            }
        }
        return result;
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //画圆
        canvas.drawCircle(x, y, radius, paint);
        //画字
        canvas.drawText("Hero", x, y+(fontHeight/4), whitePaint);
        //画弧线
        canvas.drawArc(mrectf, 270, 270, false, arcPaint);
        //canvas.drawArc(外接矩阵, 开始的角度, 弧线的范围，360为圆, 弧线有无连线, 画笔);
    }

}

xml

<FrameLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">


    <com.example.day0113.ui.view.ArcView 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
    <com.example.day0113.ui.view.ArcView 
        android:layout_width="100dp"
        android:layout_height="100dp"
        />

</FrameLayout>

效果:
这里写图片描述

2.模拟音频条形图
AudioView.java

package com.example.day0113.ui.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

public class AudioView extends View{

    private int width;
    private int height;
    private int rectCount = 10;
    private Paint paint;
    private int offset;
    private int rectWidth;

    public AudioView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //画矩形
        for (int i=0;i<rectCount;i++) {
            canvas.drawRect((float)(width*0.1+rectWidth*i+offset), (float)getRectHight(), (float)(width*0.1+rectWidth*(i+1)), (float)height, paint);
        }

        postInvalidateDelayed(300);//300毫秒刷新
    }


    private double getRectHight() {
        double h = 0;
        h = Math.random()*height;
        return h;
    }

    private void init() {
        paint = new Paint();
        paint.setColor(Color.YELLOW);
        rectWidth = width/15;
        offset = width/30;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // TODO Auto-generated method stub
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = measureWidth(widthMeasureSpec);//得到View的宽
        height = measureHight(heightMeasureSpec);//得到View的高
        setMeasuredDimension(width,height);
        init();//初始化
    }

    private int measureWidth(int widthMeasureSpec) {
        int result = 0;
        int specMode = MeasureSpec.getMode(widthMeasureSpec);
        int specSize = MeasureSpec.getSize(widthMeasureSpec);
        if (specMode == MeasureSpec.EXACTLY) {
            result = specSize;
        } else {
            result = 200;
            if (specMode == MeasureSpec.AT_MOST) {
                result = Math.min(result, specSize);
            }
        }
        return result;
    }

    private int measureHight(int heightMeasureSpec) {
        int result = 0;
        int specMode = MeasureSpec.getMode(heightMeasureSpec);
        int specSize = MeasureSpec.getSize(heightMeasureSpec);
        if (specMode == MeasureSpec.EXACTLY) {
            result = specSize;
        } else {
            result = 200;
            if (specMode == MeasureSpec.AT_MOST) {
                result = Math.min(result, specSize);
            }
        }
        return result;
    }

}

xml

<FrameLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">


    <com.example.day0113.ui.view.AudioView 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
    <com.example.day0113.ui.view.AudioView 
        android:layout_width="100dp"
        android:layout_height="100dp"
        />

</FrameLayout>

效果
这里写图片描述

2016/2/19更新

如何自定义控件？
1.自定义属性的声明与获取
2.测量onMeasure
3.布局onLayout（ViewGroup）
4.绘制onDraw
5.onTouchEvent
6.onInterceptTouchTvent（ViewGroup）

测量onMeasure
1.EXACTLY, AT_MOST, UNSPECIFIED//exactly是精确,比如30dp，at_most是大致，一般用于warp_content,指最大不能超过父控件传下来的值（MeasureSpec.getSize(heightMeasureSpec)），unspecified是没有限制，要多大就多大，一般用于listview，scrollview
2.MeasureSpec //辅助类，得到模式和值
3.setMeasuredDimension//设置自身宽高
4.requestLayout()//会调用onMeasure和布局，但不调用onDraw

布局onLayout(ViewGroup)
1.决定子View的位置
2.尽可能将onMeasure中一些操作移动到此方法中
3.requestLayout（）

绘制onDraw
1.绘制内容区域
2.invaildate（）
3.Canvas.drawXXX
4.translate,rotate,scale,skew
5.save(),restore()

onTouchEvent
1.ACTION_DOWN,ACTION_MOVE,ACTION_UP
2.ACTION_POINTER_DOWN,ACTION_POINTER_UP
3.parent.requestDisallow-interceptTouchEvent(true);//告诉父控件不要拦截子控件的触发事件
4.VelocityTracker

onInterceptTouchEvent（ViewGroup）
1.ACTION_DOWN,ACTION_MOVE,ACTION_UP
2.ACTION_POINTER_DOWN,ACTION_POINTER_UP
3.决定是否拦截该手势//这就是为什么listview可以滚动，尽管item可能有触发事件，但是会被拦截（在MOVE事件里做判断）

u010542146

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
自定义View（重绘）

这里的定义View是创建全新的View下面有2个实例1.带弧形的 (1)重写onMeasure(),获得View的长和高 (2)根据获得的长和高来画图1.ArcView.javapackage com.example.day0113.ui.view;import android.R.color;import android.annotation.SuppressLint;import and
复制链接

扫一扫