android組件式開發（1）——可復用的彈出式菜單

組件式開發，融入android

**

引言

**
在app中經常能看到底部彈出式菜單的應用，比如手機qq和微信中頭像的選擇。這一組件非常常用。所以，將這一組件進行封裝後，就可以像使用android 原生view 一樣方便地使用這一功能，極大地提高了程序的可擴展性和可維護性。

（一）效果實現

第一步，我們需要將底部彈出式菜單的效果實現出來。
在android中，菜單一般可以使用dialog和popupwindow兩種方式實現。這裡使用popupwindow來實現我們的效果。

popupwindow 實現彈出框代碼：

View view = mInflater.inflate(R.layout.bottom_pop_window, null);
mPopupWindow = new PopupWindow(view, ScreenUtil.getScreenWidth(mContext), LinearLayout.LayoutParams.WRAP_CONTENT);
        //監聽PopupWindow的dismiss，當dismiss時屏幕恢復亮度
        mPopupWindow.setOnDismissListener(new PopupWindow.OnDismissListener() {
            @Override
            public void onDismiss() {

                params.alpha = 1.0f;
                window.setAttributes(params);
            }
        });
        mPopupWindow.setWidth(LayoutParams.MATCH_PARENT);
       mPopupWindow.setHeight(LayoutParams.WRAP_CONTENT);
        mPopupWindow.setBackgroundDrawable(new BitmapDrawable());
        mPopupWindow.setTouchable(true);
        mPopupWindow.setFocusable(true);
        mPopupWindow.setOutsideTouchable(true);
        // 動畫效果 從底部彈起
        mPopupWindow.setAnimationStyle(R.style.popWindow_animation);

其中bottom_pop_window.xml 為自定義的布局。

bottom_pop_window.xml

一般的底部菜單彈出時，屏幕會變暗，當菜單消失時，屏幕亮度恢復。dialog是自帶這種效果，但是popupwindow 沒有，所以我們需要自己來實現這種效果。具體實現步驟是：

獲得windowManager對象：
WindowManager windowManager = context.getWindowManager();
2.獲得Window對象和window的 LayoutParams對象： Window window = context.getWindow();
LayoutParams params =
context.getWindow().getAttributes(); 改變 params.alpha = 1.0f來調節屏幕亮度。

( 二 ) 封裝組件

僅僅實現了效果是不夠的，試想每次用到這個控件的時候，都需要寫一大堆的代碼，其中很多都是重復的，毫無必要。我們完全可以抽離出其中相同的部分代碼，對這段代碼進行封裝，將不同部分的代碼暴露出來，供外部自行定義。
**

分析

**
分析一下，每次使用這個組件的時候，不同的地方無非就是 按鈕中的文字以及點擊按鈕後的相應事件。而相同的地方就是對話框的創建和消失的處理。所以，我們可以將不同的部分剝離出來，作為接口供外部自行回調。

**

封裝ing

**
首先創建一個BottomPopView類，將popupwindow的創建和一系列初始化操作封裝到內部進行，提供一些回調方法，供外部自定義按鈕的文字和事件即可。

BottomPopView.class

public abstract class BottomPopView {
    private Context mContext;
    private View anchor;
    private LayoutInflater mInflater;
    private TextView mTvTop;
    private TextView mTvBottom;
    private TextView mTvCancel;
    private PopupWindow mPopupWindow;
    LayoutParams params;
    WindowManager windowManager;
    Window window;

    /**
     * @param context
     * @param anchor  依附在哪個View下面
     */
    public BottomPopView(Activity context, View anchor) {
        this.mContext = context;
        this.mInflater = LayoutInflater.from(context);
        this.anchor = anchor;
        windowManager = context.getWindowManager();
        window = context.getWindow();
        params = context.getWindow().getAttributes();
        init();
    }

    public void init() {
        View view = mInflater.inflate(R.layout.bottom_pop_window, null);
        params.dimAmount = 0.5f;
        window.addFlags(LayoutParams.FLAG_DIM_BEHIND);
        mTvBottom = (TextView) view.findViewById(R.id.tv_choose_photo);
        mTvTop = (TextView) view.findViewById(R.id.tv_take_photo);
        mTvCancel = (TextView) view.findViewById(R.id.tv_cancel);
        mTvTop.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                onTopButtonClick();
            }
        });
        mTvBottom.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                onBottomButtonClick();
            }
        });
        mTvCancel.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dismiss();
            }
        });

        mPopupWindow = new PopupWindow(view, ScreenUtil.getScreenWidth(mContext), LinearLayout.LayoutParams.WRAP_CONTENT);
        //監聽PopupWindow的dismiss，當dismiss時屏幕恢復亮度
        mPopupWindow.setOnDismissListener(new PopupWindow.OnDismissListener() {
            @Override
            public void onDismiss() {
                params.alpha = 1.0f;
                window.setAttributes(params);
            }
        });
        mPopupWindow.setWidth(LayoutParams.MATCH_PARENT);
        mPopupWindow.setHeight(LayoutParams.WRAP_CONTENT);
        mPopupWindow.setBackgroundDrawable(new BitmapDrawable());
        mPopupWindow.setTouchable(true);
        mPopupWindow.setFocusable(true);
        mPopupWindow.setOutsideTouchable(true);
        // 動畫效果 從底部彈起
        mPopupWindow.setAnimationStyle(R.style.popWindow_animation);
    }

    /**
     * 顯示底部對話框
     */
    public void show() {
        mPopupWindow.showAtLocation(anchor, Gravity.BOTTOM, 0, 0);
        params.alpha = 0.5f;
        window.setAttributes(params);
    }

    /**
     * 第一個按鈕被點擊的回調
     */
    public abstract void onTopButtonClick();

    /**
     * 第二個按鈕被點擊的回調
     */
    public abstract void onBottomButtonClick();

    public void setTopText(String text) {
        mTvTop.setText(text);
    }

    public void setBottomText(String text) {
        mTvBottom.setText(text);
    }
    public void dismiss(){
        if(mPopupWindow!=null && mPopupWindow.isShowing()){
            mPopupWindow.dismiss();
        }
    }
}

我們提供 setTopText和setBottomText方法來讓外部設置按鈕的文字；onTopButtonClick和onBottomButtonClick回調方法讓外部實現按鈕的點擊事件。

像系統原生View一樣使用

接下來，使用我們的BottomPopView相當簡單，就如同使用系統的Dialog一樣輕松。

  //底部彈出的布局 照相和選擇圖片
        bottomPopView = new BottomPopView(this, root) {
            @Override
            public void onTopButtonClick() {
                //拍照
                takePhoto();
            }

            @Override
            public void onBottomButtonClick() {
                //選擇本地圖片
                choosePhoto();
            }
        };
        bottomPopView.setTopText(拍照);
        bottomPopView.setBottomText(選擇圖片);
        // 顯示底部菜單
        bottomPopView.show();

好了 ，以後再想要使用底部彈出菜單，只需要以上幾行代碼就可以輕松搞定了。