在即時通信類應用裏,很常見各類氣泡佈局包裹消息,一般咱們採用.9圖實現。可是使用氣泡圖片面臨着間距不可控,若是是圖片消息,此方法就沒法實現氣泡。本文將介紹如何更加用優雅的方式去實現自定義氣泡佈局。android
PS前置知識: 如何自定義view、XFermode混合圖層、path概念以及貝賽爾曲線。 自定義View知識 能夠在這裏找一些文章補充學習。git
慣例,咱們先看下最終要實現的效果圖,以下圖,總共有5種類型,基本知足平常須要,能夠根據須要再進行擴展。 [圖片] github
以上四種常見氣泡,從外形上看是圓角帶犄角,文字內容在氣泡的矩形內,圖片被裁剪部分。 圖片類型的氣泡上,犄角部分是帶有圖片的一部分,並且在圖片的左右下角有一個提示類型的圖片(特殊UI須要),上圖中未體現該效果。文字類型氣泡特殊一些,在單個字的時候,文字是居中的,而後左右內間距和多文字下的間距不同(UI要求),可是從總體上也符合氣泡的通用裁剪規則。容器類型氣泡,內部子view可隨意佈置,可是最終顯示區域只有氣泡部分,這樣可擴展度搞。canvas
那麼咱們如何去造成這種View呢?最開始我接觸到的代碼是用drawable加載.9圖的方式,可是新UI效果圖片類型氣泡就沒法下手了。可供採用的方案有2種,canvas的clipPath和XFermode圖層混合。bash
PS:目前任何佈局類型都是四邊形的,而那些各類形狀的佈局,其實只是四邊形佈局只顯示其中部分區域而已。ide
clipPath: 經過對canvas的裁剪造成氣泡佈局,先用描繪出一個氣泡模樣的path,而後按照這個path把畫布裁剪,而後再這個畫布上繪製內容。具體操做下面會介紹。佈局
XFermode圖層混合:XFermode能夠經過多個圖層進行疊加按照必定規則保留部分圖形區域。利用這個特性,咱們先繪製原始圖形,而後在這個執行以後,依然先描繪出氣泡path,咱們能夠給paint畫筆設置PorterDuffXfermode,而後用畫筆帶上DST_IN模式進行圖層疊加。post
不管哪一種方式,都是須要path的,能夠先看看自定義View知識學習
首先咱們要知道自定義View須要作哪些代碼準備,通常來講,onDraw是必然須要的。根據須要onMeasure,onSizeChange,onLayout,dispatchDraw等方法有時候也須要。本文是實現一個氣泡view,有單一顯示視圖的自定義view以及容器類型的氣泡。因此你們須要瞭解onDraw、onSizeChange、dispatchDraw等須要重寫的方法。此外,瞭解invalidate和postInvalidate等刷新View視圖方法。ui
這個方法是核心,主要是用來描繪出你展現的視圖界面。好比你想畫一個花,那麼這個地方進行最終的描繪工做。在部分狀況下,這裏會在繼承某個View狀況下,增長一些繪製,此時會繼續調用super.onDraw(canvas); ,這樣保留父view的圖形。
在進行ondraw以前會有若干次調用onSizeChange,這裏能夠用來提早獲取當前view的最新高寬,好比下面代碼。
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mHeight = h;
mWidth = w;
}
複製代碼
這個方法在本次自定義view中主要是給容器佈局使用,調用順序在ondraw以後,重寫這個用來在分發繪製內部子view時,繪製須要的背景色以及進行圖層裁剪造成氣泡。
以文本氣泡View爲例,咱們先思考氣泡的圖形path如何造成。首先咱們先繼承TextView,由於咱們要在這個基礎上實現文字氣泡。圖形大體上拆分爲一個圓角矩形,而後再左側或者右側畫一個犄角。犄角是帶有必定弧度的,這個和UI溝經過,我當初是經過px一點點調整最終給到UI滿意的弧度。圓角矩形的繪製就很少說了,看API。犄角,是經過2條二階貝塞爾曲線造成的,上面一條,下面一條(關於path的介紹不少,看上面的預學習連接,或者自行搜索)。
protected void onDraw(Canvas canvas) {
canvas.setDrawFilter(mPaintFlagsDrawFilter);
// LogUtil.i(TAG, getText() + " getPaddingLeft" + getPaddingLeft() + " getPaddingRight" + getPaddingRight());
mSrcPath.reset();
if (mIsRightPop) {
mRoundRect.set(0, 0, mWidth - mWidthDiff, mHeight);
mSrcPath.addRoundRect(mRoundRect, mRoundRadius, mRoundRadius, Path.Direction.CW);
//給path增長右側的犄角,造成氣泡效果
mSrcPath.moveTo(mWidth - mWidthDiff, mRoundRadius);
mSrcPath.quadTo(mTopControl.x, mTopControl.y, mWidth, mRoundRadius - mDefaultCornerPadding);
mSrcPath.quadTo(mBottomControl.x, mBottomControl.y, mWidth - mWidthDiff,
mRoundRadius + mWidthDiff);
} else {
mRoundRect.set(mWidthDiff, 0, mWidth, mHeight);
mSrcPath.addRoundRect(mRoundRect, mRoundRadius, mRoundRadius, Path.Direction.CW);
//給path增長右側的犄角,造成氣泡效果
mSrcPath.moveTo(mWidthDiff, mRoundRadius);
mSrcPath.quadTo(mTopControl.x, mTopControl.y, 0, mRoundRadius - mDefaultCornerPadding);
mSrcPath.quadTo(mBottomControl.x, mBottomControl.y, mWidthDiff, mRoundRadius + mWidthDiff);
}
canvas.clipPath(mSrcPath);
if (mLoadingBackColor != 0) {
canvas.drawColor(mLoadingBackColor);
}
super.onDraw(canvas);
}
複製代碼
代碼分析:addRoundRect是增長一個圓角矩形,而後大小比整個view小一個mWidthDiff(這個是犄角的寬度,預留位置給犄角繪製)。而後把path的繪製起點移動到 mSrcPath.moveTo(mWidthDiff, mRoundRadius);(左右剛好相反,這裏是左側犄角的寫法)下圖中的綠色點。Y座標是mRoundRadius是由於圓角矩形的圓角值是這個,因此在圓角的結束位置開始繪製犄角。
這裏開始繪製上面那條犄角的弧線,TopControl控制點我是專門寫了一個界面,不斷調整xy座標px值進行計算。目前數值以下:
mSrcPath.quadTo(mTopControl.x, mTopControl.y, 0, mRoundRadius - mDefaultCornerPadding);
mSrcPath.quadTo(mBottomControl.x, mBottomControl.y, mWidthDiff, mRoundRadius + mWidthDiff);
複製代碼
private void initValues() {
if (mIsRightPop) {
//設置犄角的控制橫座標xy
mTopControl.x = mWidth - DensityUtil.dip2px(getContext(), 2);
mTopControl.y = mRoundRadius;
mBottomControl.x = mWidth - DensityUtil.dip2px(getContext(), 1);
mBottomControl.y = mRoundRadius + DensityUtil.dip2px(getContext(), 6);
} else {
//設置犄角的控制橫座標xy
mTopControl.x = DensityUtil.dip2px(getContext(), 2);
mTopControl.y = mRoundRadius;
mBottomControl.x = DensityUtil.dip2px(getContext(), 1);
mBottomControl.y = mRoundRadius + DensityUtil.dip2px(getContext(), 6);
}
}
複製代碼
在上面ondraw代碼執行後,開始進行裁剪畫布。
canvas.clipPath(mSrcPath);
複製代碼
此時,畫布就只有氣泡模樣的區域了。接下來就簡單了,直接進行原圖形繪製以及內部填充色的繪製。
//繪製背景色
if (mLoadingBackColor != 0) {
canvas.drawColor(mLoadingBackColor);
}
//下面是繪製textview自身具有的圖形,保留原有的全部特性。
super.onDraw(canvas);
複製代碼
值得注意的是文字類型氣泡有不少特殊點,好比文件要顯示在氣泡內部,或者UI要求單個文字時,文字距離氣泡邊緣的間距不同等等。因此接下來介紹一些特殊之處,不過先貼出全部代碼。
package com.tc.bubblelayout;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PaintFlagsDrawFilter;
import android.graphics.Path;
import android.graphics.PointF;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.support.v7.widget.AppCompatTextView;
import android.util.AttributeSet;
/**
* author: tc
* date: 2018/3/14 & 10:04
* version 1.0
* description 透明氣泡view
* modify by
*/
public class BubbleTextView extends AppCompatTextView {
private static final String TAG = "BubbleTextView";
private Path mSrcPath;
private int mHeight;
private int mWidth;
private RectF mRoundRect;
/**
* 上弧線控制點和下弧線控制點
*/
private PointF mTopControl, mBottomControl;
/**
* 氣泡圖形右側留空區域寬度
*/
private int mWidthDiff;
/**
* 右上角圓角的半徑
*/
private int mRoundRadius;
/**
* 是不是右側氣泡
*/
private boolean mIsRightPop;
private int mLeftTextPadding;
private int mRightTextPadding;
/**
* 加載時背景色
*/
private int mLoadingBackColor;
private int mDefaultPadding;
private int mDefaultCornerPadding;
private PaintFlagsDrawFilter mPaintFlagsDrawFilter;
public BubbleTextView(Context context) {
this(context, null);
}
public BubbleTextView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public BubbleTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs);
}
private void init(Context context, AttributeSet attrs) {
TypedArray attr = context.obtainStyledAttributes(attrs, R.styleable.BubbleView);
mLoadingBackColor = attr.getColor(R.styleable.BubbleView_BubbleView_backgroundColor, 0);
mIsRightPop = attr.getBoolean(R.styleable.BubbleView_BubbleView_rightPop, true);
//左側或右側留出的空餘區域
mWidthDiff = attr.getDimensionPixelOffset(R.styleable.BubbleView_BubbleView_blank_space_width,
DensityUtil.dip2px(getContext(), 7));
//圓角的半徑
mRoundRadius = attr.getDimensionPixelOffset(R.styleable.BubbleView_BubbleView_roundRadius,
DensityUtil.dip2px(context, 8));
mLeftTextPadding = attr.getDimensionPixelOffset(R.styleable.BubbleView_BubbleView_leftTextPadding,
DensityUtil.dip2px(context, 0));
mRightTextPadding = attr.getDimensionPixelOffset(R.styleable.BubbleView_BubbleView_rightTextPadding,
DensityUtil.dip2px(context, 0));
attr.recycle();
mSrcPath = new Path();
mTopControl = new PointF(0, 0);
mBottomControl = new PointF(0, 0);
mRoundRect = new RectF();
//默認一個字的時候的間隔
mDefaultPadding = DensityUtil.dip2px(getContext(), 16);
mDefaultCornerPadding = DensityUtil.dip2px(getContext(), 3);
mPaintFlagsDrawFilter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint
.FILTER_BITMAP_FLAG);
setTextPadding(mRightTextPadding, mLeftTextPadding);
}
private void initValues() {
if (mIsRightPop) {
//設置犄角的控制橫座標xy
mTopControl.x = mWidth - DensityUtil.dip2px(getContext(), 2);
mTopControl.y = mRoundRadius;
mBottomControl.x = mWidth - DensityUtil.dip2px(getContext(), 1);
mBottomControl.y = mRoundRadius + DensityUtil.dip2px(getContext(), 6);
} else {
//設置犄角的控制橫座標xy
mTopControl.x = DensityUtil.dip2px(getContext(), 2);
mTopControl.y = mRoundRadius;
mBottomControl.x = DensityUtil.dip2px(getContext(), 1);
mBottomControl.y = mRoundRadius + DensityUtil.dip2px(getContext(), 6);
}
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mHeight = h;
mWidth = w;
initValues();
}
public void judgePadding() {
int length = getText().length();
if (length == 1) {
setTextPadding(mDefaultPadding, mDefaultPadding);
} else {
setTextPadding(mRightTextPadding, mLeftTextPadding);
}
}
@Override
protected void onDraw(Canvas canvas) {
canvas.setDrawFilter(mPaintFlagsDrawFilter);
// LogUtil.i(TAG, getText() + " getPaddingLeft" + getPaddingLeft() + " getPaddingRight" + getPaddingRight());
mSrcPath.reset();
if (mIsRightPop) {
mRoundRect.set(0, 0, mWidth - mWidthDiff, mHeight);
mSrcPath.addRoundRect(mRoundRect, mRoundRadius, mRoundRadius, Path.Direction.CW);
//給path增長右側的犄角,造成氣泡效果
mSrcPath.moveTo(mWidth - mWidthDiff, mRoundRadius);
mSrcPath.quadTo(mTopControl.x, mTopControl.y, mWidth, mRoundRadius - mDefaultCornerPadding);
mSrcPath.quadTo(mBottomControl.x, mBottomControl.y, mWidth - mWidthDiff,
mRoundRadius + mWidthDiff);
} else {
mRoundRect.set(mWidthDiff, 0, mWidth, mHeight);
mSrcPath.addRoundRect(mRoundRect, mRoundRadius, mRoundRadius, Path.Direction.CW);
//給path增長右側的犄角,造成氣泡效果
mSrcPath.moveTo(mWidthDiff, mRoundRadius);
mSrcPath.quadTo(mTopControl.x, mTopControl.y, 0, mRoundRadius - mDefaultCornerPadding);
mSrcPath.quadTo(mBottomControl.x, mBottomControl.y, mWidthDiff, mRoundRadius + mWidthDiff);
}
canvas.clipPath(mSrcPath);
if (mLoadingBackColor != 0) {
canvas.drawColor(mLoadingBackColor);
}
super.onDraw(canvas);
}
private void setTextPadding(int rightTextPadding, int leftTextPadding) {
if (mIsRightPop) {
setPadding(leftTextPadding, getPaddingTop(), rightTextPadding + mWidthDiff, getPaddingBottom());
} else {
setPadding(leftTextPadding + mWidthDiff, getPaddingTop(), rightTextPadding, getPaddingBottom());
}
}
public void setLoadingBackColor(int loadingBackColor) {
if (loadingBackColor <= 0) {
mLoadingBackColor = 0;
return;
}
mLoadingBackColor = getResources().getColor(loadingBackColor);
}
public void setLeftTextPadding(int leftTextPadding) {
mLeftTextPadding = DensityUtil.dip2px(getContext(), leftTextPadding);
}
public void setRightTextPadding(int rightTextPadding) {
mRightTextPadding = DensityUtil.dip2px(getContext(), rightTextPadding);
}
public void updateView() {
judgePadding();
invalidate();
}
/**
* 設置圓角的半徑
*
* @param roundRadius
*/
public void setRoundRadius(int roundRadius) {
mRoundRadius = DensityUtil.dip2px(getContext(), roundRadius);
}
/**
* 是不是右側氣泡
*
* @param rightPop 是不是右側氣泡 false則爲左側氣泡
*/
public void setRightPop(boolean rightPop) {
mIsRightPop = rightPop;
}
}
複製代碼
代碼中的judgePadding方法主要是爲了設置不一樣的兩側留白間距,在文本長度爲1的時候,UI須要採起不一樣的間距。這裏你們能夠根據須要自行決定是否保留這種邏輯。此外這個方法調用的setTextPadding方法是用來控制文本內容顯示不會被氣泡部分裁剪掉,因此當左右側氣泡時有默認的間距mWidthDiff,在繪製文本時,經過設置padding,增長這個左或右間距值。下圖中,leftPadding和rightPadding屬於黃色框部分留白,紅色是mWidthDiff。
本方法須要先了解XFermode是什麼,若是上面文章還沒看過,我這裏先簡單介紹下。XFermode能夠通俗的理解成爲數學上合併集運算,X∪Y或者X∩Y等等。這裏XFermode和它相似,只不過是對圖形的相交或者不相交區域按照必定規則取想要保留的圖形區域。好比下圖 畫了一個黃色圓形和一個藍色方形,而後根據16種XFermode模式進行取想要保留的圖形區域。
PS:圖片轉自https://www.jianshu.com/p/78c36742d50f ,這篇文章分析爲啥官方的圖層混合和咱們實際效果不一致的問題,你們能夠看看。
關於path氣泡部分的計算,和上面clippath是一致的,這個保持不變。有點不一樣的是在以前的XFermode實現方案裏,我直接在同一個canvas上先繪製背景色和調用 super.onDraw(canvas);繪製原始圖形,而後再用這個canvas繪製氣泡path(調用 canvas.drawPath(srcPath, mPaint);)。大體代碼以下,mPaint已經在初始化時設置了setXfermode的具體模式爲DST_IN。
@Override
protected void onDraw(Canvas canvas) {
int saveCount = canvas.saveLayerAlpha(0, 0, getWidth(), getHeight(), 255,
Canvas.ALL_SAVE_FLAG);
if (mLoadingBackColor != 0) {
canvas.drawColor(getResources().getColor(mLoadingBackColor));
}
super.onDraw(canvas);
if (mShowButtonBitmap != null) {
int bitmapHeight = mShowButtonBitmap.getHeight();
int bitmapWidth = mShowButtonBitmap.getWidth();
int top = mHeight - bitmapHeight - DensityUtil.dip2px(getContext(), 5);
if (mIsRightPop) {
canvas.drawBitmap(mShowButtonBitmap, DensityUtil.dip2px
(getContext(), 5), top, mPaint);
} else {
canvas.drawBitmap(mShowButtonBitmap, mWidth - bitmapWidth - DensityUtil.dip2px
(getContext(), 5), top, mPaint);
}
}
mPaint.setXfermode(mPorterDuffXfermode);
srcPath.reset();
if (mIsRightPop) {
mRoundRect.set(0, 0, mWidth - mWidthDiff, mHeight);
} else {
mRoundRect.set(mWidthDiff, 0, mWidth, mHeight);
}
srcPath.addRoundRect(mRoundRect, mRoundRadius, mRoundRadius, Path.Direction.CW);
if (mIsRightPop) {
//給path增長右側的犄角,造成氣泡效果
srcPath.moveTo(mWidth - mWidthDiff, mRoundRadius);
srcPath.quadTo(topControl.x, topControl.y, mWidth, mRoundRadius - DensityUtil.dip2px(getContext(), 3));
srcPath.quadTo(bottomControl.x, bottomControl.y, mWidth - mWidthDiff,
mRoundRadius + mWidthDiff);
} else {
//給path增長右側的犄角,造成氣泡效果
srcPath.moveTo(mWidthDiff, mRoundRadius);
srcPath.quadTo(topControl.x, topControl.y, 0, mRoundRadius - DensityUtil.dip2px(getContext(), 3));
srcPath.quadTo(bottomControl.x, bottomControl.y, mWidthDiff, mRoundRadius + mWidthDiff);
}
//繪製path所造成的圖形,清除造成透明效果,露出這一區域
canvas.drawPath(srcPath, mPaint);
mPaint.setXfermode(null);
canvas.restoreToCount(saveCount);
}
複製代碼
canvas.saveLayerAlpha方法是新創建一個layer層,以後全部的繪製都在這個圖層上,這樣xfermode才能操做合併圖形。上面代碼大概邏輯就是新建layer層,繪製背景色,繪製原圖形super.draw(由於不少時候都是繼承某個控件,要保留原有的圖形),繪製UI要求的提示圖形,而後用paint設置xfermode去繪製氣泡path,最終完成圖形混合保留氣泡部分圖形。
在一開始這種邏輯很好實現了氣泡佈局,後續我把clippath的方式都替換成這個方式了。可是最近Android9.0系統出現後,我更新了個人小米手機到9.0系統,我發現這種方式不起做用了,繪製出來的view沒有被裁剪爲氣泡。最後試了不一樣的混合模式,而後調整path和super.draw之間的順序,而後始終會有一些問題。最後採用氣泡先繪製到另一個canvas,而後合成爲bitmap,最後再把bitmap和如今canvas圖形進行混合。
改進的策略完美解決了9.0上代碼不起做用的問題。代碼以下:
@Override
protected void onDraw(Canvas canvas) {
canvas.setDrawFilter(mPaintFlagsDrawFilter);
int saveCount = canvas.saveLayerAlpha(0, 0, mWidth, mHeight, 255,
Canvas.ALL_SAVE_FLAG);
drawBackColor(canvas);
super.onDraw(canvas);
drawTipIcon(canvas);
mPaint.setXfermode(mPorterDuffXfermode);
//繪製氣泡部分,和 super.onDraw(canvas);繪製的畫面利用xfermode作疊加計算
canvas.drawBitmap(mBubbleBitmap, 0, 0, mPaint);
mPaint.setXfermode(null);
canvas.restoreToCount(saveCount);
}
複製代碼
所有代碼就不貼了,文末給出連接,能夠本身下載看,其它部分代碼和clippath方式差異不大。
在容器氣泡佈局實現時,子view的ondraw是不須要重寫以及干涉的。咱們只要限制自view的繪製範圍或者在最終圖形上裁剪。因此基於這種思路,咱們ondraw的重寫放到dispatchDraw(上面第一小節介紹過了),這個方法在ondraw調用以後,因此這裏能夠作一些背景色和裁剪佈局圖形的工做。
@Override
protected void dispatchDraw(Canvas canvas) {
canvas.setDrawFilter(mPaintFlagsDrawFilter);
int saveCount = canvas.saveLayerAlpha(0, 0, mWidth, mHeight, 255,
Canvas.ALL_SAVE_FLAG);
drawBackColor(canvas);
super.dispatchDraw(canvas);
mPaint.setXfermode(mPorterDuffXfermode);
//繪製氣泡部分,和 super.onDraw(canvas);繪製的畫面利用xfermode作疊加計算
canvas.drawBitmap(mBubbleBitmap, 0, 0, mPaint);
if (mIsShowBorder && Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT && mBorderColor != 0) {
//繪製氣泡的四周邊框
canvas.drawPath(mSrcPath, mBorderPaint);
}
mPaint.setXfermode(null);
canvas.restoreToCount(saveCount);
}
複製代碼
核心代碼裏和上面代碼都一致,只是移動到dispatchDraw裏,這裏 canvas.drawPath(mSrcPath, mBorderPaint),是作一些佈局邊框的特殊UI需求,佈局四周的氣泡形狀的邊框。
關注下面幾個view便可