底部弹窗android

2019-06-19 14:01:38 jian11058 阅读数 1296

1、自定义


public class ButtomDialogView extends Dialog {
    private boolean iscancelable;//控制点击dialog外部是否dismiss
    private boolean isBackCancelable;//控制返回键是否dismiss
    private boolean isBackCanCelable;//
    private View view;
    private Context context;

    public ButtomDialogView(Context context, View view, boolean isCancelable,boolean isBackCancelable) {
        super(context, R.style.MyDialog);

        this.context = context;
        this.view = view;
        this.iscancelable = isCancelable;
        this.isBackCanCelable=isBackCancelable;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

		(这里可以R.layout.view)
        setContentView(view);//这行一定要写在前面
        setCancelable(iscancelable);//点击外部不可dismiss
        setCanceledOnTouchOutside(isBackCanCelable);
        Window window = this.getWindow();
        window.setGravity(Gravity.BOTTOM);
        WindowManager.LayoutParams params = window.getAttributes();
        params.width = WindowManager.LayoutParams.MATCH_PARENT;
        params.height = WindowManager.LayoutParams.WRAP_CONTENT;
        window.setAttributes(params);
    }

}

2、R.style.MyDialog,在value文件夹下找到style,将下述代码加进去


   <style name="MyDialog" parent="@android:style/Theme.NoTitleBar.Fullscreen">
        <!-- 是否有边框 -->
        <item name="android:windowFrame">@null</item>
        <!--是否在悬浮Activity之上  -->
        <item name="android:windowIsFloating">true</item>
        <!--标题  -->
        <item name="android:windowNoTitle">true</item>
        <!--阴影  -->
        <item name="android:windowIsTranslucent">false</item><!--半透明-->
        <!-- 点外边可以消失  -->
        <item name="android:windowCloseOnTouchOutside">false</item>
    </style>

3、调用



    public void showShareTable(){
        View contentview = LayoutInflater.from(this).inflate(R.layout.popwindow_detail_share, null);

        ButtomDialogView dialogView=new ButtomDialogView(this,contentview,true,true);
        dialogView.show();

    }


2019-04-02 18:36:50 shaowanyunBLOG 阅读数 5109

嗯,这里,我必须要先承认一点,关于本文的标题,我词穷了,虽然我用过那种效果很多次,但是怎么去表述那种UI,一直没有深究,所以,直接一个简洁明了的底部弹框了事。不过,那都无所谓,先来张照片看看效果:

嗯,就是这个了,我觉得这种效果倒很常见,包括日常用的支付宝,在付款是也有类似的界面,不过要比这个复杂的多,但是其实本质上实现都是大差不差的,如果能够把这最简单的实现,那么实现更复杂的界面也不过是“体力活”。

还是要事先声明,写这篇博客,也是从网上借鉴了很多的代码,所以,首先要感谢那些前辈的宝贵馈赠。好的,那么接下来就直接讲解了。

首先来讲,这个东西的本质还是对话框,只不过它和安卓自带的Dialog有很大的不同,所以,要实现,必然还是要自定义Dialog的,那么我就直接把自己的代码贴出来了

public abstract class Dialogchoosephoto extends Dialog implements View.OnClickListener{

    private Activity activity;
    private RelativeLayout btnPickBySelect, btnPickByTake;

    public Dialogchoosephoto(Activity activity) {
        super(activity, R.style.ActionSheetDialogStyle);
        this.activity = activity;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.takephoto_dialog);

        btnPickBySelect = (RelativeLayout) findViewById(R.id.btnPickBySelect);
        btnPickByTake = (RelativeLayout) findViewById(R.id.btnPickByTake);

        btnPickBySelect.setOnClickListener(this);
        btnPickByTake.setOnClickListener(this);

