android自定义view

来源：互联网发布：文案写得很好的淘宝店编辑：程序博客网时间：2024/06/03 21:54

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，懒不贴了，

0 0