實現一個從底部向上彈出的菜單欄

版權聲明：本文為elecdog原創文章，可以轉載，但必須在明確位置注明出處！謝謝合作。

微信在版本6.0上的菜單幾乎都是采用從底部滑出來的菜單欄，如圖所示：

現在自己動手實現一個類似的底部菜單欄。

1.Activity 中代碼

mBottomDialog = new Dialog(LockManageActivity.this, R.style.bottom_dialog);
LinearLayout root = (LinearLayout) LayoutInflater.from(LockManageActivity.this).inflate(R.layout.layout_add_menu, null);
root.findViewById(R.id.btn_add_pwd).setOnClickListener(menuBtnListener);
root.findViewById(R.id.btn_add_gp).setOnClickListener(menuBtnListener);
root.findViewById(R.id.btn_add_user).setOnClickListener(menuBtnListener);
root.findViewById(R.id.btn_cancel).setOnClickListener(menuBtnListener);
mBottomDialog.setContentView(root);
Window dialogWindow = mBottomDialog.getWindow();
dialogWindow.setGravity(Gravity.BOTTOM); //設置顯示在底部
dialogWindow.setWindowAnimations(R.style.dialog_style);
WindowManager.LayoutParams lp = dialogWindow.getAttributes();
lp.x = 0;
lp.y = -20;
lp.width = getResources().getDisplayMetrics().widthPixels; // 寬度
root.measure(0, 0);
lp.height = root.getMeasuredHeight();
lp.alpha = 9f;
dialogWindow.setAttributes(lp);
mBottomDialog.setCanceledOnTouchOutside(true);
mBottomDialog.show();

在 Activity 中我們創建了一個對話框對象，然后就是設置 contentView 以及設置一些參數。

2.R.style.bottom_dialog 樣式

<style name="bottom_dialog">
        <item name="android:windowNoTitle">true</item>
        <item name="android:backgroundDimEnabled">true</item>
</style>

3.R.layout.layout_add_menu 布局文件

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

    <Button
        android:id="@+id/btn_add_pwd"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="?attr/selectableItemBackground"
        android:gravity="center"
        android:text="添加密碼"
        android:textSize="18sp"/>

    <Button
        android:id="@+id/btn_add_gp"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="?attr/selectableItemBackground"
        android:gravity="center"
        android:text="添加指紋"
        android:textSize="18sp"/>

    <Button
        android:id="@+id/btn_add_user"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="?attr/selectableItemBackground"
        android:gravity="center"
        android:text="添加用戶"
        android:textSize="18sp"/>

    <Button
        android:id="@+id/btn_cancel"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="?attr/selectableItemBackground"
        android:gravity="center"
        android:text="取消"
        android:textSize="18sp"/>

</LinearLayout>

4.R.style.dialog_style 動畫樣式

<style name="dialog_style" parent="android:Animation">
        <item name="@android:windowEnterAnimation">@anim/dialog_enter</item>
        <item name="@android:windowExitAnimation">@anim/dialog_exit</item>
</style>

5.@anim/dialog_enter 樣式

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromYDelta="100%p"  android:duration="300"/>
</set>

6.@anim/dialog_exit 樣式

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:toYDelta="100%p"       android:duration="300"/>
</set>

最后，給菜單加上點擊監聽就可以了。另外，在布局文件中 Buttom 有個值得注意的屬性,

android:background="?attr/selectableItemBackground"

表示點擊按鈕的背景是有邊界的波紋，還有一個?attr/selectableItemBackgroundBorderless是無邊界的波紋，效果可以自己試着去體會一下。