        setViewLocation();
        setCanceledOnTouchOutside(true);//外部点击取消
    }

    /**
     * 设置dialog位于屏幕底部
     */
    private void setViewLocation(){
        DisplayMetrics dm = new DisplayMetrics();
        activity.getWindowManager().getDefaultDisplay().getMetrics(dm);
        int height = dm.heightPixels;

        Window window = this.getWindow();
        WindowManager.LayoutParams lp = window.getAttributes();
        lp.x = 0;
        lp.y = height;
        lp.width = ViewGroup.LayoutParams.MATCH_PARENT;
        lp.height = ViewGroup.LayoutParams.WRAP_CONTENT;
        // 设置显示位置
        onWindowAttributesChanged(lp);
    }


    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.btnPickBySelect:
                btnPickBySelect();
                this.cancel();
                break;
            case R.id.btnPickByTake:
                btnPickByTake();
                this.cancel();
                break;
        }
    }

    public abstract void btnPickBySelect();
    public abstract void btnPickByTake();

}

对应的style文件:

<style name="ActionSheetDialogStyle" 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/ActionSheetDialogAnimation</item>
</style>
<!-- ActionSheet进出动画 -->
<style name="ActionSheetDialogAnimation" parent="@android:style/Animation.Dialog">
    <item name="android:windowEnterAnimation">@anim/actionsheet_dialog_in</item>
    <item name="android:windowExitAnimation">@anim/actionsheet_dialog_out</item>
</style>

动画:

actionsheet_dialog_in:

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

actionsheet_dialog_out:

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

布局文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/balance_background">

    <RelativeLayout
        android:id="@+id/btnPickByTake"
        android:layout_width="match_parent"
        android:clickable="true"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/text3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:text="拍照"
            android:textSize="20sp"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true"
            android:textColor="#1685ff"/>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#dadade"
            android:layout_marginTop="15dp"
            android:layout_below="@+id/text3"/>

    </RelativeLayout>


    <RelativeLayout
        android:id="@+id/btnPickBySelect"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:layout_below="@+id/btnPickByTake">

        <TextView
            android:id="@+id/text4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="相册"
            android:textSize="20sp"
            android:layout_marginTop="20dp"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true"
            android:textColor="#1685ff"/>

        <View
            android:id="@+id/view3"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#dadade"
            android:layout_marginTop="15dp"
            android:layout_below="@+id/text4"/>

    </RelativeLayout>


</RelativeLayout>

background.xml:

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

    <solid android:color="#ffffff"/>
    <corners android:radius="10dp"/>

</shape>

 

上面就是具体相关的几个文件了,代码的话,参考了在网上找的代码,所以,对于实现UI的效果这方面,没什么好讲的,但是这里还是要把关键的代码,就是怎样实现功能要说一下的。

我在代码中定义了两个抽象方法:

public abstract void btnPickByTake();

public abstract void btnPickBySelect();

分别是用户选择拍照和相册选择图片时需要实现的方法,用户需要重写这两个方法,然后在点击时会调用这两个方法,然后就会对用的去执行相关的逻辑,这个是实现的原理,那么具体的使用怎么使用呢?

new Dialogchoosephoto(RegisterActivity.this){
    @Override
    public void btnPickByTake(){
        ChooseImage = true;
        //拍照
        //点击拍照时做的事
    }
    @Override
    public void btnPickBySelect() {
        ChooseImage = true;
        //相册
        //点击相册时做的事
    }

}.show();

如图所示,这是我在Activity中的一个控件的点击事件中执行的调用我自定义Dialog的方法,可见,里面传入了Context,同时,重写了btnPickByTake()和btnPickByselect()这两个方法,然后当用户点击相应的“拍照”和“相册”时,就会触发Dialog的点击事件:

去执行相对应的方法,也就因此实现了相关的点击事件。

源码地址:https://github.com/ShaoWangYun/BottomDialogDemo

2017-09-19 20:40:08 fnhfire_7030 阅读数 2838

本文主要是介绍Android中实现底部弹窗的的正确姿势,如果你在实现底部弹窗时遇到了一些问题,那么请仔细阅读本文,相信文章会对你有所帮助,文章有点长,请耐心读完。

