利用BottomSheetDialog实现底部弹窗
这种方式实现底部弹窗,我之前并没有用过,还是这篇文章下面的评论说现在都在用bottonSheetDialog了,我才知道可以用这种方式实现底部弹窗。亡羊补牢,为时不晚,为了以后让阅读本文的人可以知道这种方式,就赶紧把这种实现底部弹窗的方式加到本文中了。使用BottonSheetDialog真的非常简单,就像直接使用Dialog一样,下面看一下使用的代码
//使用BottomSheetDialog方式实现底部弹窗 void showBottomSheetDialog(){ BottomSheetDialog bottomSheet = new BottomSheetDialog(this);//实例化BottomSheetDialog bottomSheet.setCancelable(true);//设置点击外部是否可以取消 bottomSheet.setContentView(R.layout.dialog_layout);//设置对框框中的布局 bottomSheet.show();//显示弹窗 }
代码很简单,现在看下BottomSheetDialog的源码,BottomSheetDialog是继承AppCompatDialog的,间接的继承了Dialog,然后重写量一些方法,下面看代码
//设置需要展示的view @Override public void setContentView(@LayoutRes int layoutResId) { super.setContentView(wrapInBottomSheet(layoutResId, null, null)); } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Window window = getWindow(); if (window != null) { if (Build.VERSION.SDK_INT >= 21) { //设置5.0以上系统状态栏 window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); } //设置布局的属性 window.setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); } }
可以发现setContentView引用了wrapInBottomSheet方法,wrapInBottomSheet方法就是实现底部弹窗的重要方法,下面看下这个方法的内容
private View wrapInBottomSheet(int layoutResId, View view, ViewGroup.LayoutParams params) { final FrameLayout container = (FrameLayout) View.inflate(getContext(), R.layout.design_bottom_sheet_dialog, null); final CoordinatorLayout coordinator = (CoordinatorLayout) container.findViewById(R.id.coordinator); if (layoutResId != 0 && view == null) { view = getLayoutInflater().inflate(layoutResId, coordinator, false); } FrameLayout bottomSheet = (FrameLayout) coordinator.findViewById(R.id.design_bottom_sheet);//这个view就是放置我们自己布局的容器 mBehavior = BottomSheetBehavior.from(bottomSheet); mBehavior.setBottomSheetCallback(mBottomSheetCallback); mBehavior.setHideable(mCancelable); if (params == null) { bottomSheet.addView(view); } else { bottomSheet.addView(view, params); } // We treat the CoordinatorLayout as outside the dialog though it is technically inside coordinator.findViewById(R.id.touch_outside).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if (mCancelable && isShowing() && shouldWindowCloseOnTouchOutside()) { cancel(); } } }); //此处省略部分代码 ...... return container; }
可以看到wrapInBottomSheet这个方法主要是将我们自己的布局放在design_bottom_sheet_dialog这个layout中的id为design_bottom_sheet的view中了,看下design_bottom_sheet_dialog这个布局你就会明白了
<?xml version="1.0" encoding="utf-8"?> <!-- ~ Copyright (C) 2015 The Android Open Source Project ~ ~ Licensed under the Apache License, Version 2.0 (the "License"); ~ you may not use this file except in compliance with the License. ~ You may obtain a copy of the License at ~ ~ http://www.apache.org/licenses/LICENSE-2.0 ~ ~ Unless required by applicable law or agreed to in writing, software ~ distributed under the License is distributed on an "AS IS" BASIS, ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. ~ See the License for the specific language governing permissions and ~ limitations under the License. --> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.CoordinatorLayout android:id="@+id/coordinator" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <View android:id="@+id/touch_outside" android:layout_width="match_parent" android:layout_height="match_parent" android:importantForAccessibility="no" android:soundEffectsEnabled="false" tools:ignore="UnusedAttribute"/> <FrameLayout android:id="@+id/design_bottom_sheet" style="?attr/bottomSheetStyle" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center_horizontal|top" android:clickable="true" app:layout_behavior="@string/bottom_sheet_behavior"/> </android.support.design.widget.CoordinatorLayout> </FrameLayout>
通过阅读源码你会发现BottemSheetDialog的实质就是Dialog中填充了一个全屏的布局,然后在这个布局的底部把你自己的布局放置进去。
结束语
好了,到这里四种实现底部弹窗的方式已经讲完了,大家可以下载源码研究一下,源码在这里,在做项目时选择最适合的就好,在这里还是推荐使用BottomSheetDialog吧!毕竟使用很简单。