Android实现三角形气泡效果方式汇总

2023-07-04 11:42:03 71

在开发过程中，我们可能会经常遇到这样的需求样式：

这张图是截取京东消息通知的弹出框，我们可以看到右上方有个三角形的气泡效果，这只是其中一种，三角形的方向还可以是上、下、左、右。

通过截图可以发现，气泡由正三角形和圆角长方形组成，于是可以通过组合来形成三角形气泡的效果，下面我们通过三种方式进行实现。

实现方式：

1、通过.9图进行实现；
2、通过shape方式实现；
3、通过自定义view的方式实现；

实现逻辑：

1、通过.9图进行实现

这种方式就不用说了吧，找你们UI小姐姐切一个.9图，使用即可，不过这种方式的图片需要占一定体积哦。

2、通过shape方式实现

正三角形

倒三角形

左三角形

右三角形

上面就是通过shape方式实现各个方向的代码，这种方式缺点比较明显，如果要变化不同的角的位置需要再写不同的布局。

3、通过自定义view的方式实现

由于是比较简单这里就不讲解每个怎么搞了，可以复制过去直接用

添加自定义属性

自定义代码文件

publicclassTriangleViewextendsView{
privatestaticfinalintTOP=0;
privatestaticfinalintBOTTOM=1;
privatestaticfinalintRIGHT=2;
privatestaticfinalintLEFT=3;
privatestaticfinalintDEFUALT_WIDTH=10;
privatestaticfinalintDEFUALT_HEIGHT=6;
privatestaticfinalintDEFUALT_COLOR=R.color.FFF;
privatePaintmPaint;
privateintmColor;
privateintmWidth;
privateintmHeight;
privateintmDirection;
privatePathmPath;

publicTriangleView(finalContextcontext){
this(context,null);
}

publicTriangleView(Contextcontext,@NullableAttributeSetattrs){
this(context,attrs,0);
}

publicTriangleView(finalContextcontext,finalAttributeSetattrs,finalintdefStyleAttr){
super(context,attrs,defStyleAttr);
init();
TypedArraytypedArray=context.getTheme().obtainStyledAttributes(attrs,R.styleable.TriangleView,0,0);
mColor=typedArray.getColor(R.styleable.TriangleView_trv_color,ContextCompat.getColor(getContext(),DEFUALT_COLOR));
mDirection=typedArray.getInt(R.styleable.TriangleView_trv_direction,mDirection);
typedArray.recycle();
mPaint.setColor(mColor);
}

privatevoidinit(){
mPaint=newPaint();
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.FILL);
mPath=newPath();
mDirection=TOP;
}

@Override
protectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec){
super.onMeasure(widthMeasureSpec,heightMeasureSpec);
mWidth=MeasureSpec.getSize(widthMeasureSpec);
mHeight=MeasureSpec.getSize(heightMeasureSpec);
finalintwidthMode=MeasureSpec.getMode(widthMeasureSpec);
finalintheightMode=MeasureSpec.getMode(heightMeasureSpec);
if(mWidth==0||widthMode!=MeasureSpec.EXACTLY){
mWidth=(int)PixelUtil.dp2px(DEFUALT_WIDTH);
}
if(mHeight==0||heightMode!=MeasureSpec.EXACTLY){
mHeight=(int)PixelUtil.dp2px(DEFUALT_HEIGHT);
}
setMeasuredDimension(mWidth,mHeight);
}

@Override
protectedvoidonDraw(Canvascanvas){
super.onDraw(canvas);
switch(mDirection){
caseTOP:
mPath.moveTo(0,mHeight);
mPath.lineTo(mWidth,mHeight);
mPath.lineTo(mWidth/2,0);
break;
caseBOTTOM:
mPath.moveTo(0,0);
mPath.lineTo(mWidth/2,mHeight);
mPath.lineTo(mWidth,0);
break;
caseRIGHT:
mPath.moveTo(0,0);
mPath.lineTo(0,mHeight);
mPath.lineTo(mWidth,mHeight/2);
break;
caseLEFT:
mPath.moveTo(0,mHeight/2);
mPath.lineTo(mWidth,mHeight);
mPath.lineTo(mWidth,0);
break;
default:
break;
}

mPath.close();
canvas.drawPath(mPath,mPaint);
}
}

布局文件添加

通过自定义的方式可以搞定四个方向，而且在代码中也可以使用，动态添加，动态改变颜色，还是比较好的方式。

到此这篇关于Android实现三角形气泡效果方式汇总的文章就介绍到这了,更多相关Android三角形气泡内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Android实现三角形气泡效果方式汇总

实现逻辑：

热门推荐

随机推荐