Android-氣泡對話框（根據被點擊View位置顯示、可定製）

Go Github

氣泡佈局的形狀能夠改變，如四角弧度、氣泡顏色、箭頭大小和陰影。

氣泡Dialog能夠根據被點擊的view的位置來肯定本身展現的位置。

更新

• 1.1.4：
  ①新增方法setLayout(int width, int height, int margin)，width（設置氣泡的寬）、height（設置氣泡的高）、margin（設置距離屏幕邊緣的間距,只有當設置 width 或 height 爲 MATCH_PARENT 纔有效）。
  ②autoPosition(true)方法準備棄用（如今還能夠用），使用新方法autoPosition(Auto),若是兩個都使用了會直接用autoPosition(Auto)。請參考下方「方法參考表」。
  ③感謝@wolf8088521提供建議#4

• 1.1.3:
  ①經過從新調用setClickedView能夠直接更新當前dialog的所在位置。
  ②新添加setRelativeOffset(int)方法，設置dialog相對與被點擊View的偏移（負值：向被點擊view的中心偏移；正值：向被點擊view的外側偏移）
  ③測試頁面SetClickedViewTestActivity.java

• 1.1.2:修復默認值沒有適配屏幕

• 1.1.1:修復大小變化後，沒有對應變化位置的問題；修復接觸頂部偏位問題；

• 1.1.0
  ①Dialog交互事件傳遞到Activity達到不在不關閉Dialog的狀況下作其餘Activity的操做。
  ②添加自動根據被點擊View距離屏幕邊緣的距離肯定Dialog的位置。
  ③新增「autoPosition」和「setThroughEvent」方法，請參考「BubbleDialog方法參考表」

• 1.0.3:繼續優化了點擊在氣泡以外才會被dismiss；修復了Dialog周圍會有部分點擊沒法dismiss；

• 1.0.2:修復點擊dialog邊緣沒法取消

如何開始?

在你模塊中的build.gradle添加上HappyBubble依賴

compile 'com.github.xujiaji:happy-bubble:1.1.4'
複製代碼

如何使用 HappyBubble-BubbleDialog?

方法參考表

方法名	參數	描述
addContentView	View	添加填充在氣泡中的視圖
setClickedView	View	被點擊的View（觸發Dialog出現的View）
setPosition	enum BubbleDialog.Position:LEFT, TOP, RIGHT, BOTTOM	BubbleDialog相對於被點擊的view的位置
calBar	boolean	是否計算狀態欄的高度（若是佈局沒有全屏，則須要計算）
setOffsetX	int	若是您對dialog所展現的x軸位置不滿，須要調整x軸方向偏移
setOffsetY	int	若是您對dialog所展現的y軸位置不滿，須要調整y軸方向偏移
setBubbleLayout	BubbleLayout	自定義dialog的氣泡佈局
setTransParentBackground	-	背景透明
softShowUp	-	當氣泡dialog中有EditText時，軟鍵盤彈出會遮擋EditText時，dialog隨軟鍵盤上移。
show	-	顯示
autoPosition（已棄）	boolean	是否開啓自動肯定位置功能，開啓後，「setPosition」功能失效
autoPosition	enum （Auto:AROUND，UP_AND_DOWN，LEFT_AND_RIGHT）	自動肯定位置功能，顯示在被點擊View距離屏幕邊緣的最大空間。開啓後，「setPosition」功能失效。 AROUND：被點擊View四周； UP_AND_DOWN：被點擊View上下顯示； LEFT_AND_RIGHT：被點擊View左右顯示；
setThroughEvent	boolean, boolean	第一個參數isThroughEvent設置是否穿透Dialog手勢交互。 第二個參數cancelable 點擊空白是否能取消Dialog，只有當"isThroughEvent = false"時纔有效
setRelativeOffset	int	設置dialog相對與被點擊View的偏移（負值：向被點擊view的中心偏移；正值：向被點擊view的外側偏移），設置後會直接影響setOffsetX和setOffsetY方法。
setLayout	int，int，int	設置氣泡的寬高和距離屏幕邊緣的距離 第一個參數：width（設置氣泡的寬）； 第二個參數：height（設置氣泡的高）； 第三個參數：margin（設置距離屏幕邊緣的間距,只有當設置 width 或 height 爲 MATCH_PARENT 纔有效）。 寬高單位爲px或MATCH_PARENT

最簡單的實現

須要提供：Context、填充的View、被點擊的View。
若是最外層佈局沒有全屏時，您須要計算狀態欄的高度，不然會多向下偏移一個狀態欄的高度。

new BubbleDialog(this)
        .addContentView(LayoutInflater.from(this).inflate(R.layout.dialog_view3, null))
        .setClickedView(mButton)
        .calBar(true)
        .show();
複製代碼

向下偏移8dp

new BubbleDialog(this)
        .addContentView(LayoutInflater.from(this).inflate(R.layout.dialog_view3, null))
        .setClickedView(mButton4)
        .setPosition(mPosition)
        .setOffsetY(8)
        .calBar(true)
        .show();