收获早知道

  阅读完本文后,你可以有以下收获

  • 利用PopupWindow实现底部弹窗
  • PopupWindow实现底部弹窗时的缺点
  • 解决利用PopupWindow实现底部弹窗,无法覆盖状态栏的问题
  • 利用dialog实现底部弹窗
  • 利用dialogFragment实现底部弹窗
  • 利用BottomSheetDialog实现底部弹窗
  • 通过阅读源码了解BottomSheetDialog实现底部弹窗的实质

实现底部弹窗的方式

  由于本人水平有限,只知道一下几种实现底部弹窗的方式

  1. 利用PopupWindow实现底部弹窗。
  2. 利用Dialog实现底部弹窗。
  3. 利用DialogFragment实现底部弹窗。
  4. 利用BottomSheetDialog实现底部弹窗。

下面,就利用以上四种方式分别实现Android中的底部弹窗。

利用PopWindow实现底部弹窗

  因为本文主要是介绍实现底部弹窗的方式,所以,不会对PopupWindow进行具体的讲解,大家可以到这里了解PopupWindow

  直接进入主题,按照套路,一步步实现利用PopupWindow实现底部弹窗。首先,写一个布局文件作为PopupWindow中的内容,布局文件如下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="#553b3a3a"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_alignParentBottom="true"
        android:orientation="vertical"
        android:id="@+id/content"
        android:background="@android:color/white"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="match_parent"
            android:textColor="#333"
            android:text="相机"
            android:padding="8dp"
            android:id="@+id/open_from_camera"
            android:gravity="center"
            android:textSize="15sp"
            android:layout_height="40dp" />
        <TextView
            android:layout_marginTop="1dp"
            android:id="@+id/open_album"
            android:layout_width="match_parent"
            android:textColor="#333"
            android:text="打开图库"
            android:padding="8dp"
            android:gravity="center"
            android:textSize="15sp"
            android:layout_height="40dp" />
        <TextView
            android:layout_marginTop="1dp"
            android:id="@+id/cancel"
            android:layout_width="match_parent"
            android:textColor="#333"
            android:text="取消"
            android:padding="8dp"
            android:gravity="center"
            android:textSize="15sp"
            android:layout_height="40dp" />
    </LinearLayout>
</RelativeLayout>

注:这里使用的是填充父窗口的方式,如果不这样做的话,就不能看出遮住后面的效果,看下图更容易理解,左图为填充父布局的方式,右图为
自适应的方式





注:因为采用填充父布局的方式,这里弹出的窗口都是PopupWindow,所以点击左图中的阴影弹窗不会消失,因为阴影也是PopupWindow呀! 解决方法就是,把左图中的阴影部分用一个TextView控件填充,然后为这个TextView设置点击事件,点击TextView时让PopupWindow消失就行了

下面看下利用PopupWindow实现底部弹窗的代码,重要的方法我会具体讲解

private void initPopupWindow() {
        //要在布局中显示的布局
        contentView = LayoutInflater.from(this).inflate(R.layout.popup_layout, null, false);
        //实例化PopupWindow并设置宽高
        popupWindow = new PopupWindow(contentView, LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
        popupWindow.setBackgroundDrawable(new BitmapDrawable());
        //点击外部消失,这里因为PopupWindow填充了整个窗口,所以这句代码就没用了
        popupWindow.setOutsideTouchable(true);
        //设置可以点击
        popupWindow.setTouchable(true);
        //进入退出的动画
        popupWindow.setAnimationStyle(R.style.MyPopWindowAnim);
    }

    private void showPopWindow() {
        View rootview = LayoutInflater.from(MainActivity.this).inflate(R.layout.activity_main, null);
        popupWindow.showAtLocation(rootview, Gravity.BOTTOM, 0, 0);  
    }

重点看一下这句代码

popupWindow.showAtLocation(rootview, Gravity.BOTTOM, 0, 0);  

这句代码是设置弹出窗口从哪里弹出,void showAtLocation (View parent,int gravity,int x,int y)方法有四个参数,第一个参数是父布局,第二个为从父布局的哪里弹出,x和y是相对于父布局弹出位置的偏移量。由于,我们要将mPopWindow放在整个屏幕的最低部,所以我们将R.layout.activity_main做为它的父容器,将其显示在BOTTOM的位置。

  再仔细看下上图,利用PopupWindow实现从底部的弹窗并不能覆盖到状态栏,下面就来解决这个问题。

解决PopupWindow弹出的窗口不能覆盖状态栏问题

  想要覆盖到状态栏还需要添以下代码

//弹出的窗口是否覆盖状态栏
    public void fitPopupWindowOverStatusBar(boolean needFullScreen) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            try {
                //利用反射重新设置mLayoutInScreen的值,当mLayoutInScreen为true时则PopupWindow覆盖全屏。
                Field mLayoutInScreen = PopupWindow.class.getDeclaredField("mLayoutInScreen");
                mLayoutInScreen.setAccessible(true);
                mLayoutInScreen.set(popupWindow, needFullScreen);
            } catch (NoSuchFieldException e) {
                e.printStackTrace();
            } catch (IllegalAccessException e) {
                e.printStackTrace();
            }
        }
    }

