效果图

底部弹窗.gif

在很多APP特别是ios系统的App中会经常看到从底部弹出而且也停留在底部位置的弹窗，这种交互设计感觉很好，所以我也想在我写的一个天气App中用上，废话少说，直接开干。

其实自定义Dialog很简单，无非就是给Dialog设置一个自定义的布局，样式以及动画等。

自定义Dialog布局

布局很简单就是两个供点击的子布局，我用了两个TextView，而父布局用了LinearLayout。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:divider="@drawable/setting_divider"
    android:showDividers="middle"
    android:background="@drawable/area_dialog_bg"
    android:gravity="center">

    <TextView
        android:id="@+id/from_album_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="从相册选择"
        android:textSize="20sp"
        android:textColor="@color/colorPrimary"/>
    <TextView
        android:id="@+id/from_system_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="系统图片"
        android:textSize="20sp"
        android:textColor="@color/colorPrimary"/>


</LinearLayout>

自定义Dialog样式

样式就是用来设置Dialog的背景，形状，动画等属性

<style name="BottomDialogStyle" 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/BottomDialogAnimation</item></style>
<!-- ActionSheet进出动画 -->
<style name="BottomDialogAnimation" parent="@android:style/Animation.Dialog">
       <item name="android:windowEnterAnimation">@anim/bottom_dialog_in</item>
       <item name="android:windowExitAnimation">@anim/bottom_dialog_exit</item></style>
    

上述代码中都有详细的注释，就不一一解释了，另外，在上面的动画属性设置里，还需要两个自定义的动画文件

<?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" />

<?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%" />

第一个是从下方弹出的动画，第二个是退出的动画

自定义Dialog

完成了布局、样式之后，就可以开始自定义一个Dialog了，步骤其实也很简单

• new 一个Dialog的实例myDialog，传入context和上面定义的样式；
• 加载自定义的布局，初始化布局的控件，为两个TextView设置点击事件；
• 将布局设置给Dialog的实例myDialog；
• 获取当前dialog所在的窗体，为myDialog设置位置属性，以及宽和高；
• 显示对话框；

bgSetDialog = new Dialog(mContext, R.style.BottomDialogStyle);
        //填充对话框的布局
        View view = LayoutInflater.from(mContext).inflate(R.layout.bg_set_dialog, null);
        //初始化控件
        TextView fromAlbum = (TextView) view.findViewById(R.id.from_album_text);
        TextView fromSystem = (TextView) view.findViewById(R.id.from_system_text);
        fromAlbum.setOnClickListener(SettingActivity.this);
        fromSystem.setOnClickListener(this);
        //将布局设置给Dialog
        bgSetDialog.setContentView(view);
        //获取当前Activity所在的窗体
        Window dialogWindow = bgSetDialog.getWindow();
        //设置Dialog从窗体底部弹出
        dialogWindow.setGravity( Gravity.BOTTOM);
        //获得窗体的属性
        WindowManager.LayoutParams lp = dialogWindow.getAttributes();
        lp.width = (int) (getScreenWidth()*0.95);
        lp.y = 20; //设置Dialog距离底部的距离
        dialogWindow.setAttributes(lp); //将属性设置给窗体
        bgSetDialog.show();//显示对话框

利用上面的代码就会出现效果图所展示的效果，代码中大部分给了详细的注释，不过重点要提一下，也是当时最困惑我的地方，就是设置dialog 的宽度。
我在自定义的布局中，把父布局和子控件的layout_width都设置成match_parent时，运行后的效果总是wrap_content的效果，然后我又尝试了其他的设置组合，包括设置特定的dp值，但最后的效果要么是占满屏幕的宽度，要么是wrap_content的效果，感觉这个布局文件控制不了自定义dialog 的大小，不知道这是不是一个小bug，或者是本来就不应该用布局文件去控制，如果有人知道能告诉我的话，小弟感激不敬。
所以到后来我看了别人的代码之后，发现都是在自定义dialog时用window来控制的，所以就有了上述代码中设置dialog所在的窗体的width属性。

今天的就写到这吧，后续有时间还会就自定义弹窗写一些文章。

2017.4.18 23:40
806 实验室