介紹
做項(xiàng)目經(jīng)常會(huì)用到這樣的布局，每每都是用的切的圖片來實(shí)現(xiàn)的撮胧。由于這樣不怎么方便寨昙，所以誕生了何不自己畫一個(gè)的思路。目前這個(gè)布局可以通過設(shè)置一些屬性來達(dá)到想要的一些效果掀亩，如下GIF圖片舔哪。
GIF
demo下載
https://github.com/xujiaji/HappyBubble/releases/download/demo1.0/BubbleLayoutDemo.apk
代碼(詳細(xì)代碼：Github)
- 思路很簡(jiǎn)單，用的是path直接繪制的路徑槽棍。
- 通過Paint的setPathEffect方法設(shè)置圓弧
- 通過Paint的setShadowLayer方法設(shè)置陰影
- 話不多說了捉蚤，接下來直接上代碼抬驴。
實(shí)現(xiàn)部分
package com.xujiaji.bubblelayout;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.CornerPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.os.Bundle;
import android.os.Parcelable;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.widget.FrameLayout;
/**
* 氣泡布局
* Created by JiajiXu on 17-12-1.
*/
public class BubbleLayout extends FrameLayout {
private Paint mPaint;
private Path mPath;
private Look mLook;
private int mWidth, mHeight;
private int mLeft, mTop, mRight, mBottom;
private int mLookPosition, mLookWidth, mLookLength;
private int mShadowColor, mShadowRadius, mShadowX, mShadowY;
private int mBubbleRadius, mBubbleMargin, mBubbleColor;
/**
* 箭頭指向
*/
public enum Look
{
/**
* 坐上右下
*/
LEFT(1), TOP(2), RIGHT(3), BOTTOM(4);
int value;
Look(int v)
{
value = v;
}
public static Look getType(int value)
{
Look type = Look.BOTTOM;
switch (value)
{
case 1:
type = Look.LEFT;
break;
case 2:
type = Look.TOP;
break;
case 3:
type = Look.RIGHT;
break;
case 4:
type = Look.BOTTOM;
break;
}
return type;
}
}
public BubbleLayout(@NonNull Context context) {
this(context, null);
}
public BubbleLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public BubbleLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setLayerType(LAYER_TYPE_SOFTWARE, null);
setWillNotDraw(false);
initAttr(context.obtainStyledAttributes(attrs, R.styleable.BubbleLayout, defStyleAttr, 0));
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
mPaint.setStyle(Paint.Style.FILL);
mPath = new Path();
}
/**
* 初始化參數(shù)
*/
private void initAttr(TypedArray a) {
mLook = Look.getType(a.getInt(R.styleable.BubbleLayout_lookAt, Look.BOTTOM.value));
mLookPosition = a.getDimensionPixelOffset(R.styleable.BubbleLayout_lookPosition, 0);
mLookWidth = a.getDimensionPixelOffset(R.styleable.BubbleLayout_lookWidth, 50);
mLookLength = a.getDimensionPixelOffset(R.styleable.BubbleLayout_lookLength, 50);
mShadowRadius = a.getDimensionPixelOffset(R.styleable.BubbleLayout_shadowRadius, 10);
mShadowX = a.getDimensionPixelOffset(R.styleable.BubbleLayout_shadowX, 3);
mShadowY = a.getDimensionPixelOffset(R.styleable.BubbleLayout_shadowY, 3);
mBubbleRadius = a.getDimensionPixelOffset(R.styleable.BubbleLayout_bubbleRadius, 20);
mBubbleMargin = a.getDimensionPixelOffset(R.styleable.BubbleLayout_bubbleMargin, 10);
mShadowColor = a.getColor(R.styleable.BubbleLayout_shadowColor, Color.GRAY);
mBubbleColor = a.getColor(R.styleable.BubbleLayout_bubbleColor, Color.WHITE);
a.recycle();
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth = w;
mHeight = h;
initData();
}
@Override
public void invalidate() {
initData();
super.invalidate();
}
@Override
public void postInvalidate() {
initData();
super.postInvalidate();
}
/**
* 初始化數(shù)據(jù)
*/
private void initData() {
mPaint.setPathEffect(new CornerPathEffect(mBubbleRadius));
mPaint.setShadowLayer(mShadowRadius, mShadowX, mShadowY, mShadowColor);
//最小外邊距
final int minMargin = (mShadowX > mShadowY ? mShadowX : mShadowY) * 4;
//限制外邊距的最小值
mBubbleMargin = mBubbleMargin < minMargin ? minMargin : mBubbleMargin;
final int minLength = mWidth > mHeight ? mHeight : mWidth;
mBubbleMargin = (mBubbleMargin * 2 > (minLength - mLookWidth - mLookPosition) ? (minLength - mLookWidth - mLookPosition) / 2 : mBubbleMargin);
mLeft = mBubbleMargin + getPaddingLeft() + (mLook == Look.LEFT ? mLookLength : 0);
mTop = mBubbleMargin + getPaddingTop() + (mLook == Look.TOP ? mLookLength : 0);
mRight = mWidth - mBubbleMargin - getPaddingRight() - (mLook == Look.RIGHT ? mLookLength : 0);
mBottom = mHeight - mBubbleMargin - getPaddingBottom() - (mLook == Look.BOTTOM ? mLookLength : 0);
mPaint.setColor(mBubbleColor);
mPath.reset();
int topOffset = (topOffset = (mTop + mLookPosition)) > mBottom ? mBottom - mLookWidth : topOffset;
int leftOffset = (leftOffset = mLeft + mLookPosition) > mRight ? mRight - mLookWidth : leftOffset;
switch (mLook)
{
case LEFT:
mPath.moveTo(mLeft, topOffset);
mPath.rLineTo(-mLookLength, mLookWidth / 2);
mPath.rLineTo(mLookLength, mLookWidth / 2);
mPath.lineTo(mLeft, mBottom);
mPath.lineTo(mRight, mBottom);
mPath.lineTo(mRight, mTop);
mPath.lineTo(mLeft, mTop);
break;
case TOP:
mPath.moveTo(leftOffset, mTop);
mPath.rLineTo(mLookWidth / 2, -mLookLength);
mPath.rLineTo(mLookWidth / 2, mLookLength);
mPath.lineTo(mRight, mTop);
mPath.lineTo(mRight, mBottom);
mPath.lineTo(mLeft, mBottom);
mPath.lineTo(mLeft, mTop);
break;
case RIGHT:
mPath.moveTo(mRight, topOffset);
mPath.rLineTo(mLookLength, mLookWidth / 2);
mPath.rLineTo(-mLookLength, mLookWidth / 2);
mPath.lineTo(mRight, mBottom);
mPath.lineTo(mLeft, mBottom);
mPath.lineTo(mLeft, mTop);
mPath.lineTo(mRight, mTop);
break;
case BOTTOM:
mPath.moveTo(leftOffset, mBottom);
mPath.rLineTo(mLookWidth / 2, mLookLength);
mPath.rLineTo(mLookWidth / 2, -mLookLength);
mPath.lineTo(mRight, mBottom);
mPath.lineTo(mRight, mTop);
mPath.lineTo(mLeft, mTop);
mPath.lineTo(mLeft, mBottom);
break;
}
mPath.close();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPath(mPath, mPaint);
}
public void setBubbleColor(int mBubbleColor) {
this.mBubbleColor = mBubbleColor;
}
public void setLook(Look mLook) {
this.mLook = mLook;
}
public void setLookPosition(int mLookPosition) {
this.mLookPosition = mLookPosition;
}
public void setLookWidth(int mLookWidth) {
this.mLookWidth = mLookWidth;
}
public void setLookLength(int mLookLength) {
this.mLookLength = mLookLength;
}
public void setShadowColor(int mShadowColor) {
this.mShadowColor = mShadowColor;
}
public void setShadowRadius(int mShadowRadius) {
this.mShadowRadius = mShadowRadius;
}
public void setShadowX(int mShadowX) {
this.mShadowX = mShadowX;
}
public void setShadowY(int mShadowY) {
this.mShadowY = mShadowY;
}
public void setBubbleRadius(int mBubbleRadius) {
this.mBubbleRadius = mBubbleRadius;
}
public void setBubbleMargin(int mBubbleMargin) {
this.mBubbleMargin = mBubbleMargin;
}
public Parcelable onSaveInstanceState() {
Bundle bundle = new Bundle();
bundle.putParcelable("instanceState", super.onSaveInstanceState());
bundle.putInt("mLookPosition", this.mLookPosition);
bundle.putInt("mLookWidth" , this.mLookWidth );
bundle.putInt("mLookLength" , this.mLookLength );
bundle.putInt("mShadowColor" , this.mShadowColor );
bundle.putInt("mShadowRadius", this.mShadowRadius);
bundle.putInt("mShadowX" , this.mShadowX );
bundle.putInt("mShadowY" , this.mShadowY );
bundle.putInt("mBubbleRadius", this.mBubbleRadius);
bundle.putInt("mBubbleMargin", this.mBubbleMargin);
bundle.putInt("mWidth" , this.mWidth );
bundle.putInt("mHeight" , this.mHeight );
bundle.putInt("mLeft" , this.mLeft );
bundle.putInt("mTop" , this.mTop );
bundle.putInt("mRight" , this.mRight );
bundle.putInt("mBottom" , this.mBottom );
return bundle;
}
// private int mWidth, mHeight;
// private int mLeft, mTop, mRight, mBottom;
public void onRestoreInstanceState(Parcelable state) {
if (state instanceof Bundle) {
Bundle bundle = (Bundle) state;
this.mLookPosition = bundle.getInt("mLookPosition");
this.mLookWidth = bundle.getInt("mLookWidth" );
this.mLookLength = bundle.getInt("mLookLength" );
this.mShadowColor = bundle.getInt("mShadowColor" );
this.mShadowRadius = bundle.getInt("mShadowRadius");
this.mShadowX = bundle.getInt("mShadowX" );
this.mShadowY = bundle.getInt("mShadowY" );
this.mBubbleRadius = bundle.getInt("mBubbleRadius");
this.mBubbleMargin = bundle.getInt("mBubbleMargin");
this.mWidth = bundle.getInt("mWidth" );
this.mHeight = bundle.getInt("mHeight" );
this.mLeft = bundle.getInt("mLeft" );
this.mTop = bundle.getInt("mTop" );
this.mRight = bundle.getInt("mRight" );
this.mBottom = bundle.getInt("mBottom" );
super.onRestoreInstanceState(bundle.getParcelable("instanceState"));
return;
}
super.onRestoreInstanceState(state);
}
}
attrs.xml參數(shù)配置
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="BubbleLayout">
<attr name="lookAt">
<enum name="left" value="1"/>
<enum name="top" value="2"/>
<enum name="right" value="3"/>
<enum name="bottom" value="4"/>
</attr>
<attr name="lookPosition" format="dimension"/>
<attr name="lookWidth" format="dimension"/>
<attr name="lookLength" format="dimension"/>
<attr name="bubbleColor" format="color"/>
<attr name="bubbleRadius" format="dimension"/>
<attr name="bubbleMargin" format="dimension"/>
<attr name="shadowRadius" format="dimension"/>
<attr name="shadowX" format="dimension"/>
<attr name="shadowY" format="dimension"/>
<attr name="shadowColor" format="color"/>
</declare-styleable>
</resources>
activity_mian使用部分
<com.xujiaji.bubblelayout.BubbleLayout
android:id="@+id/bubbleLayout"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="16dp"
app:lookAt="left"
app:lookLength="16dp"
app:lookPosition="20dp"
app:lookWidth="16dp" />
END
現(xiàn)在只是實(shí)現(xiàn)的布局部分，接下來需要的是一個(gè)Dialog彈窗.后面將會(huì)將其融入Dialog缆巧，實(shí)現(xiàn)箭頭能直接指向點(diǎn)擊控件的中心布持。目前代碼因該不算太完善，不足和考慮不周的地方也希望大家多多指點(diǎn)陕悬！
進(jìn)度
2017-12-12：添加自定義氣泡的方法题暖，并添加其測(cè)試代碼
2017-12-11：測(cè)試dialog的展示交互
2017-12-10: 完成所有功能，接下來測(cè)試一段時(shí)間
2017-12-8：實(shí)現(xiàn)dialog按鈕底部彈出捉超，修復(fù)一些bug
2017-12-6：設(shè)置dialog有editText時(shí)可以上移胧卤。dialog關(guān)閉時(shí)，軟鍵盤可自動(dòng)關(guān)閉
2017-12-4：實(shí)現(xiàn)dialog按鈕處頂部彈出