再改变一下显示PopupWindow的代码,如下

        //设置是否遮住状态栏
        fitPopupWindowOverStatusBar(true);
        View rootview = LayoutInflater.from(MainActivity.this).inflate(R.layout.activity_main, null);
        popupWindow.showAtLocation(rootview, Gravity.BOTTOM, 0, 0);

再看下效果


好了,到此完美解决问题,可以发现利用PopupWindow实现底部弹窗其实还是挺麻烦的。

利用Dialog实现底部弹窗

  先看下代码,然后在讲解

public class DialogFromBottom extends Dialog{
    private final static int mAnimationDuration = 200;
    // 持有 ContentView,为了做动画
    private View mContentView;
    private boolean mIsAnimating = false;

    private OnBottomSheetShowListener mOnBottomSheetShowListener;

    public DialogFromBottom(@NonNull Context context) {
        super(context, R.style.AppTheme_BottomSheet);
    }
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().getDecorView().setPadding(0, 0, 0, 0);
        // 在底部,宽度撑满
        WindowManager.LayoutParams params = getWindow().getAttributes();
        params.height = ViewGroup.LayoutParams.WRAP_CONTENT;
        params.gravity = Gravity.BOTTOM | Gravity.CENTER;//dialog从哪里弹出
        //弹出窗口的宽高
        int screenWidth = QMUIDisplayHelper.getScreenWidth(getContext());
        int screenHeight = QMUIDisplayHelper.getScreenHeight(getContext());
        params.width = screenWidth < screenHeight ? screenWidth : screenHeight;
        getWindow().setAttributes(params);
        setCanceledOnTouchOutside(true);
    }
    //设置弹出dialog中的layout
    @Override
    public void setContentView(int layoutResID) {
        mContentView = LayoutInflater.from(getContext()).inflate(layoutResID, null);
        super.setContentView(mContentView);
    }

    @Override
    public void setContentView(@NonNull View view) {
        mContentView = view;
        super.setContentView(view);
    }

    @Override
    public void setContentView(@NonNull View view, ViewGroup.LayoutParams params) {
        mContentView = view;
        super.setContentView(view, params);
    }
    /**
     * BottomSheet升起动画
     */
    private void animateUp() {
        if (mContentView == null) {
            return;
        }
        TranslateAnimation translate = new TranslateAnimation(
                Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f,
                Animation.RELATIVE_TO_SELF, 1f, Animation.RELATIVE_TO_SELF, 0f
        );
        AlphaAnimation alpha = new AlphaAnimation(0, 1);
        AnimationSet set = new AnimationSet(true);
        set.addAnimation(translate);
        set.addAnimation(alpha);
        set.setInterpolator(new DecelerateInterpolator());
        set.setDuration(mAnimationDuration);
        set.setFillAfter(true);
        mContentView.startAnimation(set);
    }

    /**
     * BottomSheet降下动画
     */
    private void animateDown() {
        if (mContentView == null) {
            return;
        }
        TranslateAnimation translate = new TranslateAnimation(
                Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f,
                Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 1f
        );
        AlphaAnimation alpha = new AlphaAnimation(1, 0);
        AnimationSet set = new AnimationSet(true);
        set.addAnimation(translate);
        set.addAnimation(alpha);
        set.setInterpolator(new DecelerateInterpolator());
        set.setDuration(mAnimationDuration);
        set.setFillAfter(true);
        set.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                mIsAnimating = true;
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                mIsAnimating = false;
                /**
                 * Bugfix: Attempting to destroy the window while drawing!
                 */
                mContentView.post(new Runnable() {
                    @Override
                    public void run() {
                        // java.lang.IllegalArgumentException: View=com.android.internal.policy.PhoneWindow$DecorView{22dbf5b V.E...... R......D 0,0-1080,1083} not attached to window manager
                        // 在dismiss的时候可能已经detach了,简单try-catch一下
                        try {
                            DialogFromBottom.super.dismiss();
                        } catch (Exception e) {
                        //这里处理异常
                        }
                    }
                });
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        mContentView.startAnimation(set);
    }

    @Override
    public void show() {
        super.show();
        animateUp();
        if (mOnBottomSheetShowListener != null) {
            mOnBottomSheetShowListener.onShow();
        }
    }

    @Override
    public void dismiss() {
        if (mIsAnimating) {
            return;
        }
        animateDown();
    }
    public interface OnBottomSheetShowListener {
        void onShow();
    }
}

