自定义 DialogFragment 实现底部弹出 dialog

前端时间公司做的项目要求和 iOS 版本的 UI 风格保持高度的一致，虽然我个人及其排斥这种仿 iOS 的 UI，然而人在屋檐下，不得不出卖自己的节操。其中就有一个底部弹出 dialog 的效果，宽度还是全屏的，就项这个样子（其实这张图就是我最终实现的效果）：



于是乎百度 google 了一番，居然没有找到用 DialogFragment 实现的类似的效果，网上大多实现类似效果的都是使用传统的 dialog 实现的，本菜鸟虽然技术菜，但也知道 google 耙耙是推荐使用 DialogFragment 来代替 dialog，无奈只能自己尝试着实现了。

首先从底部弹出的效果，必然需要写一个弹出的动画，我们可以再 style 里面设置其弹出动画：

<style name="BottomDialog" parent="Theme.AppCompat.Light.Dialog">
<item name="android:windowAnimationStyle">@style/BottomDialogAnimation</item>
</style>

<style name="BottomDialogAnimation">
<item name="android:windowEnterAnimation">@anim/bottom_dialog_slide_show</item>
<item name="android:windowExitAnimation">@anim/bottom_dialog_slide_hide</item>
</style>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

<translate
android:duration="300"
android:fromYDelta="0"
android:toYDelta="100%p"/>
</set>

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

这样就把 style 定义好了，并且设置了它的弹出和销毁的动画，接下来就需要自定义 DialogFragment 了，上代码：

public abstract class BottomDialog extends DialogFragment {

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//设置style
setStyle(DialogFragment.STYLE_NORMAL, R.style.BottomDialog);

}

@Override
public void onStart() {
super.onStart();
//设置 dialog 的宽高
getDialog().getWindow().setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
//设置 dialog 的背景为 null
getDialog().getWindow().setBackgroundDrawable(null);

}

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

//去除标题栏
getDialog().requestWindowFeature(Window.FEATURE_NO_TITLE);

Window window = getDialog().getWindow();
WindowManager.LayoutParams lp = window.getAttributes();
lp.gravity = Gravity.BOTTOM; //底部
lp.width = WindowManager.LayoutParams.MATCH_PARENT;
window.setAttributes(lp);

return createView(inflater, container);
}

//重写此方法，设置布局文件
protected abstract View createView(LayoutInflater inflater, ViewGroup container);

}

很简单的自定义，都有注释，就不解释了，使用的时候直接继承这个类，然后重写 createView 方法来设置布局文件就好了