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

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

本系列是为新手准备的自定义view练习项目(大牛请无视),相信在学习过程中,想学自定义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);
}

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

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

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

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

 @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并不难,只要多练,就一定会掌握熟练。

上一篇:jenkins 插件开发资料


下一篇:怎么统计指定文件夹下含有.xml格式的文件数目