Android中实现底部弹出菜单栏

  • Post author:
  • Post category:其他



今天闲的没事写了一个底部弹出菜单栏,虽然很简单,但是为了以后方便用,索性还是写下来了,那好,我们先看一下实现效果吧,我想这种效果现在用的实在是太多了(点击按钮显示底部菜单栏,然后单击空白地方隐藏菜单栏(记住只需要单击空白地方就可以,很方便,用户体验也比较好))


那好我们接下来就说一下他的具体流程、

1:主界面的代码就不贴了,因为就是一个按钮,很简单,

我们就写一下弹出的代码:(布局名字为bottom_dialog)

<?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="300dp"
    android:background="#ffffff"
    android:orientation="vertical"
    android:paddingBottom="20dp"
    android:paddingLeft="22.5dp"
    android:paddingRight="22.5dp"
    android:paddingTop="20dp">

    <Button
        android:id="@+id/btn_open_camera"
        android:layout_width="match_parent"
        android:layout_height="42dp"
        android:background="@drawable/reg_bg"
        android:gravity="center"
        android:text="拍照"
        android:textColor="#ffffff"
        android:textSize="18sp" />

    <Button
        android:id="@+id/btn_choose_img"
        android:layout_width="match_parent"
        android:layout_height="42dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/reg_bg"
        android:gravity="center"
        android:text="从相册中选取"
        android:textColor="#ffffff"
        android:textSize="18sp" />

    <Button
        android:id="@+id/btn_cancel"
        android:layout_width="match_parent"
        android:layout_height="42dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/reg_bg"
        android:gravity="center"
        android:text="取消"
        android:textColor="#ffffff"
        android:textSize="18sp" />
</LinearLayout>

我们写的是弹出,弹出就涉及到动画 了,然后我们在res下自定义一个包 anim(一定是res下,不要在drawable下,不然会报错,新手注意了),下面贴代码

这个@anim/dialog_in  是进入动画,

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200"
    android:fromYDelta="100%"
    android:toYDelta="0" />

这个@anim/dialog_iout 是退出动画,

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200"
    android:fromYDelta="0"
    android:toYDelta="100%" />

然后我们在style里面自定义样式:

<style name="BottomDialog" parent="@android:style/Theme.Dialog">

    <!-- 背景透明 -->
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowContentOverlay">@null</item>
    <!-- 浮于Activity之上 -->
    <item name="android:windowIsFloating">true</item>
    <!-- 边框 -->
    <item name="android:windowFrame">@null</item>
    <!-- Dialog以外的区域模糊效果 -->
    <item name="android:backgroundDimEnabled">true</item>
    <!-- 无标题 -->
    <item name="android:windowNoTitle">true</item>
    <!-- 半透明 -->
    <item name="android:windowIsTranslucent">true</item>
    <!-- Dialog进入及退出动画 -->
    <item name="android:windowAnimationStyle">@style/DialogAnimation</item>
</style>
<!-- ActionSheet进出动画 -->
<style name="DialogAnimation" parent="@android:style/Animation.Dialog">
    <item name="android:windowEnterAnimation">@anim/actionsheet_dialog_in</item>
    <item name="android:windowExitAnimation">@anim/actionsheet_dialog_out</item>
</style>

接下来就是mainActivity里面的代码实现:
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private Button btn_bottom_dialog;

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

        btn_bottom_dialog.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.btn_bottom_dialog:
                //弹出对话框
                setDialog();
                break;
            case R.id.btn_choose_img:
                //选择照片按钮
                Toast.makeText(this, "请选择照片", Toast.LENGTH_SHORT).show();
                break;
            case R.id.btn_open_camera:
                //拍照按钮
                Toast.makeText(this, "即将打开相机", Toast.LENGTH_SHORT).show();
                break;
            case R.id.btn_cancel:
                //取消按钮
                Toast.makeText(this, "取消", Toast.LENGTH_SHORT).show();
                break;

        }
    }

    private void setDialog() {
        Dialog mCameraDialog = new Dialog(this, R.style.BottomDialog);
        LinearLayout root = (LinearLayout) LayoutInflater.from(this).inflate(
                R.layout.bottom_dialog, null);
        //初始化视图
        root.findViewById(R.id.btn_choose_img).setOnClickListener(this);
        root.findViewById(R.id.btn_open_camera).setOnClickListener(this);
        root.findViewById(R.id.btn_cancel).setOnClickListener(this);
        mCameraDialog.setContentView(root);
        Window dialogWindow = mCameraDialog.getWindow();
        dialogWindow.setGravity(Gravity.BOTTOM);
//        dialogWindow.setWindowAnimations(R.style.dialogstyle); // 添加动画
        WindowManager.LayoutParams lp = dialogWindow.getAttributes(); // 获取对话框当前的参数值
        lp.x = 0; // 新位置X坐标
        lp.y = 0; // 新位置Y坐标
        lp.width = (int) getResources().getDisplayMetrics().widthPixels; // 宽度
        root.measure(0, 0);
        lp.height = root.getMeasuredHeight();

        lp.alpha = 9f; // 透明度
        dialogWindow.setAttributes(lp);
        mCameraDialog.show();
    }

只需要简单几步,就可以实现这个小功能,代码贴的比较全,直接复制粘贴就可以使用了呢 O(∩_∩)O



版权声明:本文为xys199719原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。