在開發(fā)過(guò)程中，我們可能會(huì)經(jīng)常遇到這樣的需求樣式：

這張圖是截取京東消息通知的彈出框，我們可以看到右上方有個(gè)三角形的氣泡效果，這只是其中一種，三角形的方向還可以是上、下、左、右。

通過(guò)截圖可以發(fā)現(xiàn)，氣泡由正三角形和圓角長(zhǎng)方形組成，于是可以通過(guò)組合來(lái)形成三角形氣泡的效果，下面我們通過(guò)三種方式進(jìn)行實(shí)現(xiàn)。

實(shí)現(xiàn)方式：

1、通過(guò).9圖進(jìn)行實(shí)現(xiàn)；

2、通過(guò)shape方式實(shí)現(xiàn)；

3、通過(guò)自定義view的方式實(shí)現(xiàn)；

實(shí)現(xiàn)邏輯：

1、通過(guò).9圖進(jìn)行實(shí)現(xiàn)

這種方式就不用說(shuō)了吧，找你們UI小姐姐切一個(gè).9圖，使用即可，不過(guò)這種方式的圖片需要占一定體積哦。

2、通過(guò)shape方式實(shí)現(xiàn)

正三角形

android:fromDegrees="45"

android:pivotX="-40%"

android:pivotY="80%">

android:width="15dp"

android:height="15dp" />

倒三角形

android:fromDegrees="45"

android:pivotX="135%"

android:pivotY="15%">

android:width="15dp"

android:height="15dp" />

左三角形

android:fromDegrees="-45"

android:pivotX="85%"

android:pivotY="-35%">>

android:width="15dp"

android:height="15dp" />

右三角形

android:fromDegrees="-45"

android:pivotX="15%"

android:pivotY="135%">>

android:width="15dp"

android:height="15dp" />

上面就是通過(guò)shape方式實(shí)現(xiàn)各個(gè)方向的代碼，這種方式缺點(diǎn)比較明顯，如果要變化不同的角的位置需要再寫不同的布局。

3、通過(guò)自定義view的方式實(shí)現(xiàn)

由于是比較簡(jiǎn)單這里就不講解每個(gè)怎么搞了，可以復(fù)制過(guò)去直接用

添加自定義屬性

自定義代碼文件

public class TriangleView extends View {

private static final int TOP = 0;

private static final int BOTTOM = 1;

private static final int RIGHT = 2;

private static final int LEFT = 3;

private static final int DEFUALT_WIDTH = 10;

private static final int DEFUALT_HEIGHT = 6;

private static final int DEFUALT_COLOR = R.color.FFF;

private Paint mPaint;

private int mColor;

private int mWidth;

private int mHeight;

private int mDirection;

private Path mPath;

public TriangleView(final Context context) {

this(context, null);

}

public TriangleView(Context context, @Nullable AttributeSet attrs) {

this(context, attrs, 0);

}

public TriangleView(final Context context, final AttributeSet attrs, final int defStyleAttr) {

super(context, attrs, defStyleAttr);

init();

TypedArray typedArray = 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);

}

private void init() {

mPaint = new Paint();

mPaint.setAntiAlias(true);

mPaint.setStyle(Paint.Style.FILL);

mPath = new Path();

mDirection = TOP;

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

mWidth = MeasureSpec.getSize(widthMeasureSpec);

mHeight = MeasureSpec.getSize(heightMeasureSpec);

final int widthMode = MeasureSpec.getMode(widthMeasureSpec);

final int heightMode = 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

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

switch (mDirection) {

case TOP:

mPath.moveTo(0, mHeight);

mPath.lineTo(mWidth, mHeight);

mPath.lineTo(mWidth / 2, 0);

break;

case BOTTOM:

mPath.moveTo(0, 0);

mPath.lineTo(mWidth / 2, mHeight);

mPath.lineTo(mWidth, 0);

break;

case RIGHT:

mPath.moveTo(0, 0);

mPath.lineTo(0, mHeight);

mPath.lineTo(mWidth, mHeight / 2);

break;

case LEFT:

mPath.moveTo(0, mHeight / 2);

mPath.lineTo(mWidth, mHeight);

mPath.lineTo(mWidth, 0);

break;

default:

break;

}

mPath.close();

canvas.drawPath(mPath, mPaint);

}

}

布局文件添加

android:layout_width="10dp"

android:layout_height="6dp"

app:trv_color="@color/FFF"

app:trv_direction="top" />

通過(guò)自定義的方式可以搞定四個(gè)方向，而且在代碼中也可以使用，動(dòng)態(tài)添加，動(dòng)態(tài)改變顏色，還是比較好的方式。

到此這篇關(guān)于Android實(shí)現(xiàn)三角形氣泡效果方式匯總的文章就介紹到這了,更多相關(guān)Android 三角形氣泡 內(nèi)容請(qǐng)搜索云海天教程以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持云海天教程！

總結(jié)

以上是生活随笔為你收集整理的Android带三角形的弹窗,Android实现三角形气泡效果方式汇总的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。