Android基礎控件——PopupWindow模仿ios底部彈窗

前言

在H5火熱的時代，許多框架都出了底部彈窗的控件，在H5被稱為彈出菜單ActionSheet，今天我們也來模仿一個ios的底部彈窗，取材於蘋果QQ的選擇頭像功能

正文

廢話不多說，先來個今天要實現的效果圖

整個PopupWindow的開啟代碼

private void openPopupWindow(View v) {
    //防止重復按按鈕
    if (popupWindow != null && popupWindow.isShowing()) {
        return;
    }
    //設置PopupWindow的View
    View view = LayoutInflater.from(this).inflate(R.layout.view_popupwindow, null);
    popupWindow = new PopupWindow(view, RelativeLayout.LayoutParams.MATCH_PARENT,
            RelativeLayout.LayoutParams.WRAP_CONTENT);
    //設置背景,這個沒什麼效果，不添加會報錯
    popupWindow.setBackgroundDrawable(new BitmapDrawable());
    //設置點擊彈窗外隱藏自身
    popupWindow.setFocusable(true);
    popupWindow.setOutsideTouchable(true);
    //設置動畫
    popupWindow.setAnimationStyle(R.style.PopupWindow);
    //設置位置
    popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, navigationHeight);
    //設置消失監聽
    popupWindow.setOnDismissListener(this);
    //設置PopupWindow的View點擊事件
    setOnPopupViewClick(view);
    //設置背景色
    setBackgroundAlpha(0.5f);
}

步驟分析：

PopupWindow的布局 PopupWindow的創建 PopupWindow添加動畫效果 PopupWindow設置背景陰影 PopupWindow監聽點擊事件 獲取NavigationBar的高度

PopupWindow的布局：在Layout中，設計我們需要的布局

其效果是：

PopupWindow的創建：這個創建與我們普通的控件創建方法是一樣的

//設置PopupWindow的View
View view = LayoutInflater.from(this).inflate(R.layout.view_popupwindow, null);
popupWindow = new PopupWindow(view, RelativeLayout.LayoutParams.MATCH_PARENT,
                RelativeLayout.LayoutParams.WRAP_CONTENT);

PopupWindow添加動畫效果：我們創建一個anim文件夾，創建我們的out和in動畫效果，然後在style添加我們的動畫

//設置動畫
popupWindow.setAnimationStyle(R.style.PopupWindow);

PopupWindow設置背景陰影：彈窗打開時設置透明度為0.5，彈窗消失時設置透明度為1

//設置屏幕背景透明效果
public void setBackgroundAlpha(float alpha) {
    WindowManager.LayoutParams lp = getWindow().getAttributes();
    lp.alpha = alpha;
    getWindow().setAttributes(lp);
}

PopupWindow監聽點擊事件：監聽我們PopupWindow裡面控件的點擊事件

//設置PopupWindow的View點擊事件
setOnPopupViewClick(view);

private void setOnPopupViewClick(View view) {
    TextView tv_pick_phone, tv_pick_zone, tv_cancel;
    tv_pick_phone = (TextView) view.findViewById(R.id.tv_pick_phone);
    tv_pick_zone = (TextView) view.findViewById(R.id.tv_pick_zone);
    tv_cancel = (TextView) view.findViewById(R.id.tv_cancel);
    tv_pick_phone.setOnClickListener(this);
    tv_pick_zone.setOnClickListener(this);
    tv_cancel.setOnClickListener(this);
}

獲取NavigationBar的高度：這裡需要適配有些手機沒有NavigationBar有些手機有，這裡以存在NavigationBar來演示

int resourceId = getResources().getIdentifier("navigation_bar_height", "dimen", "android");
navigationHeight = getResources().getDimensionPixelSize(resourceId);

對存在NavigationBar的手機上，設置其PopupWindow的出現位置

//設置位置
popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, navigationHeight);

對沒有NavigationBar的手機上，設置其PopupWindow的出現位置

//設置位置
popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, 0);

---

源碼

Github：AndroidHensen/IOSPopupWindow">https://github.com/AndroidHensen/IOSPopupWindow

public class MainActivity extends AppCompatActivity implements View.OnClickListener, PopupWindow.OnDismissListener {

    private Button bt_open;
    private PopupWindow popupWindow;
    private int navigationHeight;

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

        bt_open = (Button) findViewById(R.id.bt_open);
        bt_open.setOnClickListener(this);

        int resourceId = getResources().getIdentifier("navigation_bar_height", "dimen", "android");
        navigationHeight = getResources().getDimensionPixelSize(resourceId);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.bt_open:
                openPopupWindow(v);
                break;
            case R.id.tv_pick_phone:
                Toast.makeText(this, "從手機相冊選擇", Toast.LENGTH_SHORT).show();
                popupWindow.dismiss();
                break;
            case R.id.tv_pick_zone:
                Toast.makeText(this, "從空間相冊選擇", Toast.LENGTH_SHORT).show();
                popupWindow.dismiss();
                break;
            case R.id.tv_cancel:
                popupWindow.dismiss();
                break;
        }
    }

    private void openPopupWindow(View v) {
        //防止重復按按鈕
        if (popupWindow != null && popupWindow.isShowing()) {
            return;
        }
        //設置PopupWindow的View
        View view = LayoutInflater.from(this).inflate(R.layout.view_popupwindow, null);
        popupWindow = new PopupWindow(view, RelativeLayout.LayoutParams.MATCH_PARENT,
                RelativeLayout.LayoutParams.WRAP_CONTENT);
        //設置背景,這個沒什麼效果，不添加會報錯
        popupWindow.setBackgroundDrawable(new BitmapDrawable());
        //設置點擊彈窗外隱藏自身
        popupWindow.setFocusable(true);
        popupWindow.setOutsideTouchable(true);
        //設置動畫
        popupWindow.setAnimationStyle(R.style.PopupWindow);
        //設置位置
        popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, navigationHeight);
        //設置消失監聽
        popupWindow.setOnDismissListener(this);
        //設置PopupWindow的View點擊事件
        setOnPopupViewClick(view);
        //設置背景色
        setBackgroundAlpha(0.5f);
    }

    private void setOnPopupViewClick(View view) {
        TextView tv_pick_phone, tv_pick_zone, tv_cancel;
        tv_pick_phone = (TextView) view.findViewById(R.id.tv_pick_phone);
        tv_pick_zone = (TextView) view.findViewById(R.id.tv_pick_zone);
        tv_cancel = (TextView) view.findViewById(R.id.tv_cancel);
        tv_pick_phone.setOnClickListener(this);
        tv_pick_zone.setOnClickListener(this);
        tv_cancel.setOnClickListener(this);
    }

    //設置屏幕背景透明效果
    public void setBackgroundAlpha(float alpha) {
        WindowManager.LayoutParams lp = getWindow().getAttributes();
        lp.alpha = alpha;
        getWindow().setAttributes(lp);
    }

    @Override
    public void onDismiss() {
        setBackgroundAlpha(1);
    }
}