额,代码有点长,其实很容易理解,这里主要说下onCreate方法中的内容,可以仔细看下注释。

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().getDecorView().setPadding(0, 0, 0, 0);//把父布局的padding都设为0,目的是可以dialog撑满全屏。
        // 在底部,宽度撑满
        WindowManager.LayoutParams params = getWindow().getAttributes();
        params.height = ViewGroup.LayoutParams.WRAP_CONTENT;
        params.gravity = Gravity.BOTTOM | Gravity.CENTER;//dialog从底部弹出
        //弹出窗口的宽高,DisplayHelper.getScreenWidth(getContext());和DisplayHelper.getScreenHeight(getContext());是拿到屏幕的宽高。
        int screenWidth = DisplayHelper.getScreenWidth(getContext());
        int screenHeight = DisplayHelper.getScreenHeight(getContext());
        params.width = screenWidth < screenHeight ? screenWidth : screenHeight;//适配手机横屏
        getWindow().setAttributes(params);//重新设置dialog的属性
        setCanceledOnTouchOutside(true);//设置触摸dialog以外,dialog是否消失
    }

利用Dialog实现底部弹窗就是继承系统Dialog然后重写了onCreate方法,设置dialog从底部弹出。因为是继承Dialog,所以有Dialog的特性,既触摸底部弹窗以外的部分,弹窗会自动消失,这里就不在演示,可以在文末获取源码,自己实验一下就知道了。

利用DialogFragment实现底部弹窗

  在实现弹窗之前,先了解一下DialogFragment

DialogFragment在android 3.0时被引入。是一种特殊的Fragment,用于在Activity的内容之上展示一个模态的对话框。

  使用DialogFragment至少需要实现onCreateView或者onCreateDIalog方法。onCreateView即使用定义的xml布局文件展示Dialog。onCreateDialog即利用AlertDialog或者Dialog创建出Dialog。下面通过实现onCreateView方法来实现底部弹窗。

 @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.dialog_layout, container, false);
        return view;
    }
    @Override
    public void onStart() {
        super.onStart();
        initParams();//初始化弹窗的参数
    }
    private void initParams() {
        Window window = getDialog().getWindow();
        if (window != null) {
            WindowManager.LayoutParams lp = window.getAttributes();
            //调节灰色背景透明度[0-1],默认0.5f
            lp.dimAmount = dimAmount;
            //是否在底部显示
            if (showBottom) {
                lp.gravity = Gravity.BOTTOM;
                if (animStyle == 0) {
                    animStyle = R.style.DefaultAnimation;
                }
            }
            //设置dialog宽度
            if (width == 0) {
                lp.width = DisplayHelper.getScreenWidth(getActivity()) - 2 * DisplayHelper.dp2px(getActivity(), margin);
            } else {
                lp.width = DisplayHelper.dp2px(getActivity(), width);
            }
            //设置dialog高度
            if (height == 0) {
                lp.height = WindowManager.LayoutParams.WRAP_CONTENT;
            } else {
                lp.height = DisplayHelper.dp2px(getActivity(), height);
            }
            //设置dialog进入、退出的动画
            window.setWindowAnimations(animStyle);
            window.setAttributes(lp);
        }
        setCancelable(outCancel);//设置点击外部是否消失
    }

