Android 通用 PopupWindow，不再用找 UI 小姐姐切 .9 圖片了，大體能爲你節省 30 分鐘的開發時間

BGATransformersTip-Android

Android 通用 PopupWindow，不再用找 UI 小姐姐切 .9 圖片了，大體能爲你節省 30 分鐘的開發時間

功能介紹

• 支持配置浮窗展現在錨點控件的任意位置
• 支持配置指示箭頭（是否展現、展現在浮窗的任意位置、高度、圓角、顏色）
• 支持配置浮窗背景色
• 支持配置浮窗邊框陰影（是否展現、寬度、顏色）
• 支持配置浮窗之外的其餘區域是否變暗
• 浮窗超出屏幕區域後會自動移動浮窗到屏幕區域內
• 對於只有文字的浮窗，直接使用 SimpleTextTip，不用寫佈局文件

效果圖

使用說明

添加 Gradle 依賴

bga-transformerstip 後面的「latestVersion」指的是左邊這個 Download 徽章後面的「數字」，請自行替換。

dependencies {
    implementation 'cn.bingoogolapple:bga-transformerstip:latestVersion@aar'
}
複製代碼

方式一：在 Java 代碼中設置浮窗位置，在佈局文件中設置浮窗背景、箭頭位置

• 這種方式的優勢是能夠提早查看預覽效果，提高開發效率

• 添加浮窗佈局文件，在佈局文件中設置浮窗背景、箭頭位置

<?xml version="1.0" encoding="utf-8"?>
<cn.bingoogolapple.transformerstip.view.TransformersTipLinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_vertical" android:orientation="horizontal" app:ad_arrowExtraOffsetX="0dp" app:ad_arrowExtraOffsetY="0dp" app:ad_arrowGravity="to_top_center" app:ad_arrowHeight="6dp" app:ad_bgColor="@android:color/black" app:ad_radius="4dp" app:ad_shadowColor="#33000000" app:ad_shadowSize="6dp">

    <TextView android:id="@+id/tv_tip_content" android:layout_width="200dp" android:layout_height="wrap_content" android:layout_margin="10dp" android:text="B -> bingo\nG googol\nA -> apple\nBGA -> bingoogolapple" android:textColor="@android:color/white" />

    <TextView android:id="@+id/tv_tip_close" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="6dp" android:layout_marginEnd="6dp" android:layout_gravity="top" android:padding="4dp" android:text="x" android:textColor="@android:color/white" />
</cn.bingoogolapple.transformerstip.view.TransformersTipLinearLayout>
複製代碼

• 在 Java 代碼中設置浮窗位置

new TransformersTip(anchorView, R.layout.layout_demo1_tip) {
    @Override
    protected void initView(View contentView) {
        // 點擊浮窗中自定按鈕關閉浮窗
        contentView.findViewById(R.id.tv_tip_close).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dismissTip();
            }
        });
    }
}
        .setTipGravity(TipGravity.TO_BOTTOM_CENTER) // 設置浮窗相對於錨點控件展現的位置
        .setTipOffsetXDp(0) // 設置浮窗在 x 軸的偏移量
        .setTipOffsetYDp(-6) // 設置浮窗在 y 軸的偏移量

        .setBackgroundDimEnabled(true) // 設置是否容許浮窗的背景變暗
        .setDismissOnTouchOutside(false) // 設置點擊浮窗外部時是否自動關閉浮窗

        .show(); // 顯示浮窗
複製代碼

方式二：在 Java 代碼中設置浮窗位置、浮窗背景、箭頭位置

• 添加浮窗佈局文件

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

    <TextView android:id="@+id/tv_tip_content" android:layout_width="200dp" android:layout_height="wrap_content" android:layout_margin="10dp" android:text="B -> bingo\nG googol\nA -> apple\nBGA -> bingoogolapple" android:textColor="@android:color/black" />

    <TextView android:id="@+id/tv_tip_close" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="6dp" android:layout_marginEnd="6dp" android:layout_gravity="top" android:padding="4dp" android:text="x" android:textColor="@android:color/black" />
</LinearLayout>
複製代碼

• 在 Java 代碼中設置浮窗位置、浮窗背景、箭頭位置

