android底部弹窗的几种实现方式

2019-11-06 09:52:02

字体：大中小

来源：转载

供稿：网友

这里写图片描述

实现底部弹窗有以下几种方式： 1.dialog 2.Activity 3.DialogFragment 4.bottomSheet

底部弹窗本质上就是将对话框显示在底部。

在开始之前先给出布局文件：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" > <LinearLayout android:layout_width="wrap_content" android:orientation="vertical" android:layout_gravity="center_vertical" android:layout_height="wrap_content"> <Button android:layout_gravity="center_horizontal" android:onClick="onDialog" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="dialog"/> <Button android:layout_gravity="center_horizontal" android:onClick="onActivity" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="activity"/> <Button android:layout_gravity="center_horizontal" android:onClick="onDialogFragment" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="DialogFragment"/> <Button android:layout_gravity="center_horizontal" android:onClick="onButtonSheet" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="ButtonSheet"/> </LinearLayout> <android.support.v4.widget.NestedScrollView android:id="@+id/scroll" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_behavior="android.support.design.widget.BottomSheetBehavior"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="170dp" android:gravity="center" android:background="@color/colorPRimary" android:text="底部弹窗" android:textColor="@android:color/white"/> </LinearLayout> </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>

布局文件中显示4个button和一个NestedScrollView。NestedScrollView中为bottomSheet的内容。

一通过Dialog实现

dialog.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/layout" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="match_parent" android:layout_height="170dp" android:gravity="center" android:background="@color/colorPrimary" android:text="底部弹窗" android:textColor="@android:color/white"/></LinearLayout>public void onDialog(View view) { Dialog dialog=new Dialog(this);//可以在style中设定dialog的样式 dialog.setContentView(R.layout.dialog); WindowManager.LayoutParams lp=dialog.getWindow().getAttributes(); lp.gravity= Gravity.BOTTOM; lp.height= WindowManager.LayoutParams.WRAP_CONTENT; lp.width= WindowManager.LayoutParams.MATCH_PARENT; dialog.getWindow().setAttributes(lp); //设置该属性，dialog可以铺满屏幕 dialog.getWindow().setBackgroundDrawable(null); dialog.show();// dialog.getWindow().setWindowAnimations(); slideToUp(dialog.getWindow().findViewById(R.id.layout)); }/** * 弹出动画 * @param view */ public static void slideToUp(View view){ Animation slide = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 1.0f, Animation.RELATIVE_TO_SELF, 0.0f); slide.setDuration(2000); slide.setFillAfter(true); slide.setFillEnabled(true); view.startAnimation(slide); slide.setAnimationListener(new Animation.AnimationListener() { @Override public void onAnimationStart(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { } @Override public void onAnimationRepeat(Animation animation) { } }); }

运行结果：这里写图片描述

二通过activity实现

需要将activity的样式设置为Dialog的样式。<style name="bottom_style" parent="android:Theme.Dialog"> <item name="android:windowAnimationStyle">@style/AnimBottom</item> <item name="android:windowFrame">@null</item>  <item name="android:windowNoTitle">true</item>  <item name="android:windowBackground">@android:color/transparent</item>  </style><activity android:name=".DialogActivity" android:theme="@style/bottom_style"/>public class DialogActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.dialog); getWindow().setLayout(WindowManager.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT); getWindow().getAttributes().gravity= Gravity.BOTTOM; }}public void onActivity(View view) { Intent intent=new Intent(this,DialogActivity.class); startActivity(intent); }

结果：这里写图片描述

相比于dialog的实现方式，通过activity可以管理弹窗的生命周期。

三通过DialogFragment实现

DialogFragment在android 3.0时被引入。是一种特殊的Fragment，典型的用于：展示警告框，输入框，确认框等等。在DialogFragment产生之前，创建对话框一般采用AlertDialog和Dialog。注：官方不推荐直接使用Dialog创建对话框。使用DialogFragment来管理对话框，当旋转屏幕和按下后退键时可以更好的管理其声明周期，它和Fragment有着基本一致的声明周期。因此3.0之后最好使用DialogFragment，而不是使用以上两种方式。使用DialogFragment至少需要实现onCreateView或者onCreateDIalog方法。onCreateView即使用定义的xml布局文件展示Dialog。onCreateDialog即利用AlertDialog或者Dialog创建出Dialog。

public class MyDialogFragment extends DialogFragment { View mView; @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { mView=inflater.inflate(R.layout.dialog,container,false); return mView; } @Override public void onStart() { super.onStart(); Window window = getDialog().getWindow(); //设置dialog相应属性 WindowManager.LayoutParams params = window.getAttributes(); params.gravity = Gravity.BOTTOM; params.width = WindowManager.LayoutParams.MATCH_PARENT; window.setAttributes(params); //必须设定的属性，否则无法使dialog铺满屏幕，设置其他颜色会出现黑边 window.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT)); MainActivity.slideToUp(mView); }}public void onDialogFragment(View view) { new MyDialogFragment().show(getSupportFragmentManager(),"dialog"); }

这里写图片描述

四 bottomSheet

Bottom Sheet是在support library 23.2之后提供的一个新控件，也就是需要用6.0以上的SDK进行编译才可以使用此控件。添加依赖：

compile 'com.android.support:design:23.2.0'

在dialog.xml中通过NestedScrollView的layout_behavior已经实现了上滑拉出窗口。这里写图片描述

当然也可以通过点击弹出。

public void onButtonSheet(View view) { BottomSheetBehavior behavior=BottomSheetBehavior.from(findViewById(R.id.scroll)); if (behavior.getState()==BottomSheetBehavior.STATE_EXPANDED) { behavior.setState(BottomSheetBehavior.STATE_COLLAPSED); }else if (behavior.getState()==BottomSheetBehavior.STATE_COLLAPSED) { behavior.setState(BottomSheetBehavior.STATE_EXPANDED); } }

这里写图片描述

可以直接通过代码的方式实现：

public void onButtonSheet(View view) {// BottomSheetBehavior behavior=BottomSheetBehavior.from(findViewById(R.id.scroll));// if (behavior.getState()==BottomSheetBehavior.STATE_EXPANDED)// {// behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);// }else if (behavior.getState()==BottomSheetBehavior.STATE_COLLAPSED)// {// behavior.setState(BottomSheetBehavior.STATE_EXPANDED);// } BottomSheetDialog dialog=new BottomSheetDialog(this); dialog.setContentView(R.layout.dialog); dialog.show(); }

这里写图片描述