android自定义view

1.需求

1.1简单实现一个自定义view，熟悉自定义view的步骤。实现下图效果

2.实现

2.1首先在res/values/下新建一个attrs.xml文件自定义view所具有的属性，

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--最好与自定义的类名一致-->
    <declare-styleable name="WaveView">
        <attr name="text" format="string"/> 
        <attr name="android:color"/>  
    </declare-styleable>
</resources>

2.2实现页面的布局

<!--注意这里导入自己的命名空间，最后改为AndroidManifest.xml中的包名-->  
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
 xmlns:waveview="http://schemas.android.com/apk/res/com.example.myview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <Button android:id="@+id/btn"
            android:layout_width="match_parent"
            android:layout_height="50sp"
            android:text="@string/wave_view"/>

    <com.chet.view.WaveView 
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"
        <!--自定义属性-->
        waveview:text="卡卷一"/>  

</RelativeLayout>

2.3实现自定义的View类

package com.chet.view;

import com.example.myview.R;

import android.content.Context;
import android.content.res.TypedArray;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;

public class WaveView extends View{


    private int mWidth;
    private int mHeight;
    private int mColor;
    private Paint mPaint;
    private Path mPath;
    private String text;

    public WaveView(Context context) {
        // TODO Auto-generated constructor stub
        this(context,null);
    }


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

    //在这里获取自定义view的属性
    public WaveView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // TODO Auto-generated constructor stub
        //获得属性值 参数一 获取的值的地方  参数二所需要获取的值，也就是在attrs.xml中定义的
        TypedArray myarr = context.obtainStyledAttributes(attrs, R.styleable.WaveView ); 
        mColor = myarr.getColor(R.styleable.WaveView_android_color,Color.parseColor("#2C97DE"));
        text = myarr.getString(R.styleable.WaveView_text);
        mPaint = new Paint();
        mPath = new Path();
        myarr.recycle();
    }

    //测量模式  父布局告知你子view的大小参考
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthMeasureMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMeasureMode = MeasureSpec.getMode(heightMeasureSpec);
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        //如果是实际大小则不改变
        if(widthMeasureMode == MeasureSpec.EXACTLY)
        {
            mWidth = width;

        }
        //当前尺寸是所能取得最大值 直接取最大值
        if(widthMeasureMode == MeasureSpec.AT_MOST)
        {
            mWidth = width;
        }
        //如果是实际大小则不改变
        if(heightMeasureMode == MeasureSpec.EXACTLY)
        {
            mHeight = height;

        }
        //当前尺寸是所能取得最大值
        if(heightMeasureMode == MeasureSpec.AT_MOST)
        {
            mHeight = height;
        }

        //还有一个不限制view的大小的选项，但比较少用
        setMeasuredDimension(mWidth, mHeight);


    }

    //在这里重画view  以左上角为原点  左方位x轴  下方为y轴
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        mPaint.setColor(mColor);
        //矩形的高度  代码比较粗糙  参考一下就可以了
        float mRectHeight = (float) (this.getWidth()*0.4);
        float mRectWidht = (float) (this.getHeight()*0.6);

        float left = (this.getWidth()-mRectWidht)/2;
        float top = (this.getHeight()-mRectHeight)/2;

        //先画一个矩形  drawRect  
        canvas.drawRect(left, top, left+mRectWidht, top+mRectHeight, mPaint);
        mPaint.setTextSize(50);
        mPaint.setColor(Color.BLACK);

        //left 代表横坐标  而 top+mRectHeight 则是基线的位置 并不是纵坐标
        canvas.drawText(text, left , top+mRectHeight , mPaint);
        //画左边的三角 使用path 假设有十个三角  每个三角行的与正方形贴合的边长为
        float   pahtCount = mRectHeight/10;

        mPaint.setColor(mColor);
        //从这里开始划线
        mPath.moveTo(left, top);
        //以矩形的左上角坐标开始画循环十次
        for (int i=0 ;i<10;i++)
        {

            mPath.lineTo(left-20, (pahtCount*i+pahtCount/2)+top);
            mPath.lineTo(left, pahtCount*(i+1)+top);
        }
        //回到起点闭合图案
        mPath.close();
        canvas.drawPath(mPath,mPaint);

        //画右边的三角
        mPath.moveTo(left+mRectWidht, top);
        //以矩形的左上角坐标开始画循环十次
        for (int i=0 ;i<10;i++)
        {

            mPath.lineTo(left+mRectWidht+20, (pahtCount*i+pahtCount/2)+top);
            mPath.lineTo(left+mRectWidht, pahtCount*(i+1)+top);
        }
        mPath.close();
        canvas.drawPath(mPath,mPaint);

    }



}

2.4页面Activity，懒不贴了，