Android实现底部对话框BottomDialog

作者: xiaoyanger | 来源:发表于2017-03-17 18:06 被阅读6048次

    最近项目上需要实现一个底部对话框,要实现这样的功能其实很简单,先看代码:

    private void show1() {
        Dialog bottomDialog = new Dialog(this, R.style.BottomDialog);
        View contentView = LayoutInflater.from(this).inflate(R.layout.dialog_content_normal, null);
        bottomDialog.setContentView(contentView);
        ViewGroup.LayoutParams layoutParams = contentView.getLayoutParams();
        layoutParams.width = getResources().getDisplayMetrics().widthPixels;
        contentView.setLayoutParams(layoutParams);
        bottomDialog.getWindow().setGravity(Gravity.BOTTOM);
        bottomDialog.getWindow().setWindowAnimations(R.style.BottomDialog_Animation);
        bottomDialog.show();
    }
    

    对话框的样式style:

    <style name="BottomDialog" parent="@style/Base.V7.Theme.AppCompat.Light.Dialog">
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
    </style>
    

    在对话框中的按钮需要MD风格的波纹效果的话,对话框的styleparent需要设定parent="@style/Base.V7.Theme.AppCompat.Light.Dialog",否则没有效果。同时将对话框所在window的标题去掉。android:windowBackground属性一定要设置成透明,否则自定义形状的对话框背景就是默认的白色了。如果不设置为透明,比如我们通常要设置的圆角对话框就没有效果。

    对话框显示时从底部进入,关闭时从底部滑出。动画样式:

    <style name="BottomDialog.Animation" parent="Animation.AppCompat.Dialog">
        <item name="android:windowEnterAnimation">@anim/translate_dialog_in</item>
        <item name="android:windowExitAnimation">@anim/translate_dialog_out</item>
    </style>
    

    tranlate_dialog_in.xml:

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

    tranlate_dialog_out.xml:

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

    实现底部对话框的原理就是修改对话框的内容布局contentView的参数,使它的宽度刚好等于屏幕的宽度,并且设置对话框所在Windowgravity属性为bottom

    需要注意的是,上面代码中需要在调用contentView.getLayoutParams()需要在setContentView方法后,否则获取到的LayoutParamsnull,当然也可以自己new一个LayoutParams设置给contentView

    底部对话框效果

    如果是要实现底部圆角对话框,原理也相似,只需要给contentView添加一个圆角的背景shape,并减小contentView的宽度给左右两边留一定的距离,同时给底部设置边距。

    private void show2() {
        Dialog bottomDialog = new Dialog(this, R.style.BottomDialog);
        View contentView = LayoutInflater.from(this).inflate(R.layout.dialog_content_circle, null);
        bottomDialog.setContentView(contentView);
        ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) contentView.getLayoutParams();
        params.width = getResources().getDisplayMetrics().widthPixels - DensityUtil.dp2px(this, 16f);
        params.bottomMargin = DensityUtil.dp2px(this, 8f);
        contentView.setLayoutParams(params);
        bottomDialog.getWindow().setGravity(Gravity.BOTTOM);
        bottomDialog.getWindow().setWindowAnimations(R.style.BottomDialog_Animation);
        bottomDialog.show();
    }
    
    底部圆角对话框效果
    源码:https://github.com/xiaoyanger0825/BottomDialog

    相关文章

      网友评论

      • pushyzheng:写的很好!学到了
      • akisa:我最近也做了个这,用popupWindow弄的
      • MigrationUK:BottomSheetDialog
      • 梦想编织者灬小楠:受教了...
        0青衣小褂0:对话框里的点击逻辑要在哪里处理呢?
        xiaoyanger: @梦想编织者灬小楠 😄
      • 青见仔:好像没有点击弹出框以外的地方 关闭窗口 功能
        青见仔:@xiaoyanger oK
        xiaoyanger:@Aert 给bottomDialog加上setCanceledOnTouchOutside(true)就可以了
      • walkthehorizon:BottomDialogFragment,有这么一个原生的类,继承该类就可以了,感觉没必要自己new一个Dialog
      • 2505ffecdcc0:好棒
        xiaoyanger:@避雨客 你好,我用华为TAG-AL100测试了,把虚拟键盘隐藏没有出现底部空白区呢,可否告知一下你的测试机型呢,谢谢。
        避雨客:你好,有没有试过在带虚拟按键的手机上跑过呢?如果在带虚拟按键的手机上跑,然后把虚拟按键隐藏就会出现底部有块空白区
        xiaoyanger: @SaberrrC 谢谢。
      • 旋哥:楼主你的的动图怎么截的
        xiaoyanger: @徐龙超 确实是这样,谢谢提醒。
        298ac7ee7f62:@xiaoyanger 楼主,不一定非要使用Base.V7.Theme.AppCompat.Light.Dialog这个主题,Theme.AppCompt.Light.Dialog主题也很好。我们知道AS默认主题都是Theme.AppComapt开头的,使用这样的主题,谷歌已经帮我们处理好主题向下兼容问题了,这个Theme.AppCompat能够很大程度上解决问题,基本已经不需要使用其他很老的4.x的holo主题,2.x系统的theme主题。有个参考链接。。https://medium.com/@Sserra90/android-themes-an-in-depth-guide-f71f9db6e5bf#.p1f23eg8o
        xiaoyanger: @ThinkSXuan AndroidStudio自带录屏的工具,录成视频转成gif图就可以了

      本文标题:Android实现底部对话框BottomDialog

      本文链接:https://www.haomeiwen.com/subject/xqcsnttx.html