複製代碼

當想要輸入框隨軟鍵盤上移時

new BubbleDialog(this)
        .addContentView(LayoutInflater.from(this).inflate(R.layout.dialog_view, null))
        .setClickedView(mButton12)
        .setPosition(mPosition)
        .calBar(true)
        .softShowUp()
        .show();
複製代碼

自定義 BubbleLayout.

BubbleLayout bl = new BubbleLayout(this);
bl.setBubbleColor(Color.BLUE);
bl.setShadowColor(Color.RED);
bl.setLookLength(Util.dpToPx(this, 54));
bl.setLookWidth(Util.dpToPx(this, 48));
new BubbleDialog(this)
        .addContentView(LayoutInflater.from(this).inflate(R.layout.dialog_view5, null))
        .setClickedView(mButton8)
        .setPosition(mPosition)
        .calBar(true)
        .setBubbleLayout(bl)
        .show();
複製代碼

自定義 BubbleDialog，可交互的 BubbleDialog.

一、佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="160dp" android:layout_height="match_parent" android:orientation="vertical">

    <Button android:id="@+id/button13" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button1" />

    <Button android:id="@+id/button14" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button2" />

    <Button android:id="@+id/button15" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button3" />

</LinearLayout>
複製代碼

二、自定義 BubbleDialog

/** * 自定義可操做性dialog * Created by JiajiXu on 17-12-11. */

public class CustomOperateDialog extends BubbleDialog implements View.OnClickListener {
    private ViewHolder mViewHolder;
    private OnClickCustomButtonListener mListener;

    public CustomOperateDialog(Context context) {
        super(context);
        calBar(true);
        setTransParentBackground();
        setPosition(Position.TOP);
        View rootView = LayoutInflater.from(context).inflate(R.layout.dialog_view4, null);
        mViewHolder = new ViewHolder(rootView);
        addContentView(rootView);
        mViewHolder.btn13.setOnClickListener(this);
        mViewHolder.btn14.setOnClickListener(this);
        mViewHolder.btn15.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        if (mListener != null)
        {
            mListener.onClick(((Button)v).getText().toString());
        }
    }

    private static class ViewHolder {
        Button btn13, btn14, btn15;
        public ViewHolder(View rootView) {
            btn13 = rootView.findViewById(R.id.button13);
            btn14 = rootView.findViewById(R.id.button14);
            btn15 = rootView.findViewById(R.id.button15);
        }
    }

    public void setClickListener(OnClickCustomButtonListener l) {
        this.mListener = l;
    }

    public interface OnClickCustomButtonListener {
        void onClick(String str);
    }
}

複製代碼

三、顯示

CustomOperateDialog codDialog = new CustomOperateDialog(this)
        .setPosition(mPosition)
        .setClickedView(mButton10);
codDialog.setClickListener(new CustomOperateDialog.OnClickCustomButtonListener()
{
    @Override
    public void onClick(String str) {
        mButton10.setText("點擊了：" + str);
    }
});
codDialog.show();
複製代碼

查看關於BappyDialog的使用代碼

TestDialogActivity 代碼

寫法建議

根據@hm該朋友在文章中反饋的屢次點擊後位置不對的問題，是因爲屢次對BappyDialog進行了設置致使，因此建議下方寫法。(固然若是對重複調用setClickedView()方法設置不一樣的被點擊的控件來更新位置有須要，是須要寫在外面的。)

if(mBubbleDialog == null)
{
    mBubbleDialog = new BubbleDialog(this)
        .addContentView(LayoutInflater.from(this).inflate(R.layout.dialog_view3, null))
        .setClickedView(mButton4)
        .setPosition(mPosition)
        .setOffsetY(8)
        .calBar(true);
}
mBubbleDialog.show();
複製代碼

---

如何使用 HappyBubble-BubbleLayout?

在XML代碼中設置屬性值

屬性參照表

屬性	值	描述
lookAt	left, top, right, bottom	箭頭指向
lookLength	dimension	箭頭的長度
lookPosition	dimension	箭頭相對於x或y軸的位置
lookWidth	dimension	箭頭的寬度
bubbleColor	color	氣泡的顏色
bubbleRadius	dimension	氣泡四角的圓弧
bubblePadding	dimension	氣泡邊緣到內容的距離
shadowRadius	dimension	陰影的擴散大小
shadowX	dimension	陰影在x軸方向的偏移
shadowY	dimension	陰影在y軸方向的偏移
shadowColor	color	陰影的顏色

xml 例子

<com.xujiaji.happybubble.BubbleLayout xmlns:app="http://schemas.android.com/apk/res-auto" 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" />
複製代碼

在java代碼中定義屬性值。

BubbleLayout 經過「set屬性名」方法和invalidate方法來更新BubbleLayout。

mBubbleLayout.setLook(BubbleLayout.Look.LEFT);
複製代碼

查看更多

MainActivity 代碼

Demo 下載

感謝您的使用、Star與建議！

---

License

Copyright 2016 XuJiaji

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
複製代碼