PopupWindow

PopupWindow

中央位置的PopupWindow

將自定義PopupWindow布局顯示在Activity中央位置，并且屏蔽PopupWindow之外的其他區(qū)域。

xml布局

布局中額外加上LinearLayout，主要是因?yàn)镻opupWindow會將最外層的Layout失效，會影響到中央位置的設(shè)置

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#66000000">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_centerVertical="true"
        android:orientation="horizontal"
        android:padding="10dp">

        <Button
            android:id="@+id/btn_edit"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/colorDarkCyan"
            android:gravity="center"
            android:text="@string/text_eidt"
            android:textAllCaps="false"
            android:textColor="@color/colorWhiteSmoke"
            android:textSize="16sp" />

        <View
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:background="@color/colorWhiteSmoke" />

        <Button
            android:id="@+id/btn_cancel"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/colorDarkCyan"
            android:gravity="center"
            android:text="@string/text_cancel"
            android:textAllCaps="false"
            android:textColor="@color/colorWhiteSmoke"
            android:textSize="16sp" />
    </LinearLayout>
</RelativeLayout>

自定義動畫樣式

創(chuàng)建動畫資源目錄res/anim，并在此目錄創(chuàng)建兩個(gè)資源文件：context_menu_enter.xml / context_menu_exit.xml
然后依據(jù)此兩個(gè)動畫創(chuàng)建一個(gè)動畫樣式contextMenuAnim，用于PopupWindow

res/anim/context_menu_enter.xml (進(jìn)入動畫效果)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@android:integer/config_shortAnimTime"
        android:fromXDelta="0"
        android:fromYDelta="100%p"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:toXDelta="0"
        android:toYDelta="0"/>
</set>

res/anim/context_menu_exit.xml (退出動畫效果)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@android:integer/config_shortAnimTime"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:toXDelta="0"
        android:toYDelta="100%p"/>
</set>

res/values/styles.xml (動畫樣式)

    <style name="contextMenuAnim" parent="@android:style/Animation.Activity">
        <item name="android:windowEnterAnimation">@anim/context_menu_enter</item>
        <item name="android:windowExitAnimation">@anim/context_menu_exit</item>
    </style>

關(guān)于translate移動方向和位置的示意圖：

anim_style.png

示例代碼

@SuppressLint("InflateParams")
private void showCenterPopupWindow() {
    View view = getLayoutInflater().inflate(R.layout.layout_popupwindow_center, null);
    Button mEditBtn = (Button) view.findViewById(R.id.btn_edit);
    Button mCancelBtn = (Button) view.findViewById(R.id.btn_cancel);
    mEditBtn.setOnClickListener(this);
    mCancelBtn.setOnClickListener(this);

    mPopupWindow = new PopupWindow(view);       // 點(diǎn)擊外部區(qū)域,彈窗不消失

    // 為PopupWindow菜單添加陰影時(shí)，其寬度和高度必須都設(shè)置為MATCH_PARENT
    mPopupWindow.setWidth(ViewGroup.LayoutParams.MATCH_PARENT);
    mPopupWindow.setHeight(ViewGroup.LayoutParams.MATCH_PARENT);

    ColorDrawable mColorDrawable = new ColorDrawable(0);
    mPopupWindow.setBackgroundDrawable(mColorDrawable);

    mPopupWindow.setAnimationStyle(R.style.contextMenuAnim);    // 自定義動畫樣式
    // mPopupWindow.setAnimationStyle(android.R.style.Animation_Translucent);

    mPopupWindow.getBackground().setAlpha(100);
    mPopupWindow.setOutsideTouchable(true);         // 點(diǎn)擊PopupWindow以外區(qū)域，自動消失，這里PopupWindow為MATCH_PARENT，故無效
    mPopupWindow.setFocusable(true);                // 如果PopupWindow中有Editor的話，focusable要為true
    mPopupWindow.setTouchable(true);                //
    mPopupWindow.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);

    View rootView = LayoutInflater.from(MainActivity.this).inflate(R.layout.activity_main, null);
    mPopupWindow.showAtLocation(rootView, Gravity.CENTER, 0, 0);
}

示例效果

popupwindow_center.gif

底部位置的PopupWindow

