新手自定义view练习实例之（一） 泡泡弹窗

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

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

公司需要做地图，无奈美工没有给那种泡泡窗口，于是只能自定义view自己画一个。

由于实现比较简单，便想写下来，给新手做一个自定义view的参考，新人学自定义view的时候也可以先拿这个练手。

首先看效果图，就是一般的泡泡窗啦。

那么现在就开始了，分析一下，其实就是一个圆角矩形 加上一个三角。画出来就是了。

首先先创建一个类，继承自View  ，重写他的构造方法，这里为了简便就不加自定义属性了。

   public PopupView(Context context) {
        this(context,null);
    }

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

    public PopupView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

    }

然后是测量他的大小，为了方便，这里只给出EXACTLY的测量值，AT_MOST的时候大家可以自己给一个初始值，这里就不加了

里面有个mRect，其实就是圆角矩形啦。圆角矩形要比整体的view小一点，这里我直接乘上一个百分比来体现，我给的值是mRectPercent = 0.8；（这个处理方式是十分不好的，是一种错误的方式，这里我不想更正了，因为只有错误才能提高。你可以查看下一篇博客，计算了padding，让矩形处于最中间）。

  @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        if(widthMode== MeasureSpec.EXACTLY){
            mWidth = widthSize; //获取到当前view的宽度
            mRectWidth = (int) (mWidth * mRectPercent);//计算矩形的大小 这里是直接给的初值为0.8 也就是说矩形是view大小的0.8倍 下同
        }
        if(heightMode == MeasureSpec.EXACTLY){
            mHeight = heightSize;//获取当前view的高度

            mRectHeight = (int) (mHeight * mRectPercent+0.1);
        }

        setMeasuredDimension(mWidth,mHeight);
    }

测量完成以后接下来就是绘制了，绘制起来也比较简单，关键是计算出关键点的坐标。这里来一张图表示一下

只需要把三角的三个点的坐标计算出来就可以了。至于后面加减的数字，其实就是三角形的高和底边长 也很简单，聪明的你一定一看就懂。

那么就把这些坐标画成图形。

 @Override
    protected void onDraw(Canvas canvas) {
        Paint p = new Paint();
        p.setColor(Color.parseColor("#2C97DE"));
        p.setStyle(Paint.Style.FILL);

        canvas.drawRoundRect(new RectF(0,0,mRectWidth,mRectHeight),10,10,p);

        Path path = new Path();
        path.moveTo(mRectWidth/2-30,mRectHeight);
        path.lineTo(mRectWidth/2,mRectHeight+20);
        path.lineTo(mRectWidth/2+30,mRectHeight);
        path.close();
        canvas.drawPath(path,p);
        
        super.onDraw(canvas);
    }

其中圆角矩形是用drawRoundRect方法来绘制的，里面是一个基本的矩形，和圆角的半径

三角形是用path来绘制，首先用moveTo设定起点坐标，最后将两条线连接起来，别忘了close成一个封闭的图形。

这样就大功告成泡泡窗，不用麻烦美工啦！

如果你觉得这个自定义view比较简单可以闭着眼睛写出来，你还可以参考进阶一点点的 自定义圆形百分比，进度条 进行练习，总之自定义view并不难，只要多练，就一定会掌握熟练。