如何定製PopupWindow彈出框及方法介紹

利用PopupWindow定製信息浮窗

點擊地圖上的店鋪圖標彈出浮窗顯示店鋪部分信息

• 具體效果
  

• 佈局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:orientation="vertical">

    <TextView
        android:id="@+id/float_shop_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="27dp"
        android:layout_marginTop="8dp"
        android:textColor="@color/font_black_21"
        android:textSize="16sp"
        tools:text="店鋪名稱：時光音樂飲吧" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_gravity="center_vertical"
        android:layout_marginTop="9.5dp"
        android:background="@color/view_gray_2" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="11.5dp"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="25.5dp"
            android:src="@drawable/home_map_icon" />

        <TextView
            android:id="@+id/float_shop_location"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="9dp"
            android:background="@color/white"
            android:text="河南省開封市市轄區金耀路王八副書記放"
            android:textColor="@color/font_black_11"
            android:textSize="@dimen/font_size_14"/>
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_gravity="center_vertical"
        android:layout_marginTop="13dp"
        android:background="@color/view_gray_2" />

    <LinearLayout
        android:layout_marginTop="11dp"
        android:id="@+id/float_shop_linearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:orientation="horizontal"
        android:showDividers="middle">

        <LinearLayout
            android:id="@+id/re2"
            android:layout_weight="1"
            android:layout_width="1dp"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="距離當前位置"
                android:textColor="@color/font_black_21"
                android:textSize="13sp"
                android:layout_marginLeft="50.5dp"/>

            <TextView
                android:id="@+id/float_shop_distance"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:layout_gravity="center"
                android:text="50m"
                android:textColor="@color/font_black_21"
                android:textSize="22sp" />
        </LinearLayout>

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="@color/view_gray_1" />

        <LinearLayout
            android:id="@+id/re3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="徵信積分"
                android:layout_marginLeft="63.5dp"
                android:textColor="@color/font_black_21"
                android:textSize="13sp" />
            <TextView
                android:id="@+id/float_shop_score"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="8dp"
                android:text="0分"
                android:textColor="@color/font_black_21"
                android:textSize="22sp" />
        </LinearLayout>
    </LinearLayout>

• 代碼文件

 private View mPopWindowView; //PopWindow對應的佈局View
    /**
     * 創建信息浮窗
     *
     * @param shopItem
     */
    private void createPopupWindow(MapShopItem shopItem) {

        //...省略部分代碼
        //獲取視圖
        mPopWindowView = (View) LayoutInflater.from(getActivity()).inflate(R.layout.floating_infowindow,
                null);
        //獲取視圖上的控件對象
        TextView shopLocationTextView = (TextView) mPopWindowView.findViewById(R.id.float_shop_location);
        //獲取徵信積分
        int shopCredit = shopItem.getAnnual_credits();
        //獲得綁定的數據併爲shopNameTextView賦值
        TextView shopNameTextView = (TextView) mPopWindowView.findViewById(R.id.float_shop_name);
        if(shopName.length()<=12)
            shopNameTextView.setText(getResources().getString(R.string.shop_name_tip) + "：" + shopName);
        else {
            String shortShopName = shopName.substring(0,12) + "...";
            shopNameTextView.setText(getResources().getString(R.string.shop_name_tip) + "：" + shortShopName);
        }
        //...省略部分代碼（一些View賦值的語句）

        //獲取顯示地圖界面的toolBar
        Toolbar toolbar = (Toolbar) getActivity().findViewById(R.id.shop_toolbar);
        //創建PopupWindow
        PopupWindow popupWindow = new PopupWindow(mPopWindowView, ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.WRAP_CONTENT, true);
        //點擊其他地方關閉
        popupWindow.setOutsideTouchable(true);
        //由於Android 版本差異性,在不需要背景的情況下設置背景爲透明
        popupWindow.setBackgroundDrawable(new ColorDrawable(getResources().getColor(R.color.map_page_background)));
        //設置顯示位置
        //popupWindow.showAtLocation(mMapView, Gravity.TOP, 0, toolbar.getHeight() + 71);
        popupWindow.showAsDropDown(toolbar);//顯示在toolbar下方
    }

PopupWindow介紹

android.widget.popupWindow,這個類可用於顯示任意視圖的彈出窗口。彈出窗口是一個浮動的容器，可以根據需要選擇顯示的位置。

• 構造方法（部分）

//創建一個新的空的，不可聚焦的維（0，0）彈出窗口。
 PopupWindow(Context context);
 //創建一個新的彈出窗口
 PopupWindow(View contentView,int width,int height,boolean focusable);

要生成一個PopupWindow這三個最基本的參數必不可少：View contentView,int width,int height； 其中height和width的值可以是：match_parent,wrap_content,或者具體的數值。

• 顯示位置

//顯示在某個指定控件的下方
showAsDropDown(View anchor)：
//顯示在某個指定控件的下方,指定偏移距離
showAsDropDown(View anchor, int xoff, int yoff)；
//指定父視圖，顯示在父控件的某個位置（Gravity.TOP,Gravity.RIGHT等）
showAtLocation(View parent, int gravity, int x, int y)；
//相對某個控件的位置（正左下方），無偏移    
showAsDropDown(View anchor)：    
//相對某個控件的位置，有偏移;xoff表示x軸的偏移，正值表示向左，負值表示向右；yoff表示相對y軸的偏移，正值是向下，負值是向上；    
showAsDropDown(View anchor, int xoff, int yoff)：    
//相對於父控件的位置（例如正中央Gravity.CENTER，下方Gravity.BOTTOM等），可以設置偏移或無偏移    
showAtLocation(View parent, int gravity, int x, int y)： 

• 關閉PopupWindow

public void dismiss()