实现一个从底部向上弹出的菜单栏

版权声明：本文为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是无边界的波纹，效果可以自己试着去体会一下。

原文链接：http://electhuang.com/2017/08/15/bottom-dialog/

欢迎您扫一扫下面的微信公众号，订阅我的博客！ 公众号二维码