因为DialogFragment也是Fragment,所以,DialogFragment有和Fragment一样的生命周期,在onStart方法中初始化弹窗的数据,在onCreateView中加载布局,同样,和Fragment使用方法也是一样的,下面看下在Activity中的使用

void showDialog() {
        FragmentTransaction ft = getFragmentManager().beginTransaction();
        // Create and show the dialog.
        DialogFragmentFromBottom newFragment = new DialogFragmentFromBottom();
        newFragment.show(ft, "dialog");
    }

利用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吧!毕竟使用很简单。

转载请注明出处:www.wizardev.com

2018-07-04 20:29:36 niu9799 阅读数 3023

Android之底部弹窗对话框

说到底部弹窗突然想到几年前做运动轨迹时轨迹记录可以从底部弹窗选择相对时间的轨迹,那时候用的popwindow。

老规矩先上效果图:


核心代码

		final Dialog dialog = new Dialog(this, R.style.BottomDialogStyle);
		View view = View.inflate(this, R.layout.view_bottomdialog, null);
		Button mCancel = (Button) view.findViewById(R.id.cancel_bt);
		dialog.setContentView(view);
		dialog.setCanceledOnTouchOutside(true);
		view.setMinimumHeight((int) (ScreenSizeUtils.getInstance(this).getScreenHeight() * 0.23f));
		Window dialogWindow = dialog.getWindow();
		WindowManager.LayoutParams lp = dialogWindow.getAttributes();
		lp.width = (int) (ScreenSizeUtils.getInstance(this).getScreenWidth());
		lp.height = WindowManager.LayoutParams.WRAP_CONTENT;
		lp.gravity = Gravity.BOTTOM;
		dialogWindow.setAttributes(lp);
		mCancel.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				dialog.dismiss();

			}
		});
		dialog.show();

Style

    <style name="BottomDialogStyle">
        <!-- 对话框背景 -->
        <item name="android:windowBackground">@android:color/transparent</item>
        <!-- 边框 -->
        <item name="android:windowFrame">@null</item>
        <!-- 没有标题 -->
        <item name="android:windowNoTitle">true</item>
        <!-- 是否浮现在Activity之上 -->
        <item name="android:windowIsFloating">true</item>
        <!-- 背景透明 -->
        <item name="android:windowIsTranslucent">false</item>
        <!-- 是否有覆盖 -->
        <item name="android:windowContentOverlay">@null</item>
        <!-- 进出的显示动画 -->
        <item name="android:windowAnimationStyle">@style/bottomDialogAnim</item>
        <!-- 背景变暗 -->
        <item name="android:backgroundDimEnabled">true</item>
    </style>
    <!-- 动画 -->
    <style name="bottomDialogAnim" parent="android:Animation">
        <item name="@android:windowEnterAnimation">@anim/dialog_enter_anim</item>
        <item name="@android:windowExitAnimation">@anim/dialog_exit_anim</item>
    </style>

布局文件

view_bottomdialog.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    android:orientation="vertical" >

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:text="拍照" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:background="#FFD700" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:text="相册" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:background="#FFD700" />

    <Button
        android:id="@+id/cancel_bt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:text="取消" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:background="#FFD700" />

</LinearLayout>

2019-04-14 23:02:29 weixin_37734988 阅读数 2757


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

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

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

   

<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));

    }

    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;
    }
}


相比于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。
四 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();
    }