Android實現三角形氣泡效果方式匯總

在開發過程中，我們可能會經常遇到這樣的需求樣式：

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

通過截圖可以發現，氣泡由正三角形和圓角長方形組成，于是可以通過組合來形成三角形氣泡的效果，下面我們通過三種方式進行實現。

實現方式：

1、通過.9圖進行實現；2、通過shape方式實現；3、通過自定義view的方式實現；

1、通過.9圖進行實現

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

2、通過shape方式實現

正三角形

<?xml version='1.0' encoding='utf-8'?><layer-list xmlns:android='http://schemas.android.com/apk/res/android'> <item> <rotate android:fromDegrees='45' android:pivotX='-40%' android:pivotY='80%'> <shape android:shape='rectangle'><size android: android: /><solid android:color='#ffffff' /> </shape> </rotate> </item></layer-list>

倒三角形

<?xml version='1.0' encoding='utf-8'?><layer-list xmlns:android='http://schemas.android.com/apk/res/android'> <item> <rotate android:fromDegrees='45' android:pivotX='135%' android:pivotY='15%'> <shape android:shape='rectangle'><size android: android: /><solid android:color='#ffffff' /> </shape> </rotate> </item></layer-list>

左三角形

<?xml version='1.0' encoding='utf-8'?><layer-list xmlns:android='http://schemas.android.com/apk/res/android'> <item> <rotate android:fromDegrees='-45' android:pivotX='85%' android:pivotY='-35%'>> <shape android:shape='rectangle'><size android: android: /><solid android:color='#ffffff' /> </shape> </rotate> </item></layer-list>

右三角形

<?xml version='1.0' encoding='utf-8'?><layer-list xmlns:android='http://schemas.android.com/apk/res/android'> <item> <rotate android:fromDegrees='-45' android:pivotX='15%' android:pivotY='135%'>> <shape android:shape='rectangle'><size android: android: /><solid android:color='#ffffff' /> </shape> </rotate> </item></layer-list>

上面就是通過shape方式實現各個方向的代碼，這種方式缺點比較明顯，如果要變化不同的角的位置需要再寫不同的布局。

3、通過自定義view的方式實現

由于是比較簡單這里就不講解每個怎么搞了，可以復制過去直接用

添加自定義屬性

<declare-styleable name='TriangleView'> <attr name='trv_color' format='color' /> <attr name='trv_direction'> <enum name='top' value='0' /> <enum name='bottom' value='1' /> <enum name='right' value='2' /> <enum name='left' value='3' /> </attr> </declare-styleable>

自定義代碼文件

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); }}

布局文件添加

<com.sjl.keeplive.triange.TriangleView android:layout_width='10dp' android:layout_height='6dp' app:trv_color='@color/FFF' app:trv_direction='top' />

通過自定義的方式可以搞定四個方向，而且在代碼中也可以使用，動態添加，動態改變顏色，還是比較好的方式。

到此這篇關于Android實現三角形氣泡效果方式匯總的文章就介紹到這了,更多相關Android 三角形氣泡 內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！