新手自定义view练习实例之（二）波浪view

本系列是为新手准备的自定义view练习项目（大牛请无视），相信在学习过程中，想学自定义view又无从下手，不知道做什么。本系列为新手提供了一系列自定义view的简单实例。看过理解之后，自己实现，相信会有很大提高。

转载请注明本篇出处：http://blog.csdn.net/wingichoy/article/details/50460213

继续来本系列的第二篇，启发是吃口香糖看到了包装纸，觉得挺好看，就想画一个出来#职业病#，本次的目标是做一个波浪形状的view，可以是尖角，也可以是圆角。

那么老规矩，上效果图：

聪明的你一眼就看出来了，不就是个矩形加好多三角嘛。答对了，就是这么简单，事不宜迟，快拿起武器动手练一练。毕竟程序员的秘诀就是“无他，唯手熟尔”。

首先，新建一个类起名为WaveView 继承自View，重写他的构造方法，在第三个构造方法里获取自定义属性。

 public WaveView(Context context) {

        this(context, null);

    }

    public WaveView(Context context, AttributeSet attrs) {

        this(context, attrs, 0);

    }

    public WaveView(Context context, AttributeSet attrs, int defStyleAttr) {

        super(context, attrs, defStyleAttr);

        mContext = context;

        TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.WaveView,defStyleAttr,0);

        mWaveCount = a.getInt(R.styleable.WaveView_waveCount,10);

        mWaveWidth = a.getInt(R.styleable.WaveView_waveWidth,20);

        mMode = a.getInteger(R.styleable.WaveView_mode,-2);

        mColor = a.getColor(R.styleable.WaveView_android_color,Color.parseColor("#2C97DE"));

    }

自定义属性如下 attr.xml:

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <declare-styleable name="WaveView">

        <attr name="waveCount" format="integer"/>

        <attr name="waveWidth" format="integer"/>

        <attr name="android:color"/>

        <attr name="mode" >

            <enum name = "circle" value="-1"/>

            <enum name = "triangle" value = "-2"/>

        </attr>

    </declare-styleable>

</resources>

这些都没有什么好说的，你一定已经轻车熟路。

然后重写他的onMeasure() 来告诉系统这个view有多大。

@Override

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        int widthSize = MeasureSpec.getSize(widthMeasureSpec);

        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        int widthMode = MeasureSpec.getMode(widthMeasureSpec);

        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        //矩形宽度为view的80%

        if (widthMode == MeasureSpec.EXACTLY) {

            mWidth = widthSize;

            mRectWidth = (float) (mWidth * 0.8);

            //如果是wrap_content 直接给一个定值

        }else if(widthMode == MeasureSpec.AT_MOST){

            mWidth = PxUtils.dpToPx(300,mContext);

            mRectWidth = (float) (mWidth * 0.8);

        }

        //矩形高度为view的80%

        if (heightMode == MeasureSpec.EXACTLY) {

            mHeight = heightSize;

            mRectHeight = (float) (mHeight * 0.8);

            //如果是wrap_content 直接给一个定值

        }else if(heightMode == MeasureSpec.AT_MOST){

            mHeight = PxUtils.dpToPx(200,mContext);

            mRectHeight = (float) (mHeight * 0.8);

        }

        setMeasuredDimension(mWidth, mHeight);

    }

准备工作大致已经完成，接下来开始绘图。首先画一个矩形。

这个矩形让他处于view的中间，看图：

由图可知，矩形的左上坐标为 padding ,padding 矩形的右下坐标为padding +mRectWidth, padding + mRectHeight

其中padding 为 (mWidth - mRectWidth)/2 注意这里只是左右padding 为了简易就不计算上下padding了。

所以我们先将矩形绘制出来，如下图: 可以看到左右padding是相等的，上下不等，这是因为上面只计算了左右padding

 protected void onDraw(Canvas canvas) {

        Paint p = new Paint();

        p.setColor(mColor);

        //计算每个三角形的高

        mWaveHeight = mRectHeight / mWaveCount;

        //绘制矩形

        //计算padding

        float padding = ((mWidth - mRectWidth) / 2);

        canvas.drawRect(padding, padding, mRectWidth + padding, mRectHeight + padding, p);

绘制矩形完毕，需要来一个判断，判断当前模式是圆角还是尖角

 if(mMode == MODE_TRIANGLE) {}else{}

我们首先来绘制尖角，还记得上一篇泡泡窗的那个三角吗，我们只要画多次不就形成波浪了吗，所以用循环就可以搞定。坐标计算如下：

矩形的右上角暂定为 StartX，StartY 三角形的宽度为 mWaveWidth 高度为 mWaveHeight 那么还是用path来画，首先将path MoveTo startX,startY 然后计算得出各个坐标，在用一个i来代表第几个三角形来做循环，代码如下：

if(mMode == MODE_TRIANGLE) {

            //绘制右边的波浪

            float startX = padding + mRectWidth;

            float startY = padding;

            Path path = new Path();

            path.moveTo(startX, startY);

            for (int i = 0; i < mWaveCount; i++) {

                path.lineTo(startX + mWaveWidth, startY + i * mWaveHeight + (mWaveHeight / 2));

                path.lineTo(startX, startY + mWaveHeight * (i + 1));

            }

            path.close();

            canvas.drawPath(path, p);

只要把上面的坐标带入进去即可，那么左边的波浪只是改变了一个x坐标的加减值，也很简单。

  //绘制左边的波浪

            startX = padding;

            startY = padding;

            path.moveTo(startX, startY);

            for (int i = 0; i < mWaveCount; i++) {

                path.lineTo(startX - mWaveWidth, startY + i * mWaveHeight + (mWaveHeight / 2));

                path.lineTo(startX, startY + mWaveHeight * (i + 1));

            }

            path.close();

            canvas.drawPath(path, p);

这样便完成了整个波浪view的绘制。本篇就到此结束了。

别急，我没忘圆形模式，这里给大家留个家庭作业，大家下去根据这个思路自己把圆形波浪画出来吧~ 毕竟只有多练，才能提高

本项目github地址：点击打开链接，求关注，求评论，求star

巴特西

新手自定义view练习实例之（二）波浪view

最新文章

热门文章

巴特西

新手自定义view练习实例之（二） 波浪view

最新文章

热门文章

新手自定义view练习实例之（二）波浪view