【Android UI設計與開發】7.底部菜單欄（四）PopupWindow 實現顯示仿騰訊新聞底部彈出菜單

時間 2019-11-11

標籤 android 設計開發底部菜單 popupwindow 實現顯示騰訊彈出欄目 Android 简体版

原文原文鏈接

前一篇文章中有用到 PopupWindow 來實現彈窗的功能。簡單介紹如下吧。html

官方文檔是這樣解釋的：這就是一個彈出窗口,能夠用來顯示一個任意視圖。出現的彈出窗口是一個浮動容器的當前活動。android

1.首先來個簡單的栗子，效果以下：git

只有兩個佈局文件，一個是彈窗佈局（只有一張圖片），一個是主界面佈局（只有一個按鈕）。github

而後在主界面代碼中實例 PopupWindow ，指定彈出的界面，在按鈕點擊事件中顯示或隱藏彈窗就能夠了，代碼以下：app

package com.yanis.demo;

import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.LinearLayout.LayoutParams;
import android.widget.PopupWindow;

public class PopupWindowActivity extends Activity {
    PopupWindow pop;
    Button btn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_popup_window);
        btn = (Button) findViewById(R.id.btnShowWindow);

        LayoutInflater inflater = LayoutInflater.from(this);
        // 引入窗口配置文件 - 即彈窗的界面
        View view = inflater.inflate(R.layout.my_popup_window, null);
        // PopupWindow實例化
        pop = new PopupWindow(view, LayoutParams.WRAP_CONTENT,
                LayoutParams.WRAP_CONTENT, false);

        btn.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (pop.isShowing()) {
                    // 隱藏窗口，若是設置了點擊窗口外消失，則不須要此方式隱藏
                    pop.dismiss();
                } else {
                    // 彈出窗口顯示內容視圖,默認以錨定視圖的左下角爲起點，這裏爲點擊按鈕
                    pop.showAsDropDown(v);
                }
            }
        });

    }
}

2.知道了怎麼實現 PopupWindow 彈窗，利用其特性替換系統自帶的菜單欄，來個仿騰訊新聞的菜單吧，效果圖以下：ide

佈局什麼的花點時間，慢慢調，天然就出來了，主要仍是主界面的邏輯代碼啊，菜單就是經過 PopupWindow 來顯示的，具體代碼以下：佈局

package com.yanis.popup_window;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.util.Log;
import android.view.Gravity;
import android.view.KeyEvent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnKeyListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout.LayoutParams;
import android.widget.PopupWindow;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity implements OnClickListener,
        OnKeyListener {
    PopupWindow pop;
    TextView hideView;
    Button btnCancel;
    ImageView btnNight, btnWord, btnExit;
    View view;
    boolean isOut, isIn;// 是否彈窗顯示

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
        initData();
    }

    /**
     * 初始化組件
     */
    private void initView() {
        hideView = (TextView) findViewById(R.id.hideView);

        LayoutInflater inflater = LayoutInflater.from(this);
        // 引入窗口配置文件 - 即彈窗的界面
        view = inflater.inflate(R.layout.menu_view, null);
        btnNight = (ImageView) view.findViewById(R.id.btnNight);
        btnWord = (ImageView) view.findViewById(R.id.btnWord);
        btnExit = (ImageView) view.findViewById(R.id.btnExit);
        btnCancel = (Button) view.findViewById(R.id.btnCancel);

    }

    /**
     * 初始化數據
     */
    private void initData() {
        btnNight.setOnClickListener(this);
        btnWord.setOnClickListener(this);
        btnExit.setOnClickListener(this);
        btnCancel.setOnClickListener(this);
        view.setFocusableInTouchMode(true);
        view.setOnKeyListener(this);
        // PopupWindow實例化
        pop = new PopupWindow(view, LayoutParams.MATCH_PARENT,
                LayoutParams.WRAP_CONTENT, true);
        /**
         * PopupWindow 設置
         */
        // pop.setFocusable(true); //設置PopupWindow可得到焦點
        // pop.setTouchable(true); //設置PopupWindow可觸摸
        // pop.setOutsideTouchable(true); // 設置非PopupWindow區域可觸摸
        // 設置PopupWindow顯示和隱藏時的動畫
        pop.setAnimationStyle(R.style.MenuAnimationFade);
        /**
         * 改變背景可拉的彈出窗口。後臺能夠設置爲null。 這句話必須有，不然按返回鍵popwindow不能消失 或者加入這句話
         * ColorDrawable dw = new
         * ColorDrawable(-00000);pop.setBackgroundDrawable(dw);
         */
        pop.setBackgroundDrawable(new BitmapDrawable());

    }

    /**
     * 按鈕點擊事件監聽
     * 
     * @param v
     */
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.btnNight:
            changePopupWindowState();
            Toast.makeText(MainActivity.this, "你點擊了夜間模式", Toast.LENGTH_SHORT)
                    .show();
            break;
        case R.id.btnWord:
            changePopupWindowState();
            Toast.makeText(MainActivity.this, "你點擊了文本模式", Toast.LENGTH_SHORT)
                    .show();
            break;
        case R.id.btnExit:
            exitTheDemo();
            break;
        case R.id.btnCancel:
            changePopupWindowState();
            break;
        }
    }

    /**
     * 退出程序
     */
    private void exitTheDemo() {
        changePopupWindowState();
        new AlertDialog.Builder(MainActivity.this).setMessage("肯定退出這個 Demo 嗎？")
                .setPositiveButton("肯定", new DialogInterface.OnClickListener() {

                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        finish();
                    }
                }).setNegativeButton("取消", null).show();
    }

    /**
     * 改變 PopupWindow 的顯示和隱藏
     */
    private void changePopupWindowState() {
        if (pop.isShowing()) {
            // 隱藏窗口，若是設置了點擊窗口外消失，則不須要此方式隱藏
            pop.dismiss();
        } else {
            // 彈出窗口顯示內容視圖,默認以錨定視圖的左下角爲起點，這裏爲點擊按鈕
            pop.showAtLocation(hideView, Gravity.BOTTOM, 0, 0);
        }
    }

    // Called when a key was pressed down and not handled by any of the views
    // inside of the activity
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        switch (keyCode) {
        case KeyEvent.KEYCODE_MENU:// 菜單鍵監聽
            isOut = true;
            changePopupWindowState();
            break;
        }
        return super.onKeyDown(keyCode, event);
    }

    // Called when a hardware key is dispatched to a view.
    @Override
    public boolean onKey(View v, int keyCode, KeyEvent event) {
        switch (keyCode) {
        case KeyEvent.KEYCODE_MENU:
            if (isOut && !isIn) {
                isOut = false;
                isIn = true;
            } else if (!isOut && isIn) {
                isIn = false;
                changePopupWindowState();
            }
            break;
        }
        return false;
    }

}