Android自定义view练习实例之(一) 泡泡弹窗

jopen 8年前

转载请注明出处: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并不难,只要多练,就一定会掌握熟练。



来自: http://blog.csdn.net/wingichoy/article/details/50455412