xml布局

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

    <Button
        android:id="@+id/btn_open"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="#7aab43"
        android:textAllCaps="false"
        android:textColor="#FFFFFF"
        android:textSize="16sp"
        android:text="@string/text_open" />

    <Button
        android:id="@+id/btn_save_as"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_marginTop="8dp"
        android:background="#d94d4d"
        android:textAllCaps="false"
        android:textColor="#FFFFFF"
        android:textSize="16sp"
        android:text="@string/text_save_as" />

    <Button
        android:id="@+id/btn_close"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_marginTop="8dp"
        android:background="#2464ca"
        android:textAllCaps="false"
        android:textColor="#FFFFFF"
        android:textSize="16sp"
        android:text="@string/text_close" />
</LinearLayout>

示例代碼

@SuppressLint("InflateParams")
private void showBottomPopupWindow() {
    setBackgroundAlpha(0.5f);               // 設(shè)置背景透明度

    View view = getLayoutInflater().inflate(R.layout.layout_popupwindow_bottom, null);
    Button mOpenBtn = (Button) view.findViewById(R.id.btn_open);
    Button mSaveAsBtn = (Button) view.findViewById(R.id.btn_save_as);
    Button mCloseBtn = (Button) view.findViewById(R.id.btn_close);
    mOpenBtn.setOnClickListener(this);
    mSaveAsBtn.setOnClickListener(this);
    mCloseBtn.setOnClickListener(this);

    // PopupWindow會丟棄掉最外層的父局部，故第二個(gè)LinearLayout才會起作用
    mPopupWindow = new PopupWindow(view);
    mPopupWindow.setWidth(ViewGroup.LayoutParams.MATCH_PARENT);
    mPopupWindow.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);

    // 背景
    ColorDrawable cd = new ColorDrawable(0);
    mPopupWindow.setBackgroundDrawable(cd);

    mPopupWindow.setAnimationStyle(android.R.style.Animation_Translucent);

    View rootView = LayoutInflater.from(MainActivity.this).inflate(R.layout.activity_main, null);
    mPopupWindow.showAtLocation(rootView, Gravity.BOTTOM, 0, 0);    // showAtLocation()顯示在指定位置
    mPopupWindow.setOnDismissListener(new PopupWindow.OnDismissListener() {
        @Override
        public void onDismiss() {
            setBackgroundAlpha(1.0f);       // 恢復(fù)背景透明度
        }
    });
}

// 設(shè)置屏幕背景透明度
private void setBackgroundAlpha(float alpha){
    WindowManager.LayoutParams mLayoutParams = getWindow().getAttributes();
    mLayoutParams.alpha = alpha;
    getWindow().setAttributes(mLayoutParams);
}

示例效果

popupwindow_bottom.gif

參照View位置的PopupWindow

xml布局

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

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="16dp">

        <Button
            android:id="@+id/btn_share"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="160dp"
            android:layout_height="wrap_content"
            android:background="#b6c93c"
            android:textColor="#FFFFFF"
            android:textAllCaps="false"
            android:text="@string/text_share" />

        <Button
            android:id="@+id/btn_collect"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="180dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:background="#3cc998"
            android:textColor="#FFFFFF"
            android:textAllCaps="false"
            android:text="@string/text_collect" />

        <Button
            android:id="@+id/btn_exit"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:background="#3ca8c9"
            android:textColor="#FFFFFF"
            android:textAllCaps="false"
            android:text="@string/text_exit" />
    </LinearLayout>
</LinearLayout>

示例代碼

@SuppressLint("InflateParams")
private void showPositionPopupWindow() {
    View view = getLayoutInflater().inflate(R.layout.layout_popupwindow_position, null);
    Button mShareBtn = (Button) view.findViewById(R.id.btn_share);
    Button mCollectBtn = (Button) view.findViewById(R.id.btn_collect);
    Button mExitBtn = (Button) view.findViewById(R.id.btn_exit);
    mShareBtn.setOnClickListener(this);
    mCollectBtn.setOnClickListener(this);
    mExitBtn.setOnClickListener(this);

    mPopupWindow = new PopupWindow(view);
    mPopupWindow.setWidth(ViewGroup.LayoutParams.MATCH_PARENT);
    mPopupWindow.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);

    ColorDrawable cd = new ColorDrawable(0);
    mPopupWindow.setBackgroundDrawable(cd);

    mPopupWindow.setAnimationStyle(android.R.style.Animation_Translucent);

    mPopupWindow.showAsDropDown(mPositionPopupWindowBtn);   // showAsDropDown()顯示在一個(gè)參照視圖View的周圍
}

示例效果

popupwindow_position.gif

源碼參考

PopupWindow

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容