new TransformersTip(anchorView, R.layout.layout_demo2_tip) {
    @Override
    protected void initView(View contentView) {
        // 點擊浮窗中自定按鈕關閉浮窗
        contentView.findViewById(R.id.tv_tip_close).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dismissTip();
            }
        });
    }
}
        .setArrowGravity(ArrowGravity.TO_BOTTOM_CENTER) // 設置箭頭相對於浮窗的位置
        .setBgColor(Color.WHITE) // 設置背景色
        .setShadowColor(Color.parseColor("#33000000")) // 設置陰影色
        .setArrowHeightDp(6) // 設置箭頭高度
        .setRadiusDp(4) // 設置浮窗圓角半徑
        .setArrowOffsetXDp(0) // 設置箭頭在 x 軸的偏移量
        .setArrowOffsetYDp(0) // 設置箭頭在 y 軸的偏移量
        .setShadowSizeDp(6) // 設置陰影寬度

        .setTipGravity(TipGravity.TO_TOP_CENTER) // 設置浮窗相對於錨點控件展現的位置
        .setTipOffsetXDp(0) // 設置浮窗在 x 軸的偏移量
        .setTipOffsetYDp(6) // 設置浮窗在 y 軸的偏移量

        .setBackgroundDimEnabled(false) // 設置是否容許浮窗的背景變暗
        .setDismissOnTouchOutside(false) // 設置點擊浮窗外部時是否自動關閉浮窗

        .show(); // 顯示浮窗
複製代碼

方式三：對於僅有文字的浮窗，能夠直接使用 SimpleTextTip，不用再寫佈局文件了

new SimpleTextTip(anchorView)
        .setTextContent("適用於只有文字的浮窗\n不寫佈局文件\n在 Java 代碼中設置文本內容屬性") // 設置浮窗文本內容
        .setTextPaddingDp(12) // 設置文字與浮窗邊框的間距
        .setTextColor(Color.BLACK) // 設置文字顏色
        .setTextSizeSp(14) // 設置文字大小
        .setTextGravity(Gravity.CENTER) // 設置文字對其方式
        .setLineSpacingExtraDp(4) // 設置文字行間距

        .setArrowGravity(ArrowGravity.TO_BOTTOM_ALIGN_START) // 設置箭頭相對於浮窗的位置
        .setBgColor(Color.WHITE) // 設置背景色
        .setShadowColor(Color.parseColor("#33000000")) // 設置陰影色
        .setArrowHeightDp(6) // 設置箭頭高度
        .setRadiusDp(4) // 設置浮窗圓角半徑
        .setArrowOffsetXDp(0) // 設置箭頭在 x 軸的偏移量
        .setArrowOffsetYDp(0) // 設置箭頭在 y 軸的偏移量
        .setShadowSizeDp(6) // 設置陰影寬度

        .setTipGravity(TipGravity.TO_TOP_ALIGN_START) // 設置浮窗相對於錨點控件展現的位置
        .setTipOffsetXDp(0) // 設置浮窗在 x 軸的偏移量
        .setTipOffsetYDp(6) // 設置浮窗在 y 軸的偏移量

        .setBackgroundDimEnabled(false) // 設置是否容許浮窗的背景變暗
        .setDismissOnTouchOutside(true) // 設置點擊浮窗外部時是否自動關閉浮窗

        .show(); // 顯示浮窗
複製代碼

TipGravity 說明

• 經過 TipGravity.xxxx 來設置浮窗相對於錨點控件展現的位置

  

ArrowGravity 說明

• 經過 ArrowGravity.xxxx 來設置箭頭相對於浮窗的位置

TransformersTipLinearLayout 和 TransformersTipRelativeLayout 自定義屬性說明

<declare-styleable name="ArrowDrawable">
    <!-- 背景色 -->
    <attr format="reference|color" name="ad_bgColor" />
    <!-- 陰影色 -->
    <attr format="reference|color" name="ad_shadowColor" />
    <!-- 箭頭高度 -->
    <attr format="dimension" name="ad_arrowHeight" />
    <!-- 陰影寬度 -->
    <attr format="dimension" name="ad_shadowSize" />
    <!-- 浮窗圓角半徑 -->
    <attr format="dimension" name="ad_radius" />
    <!-- 箭頭在 x 軸的偏移量 -->
    <attr format="dimension" name="ad_arrowExtraOffsetX" />
    <!-- 箭頭在 y 軸的偏移量 -->
    <attr format="dimension" name="ad_arrowExtraOffsetY" />
    <!-- 箭頭相對於浮窗的位置 -->
    <attr name="ad_arrowGravity">
        <flag name="to_top_align_start" value="65" />
        <flag name="to_top_center" value="129" />
        <flag name="to_top_align_end" value="257" />

        <flag name="align_top_to_start" value="34" />
        <flag name="align_top_to_end" value="514" />

        <flag name="center_to_start" value="36" />
        <flag name="center_to_end" value="516" />

        <flag name="align_bottom_to_start" value="40" />
        <flag name="align_bottom_to_end" value="520" />

        <flag name="to_bottom_align_start" value="80" />
        <flag name="to_bottom_center" value="144" />
        <flag name="to_bottom_align_end" value="272" />
    </attr>
</declare-styleable>
複製代碼

點擊查看前往 GitHub 查看項目源碼