android开发游记：弹出窗和底部弹出窗的实现和动画效果

程序员文章站 2022-04-09 22:57:10

...

安卓自带的弹出窗简直是丑到不能直视，许多应用都是使用自己自定义的弹出窗，这里我总结下弹出窗的实现方法和弹出动画：比如中间渐隐式弹出窗和底部弹出式的弹出窗。

先上效果图：

之前看过一篇文章，使用Activity来实现弹出窗的效果，感觉这样做实在太过了，其实只要自己自定义Dialog类就可以了，实现思路也相对简单，也方便进行拓展作出各种动画和效果。

下面说下实现思路：

首先，我需要一个弹出窗的界面效果，自己新建一个布局，做出自己想要的样子，如我的：

android开发游记：弹出窗和底部弹出窗的实现和动画效果

自己按照自己思路布局就可以了
贴上格式和代码：

android开发游记：弹出窗和底部弹出窗的实现和动画效果

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/shape_rect_btn_white"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginTop="20dp"
        android:gravity="center"
        android:text="这一秒不放弃，下一秒有奇迹！"
        android:textColor="#000000"
        android:layout_weight="1"
        android:textSize="13dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="15dp"
        android:layout_gravity="bottom"
        android:gravity="center"
        android:layout_weight="1"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/negativeButton"
            android:layout_width="wrap_content"
            android:layout_height="38dp"
            android:layout_marginRight="20dp"
            android:background="@drawable/shape_rect_btn_off"
            android:gravity="center"
            android:paddingLeft="17dp"
            android:paddingRight="17dp"
            android:text="去意已决"
            android:textColor="#555555"
            android:textSize="14dp" />

        <TextView
            android:id="@+id/positiveButton"
            android:layout_width="wrap_content"
            android:layout_height="38dp"
            android:background="@drawable/shape_rect_btn_orage"
            android:gravity="center"
            android:paddingLeft="17dp"
            android:paddingRight="17dp"
            android:text="我再想想"
            android:textColor="#FFFFFF"
            android:textSize="14dp" />
    </LinearLayout>

</LinearLayout>

布局中用了些图片，自己本地没有就随便换个颜色代替吧

然后在style.xml文件中，新增一个弹出窗风格，继承自Theme.Dialog：

    <style name="MyDialog" parent="@android:Theme.Dialog">
        <item name="android:windowFrame">@null</item>
        <item name="android:windowBackground">@drawable/none</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

我们重写了其中一些风格，每一行的意思是：没有边框；没有背景色；没有标题；窗口浮动；没有阴影
我们取消了多少自带的风格，来尽可能实现自定义。这个MyDialog的风格将作为我们自定义风格的父类，我们需要一个消息弹出窗的风格，则再新建一个MsgDialog来继承他：

    <style name="MsgDialog" parent="@style/MyDialog">
    </style>

这样我们就有MsgDialog的风格了
接着我们新建一个java类，继承Dialog为父类，并在构造方法里设置上面定义的MsgDialog为该弹出窗的风格属性：

public class MsgDialog extends Dialog {

    public MsgDialog(Context context){
        super(context,R.style.MsgDialog);
    }
}

我们接着需要在构造方法里面加入代码把之前的布局设置到这个Dialog上就好了，创建一个初始化方法，在构造方法里调用它：

public class MsgDialog extends Dialog {

    public MsgDialog(Context context){
        super(context,R.style.MsgDialog);
        setMsgDialog();
    }

    private void setMsgDialog() {
        View mView = LayoutInflater.from(getContext()).inflate(R.layout.dialog_msg, null);
        TextView title = (TextView) mView.findViewById(R.id.title);
        TextView positiveButton = (TextView) mView.findViewById(R.id.positiveButton);
        TextView negativeButton = (TextView) mView.findViewById(R.id.negativeButton);
        if(positiveButton!=null) positiveButton.setOnClickListener(listener);
        if(negativeButton!=null) negativeButton.setOnClickListener(listener);
        super.setContentView(mView);
    }
}

setMsgDialog里不光设置了视图，同时还设置里监听器，我们这里给了一个默认的实现：点击之后对话框消失。

    private View.OnClickListener listener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            MsgDialog.this.dismiss();
        }
    };

为了符合自定义点击事件，我们需要给出设置监听的公共方法：

    /**
     * 确定键监听器
     * @param listener
     */ 
    public void setOnPositiveListener(View.OnClickListener listener){ 
        positiveButton.setOnClickListener(listener); 
    } 
    /**
     * 取消键监听器
     * @param listener
     */ 
    public void setOnNegativeListener(View.OnClickListener listener){ 
        negativeButton.setOnClickListener(listener); 
    }

这里，就可以了，下面在Activity中调用它：

new MsgDialog(this).show();

运行出来，你会发现实际效果和我们布局的效果差太多，宽度和高度都更布局中设置的不一样，为什么呢？
原来android中对dialog的宽高有严格的控制，为了不让其超出屏幕，所有我们在布局中设置的并不会起效。真正的宽高需要在调用dialog.show()之后调用Window.setAttributes(LayoutParams a)来设置，既然这样，我们就重新我们的dialog的show()方法，使它自适应屏幕的宽高：

    @Override
    public void show() {
        super.show();
        Window dialogWindow = this.getWindow();  
        WindowManager.LayoutParams lp = dialogWindow.getAttributes(); 
        /////////获取屏幕宽度
        DisplayMetrics dm = new DisplayMetrics();
        WindowManager wm = (WindowManager)getContext().getSystemService(Context.WINDOW_SERVICE);;
        wm.getDefaultDisplay().getMetrics(dm);
        int screenWidth = dm.widthPixels;
        /////////设置高宽
        lp.width = (int) (screenWidth * 0.75); // 宽度  
        lp.height = (int) (lp.width*0.65);     // 高度  
        dialogWindow.setAttributes(lp);  
    }

解释下上面的方法：
先获取当前设备屏幕的宽度screenWidth
然后再设置窗口宽度为屏幕宽度的75%：lp.width = (int) (screenWidth * 0.75);
接着再设置窗口高度为窗口宽度的65%：lp.height = (int) (lp.width * 0.65);
这样就能构建一个宽高比为 1：0.65 的弹出窗，这个值不是绝对的，可以根据自己需要进行设置

这样弹出窗就完成了，默认的弹出动画是放大并带渐隐效果，同时背景变黑。我们可以自己配置这个动画效果来实现底部弹出窗的风格，这样我们就不能用这个居中的布局了，我们新建一个布局：

android开发游记：弹出窗和底部弹出窗的实现和动画效果

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:background="@color/white"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/text_pop_identy_camera"
        style="@style/text_big_blank"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/hot_lay_item_dark"
        android:gravity="center"
        android:padding="10dp"
        android:text="拍照" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/line" />

    <TextView
        android:id="@+id/text_pop_identy_photo"
        style="@style/text_big_orage"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/hot_lay_item_dark"
        android:gravity="center"
        android:padding="10dp"
        android:text="选择现有的" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/line" />

    <TextView
        android:id="@+id/text_pop_identy_cancel"
        style="@style/text_big_blank"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/hot_lay_item_dark"
        android:gravity="center"
        android:padding="10dp"
        android:text="取消" />

</LinearLayout>

替换掉原来的布局（布局中使用了一些图片和色彩资源本地没有自行替换）

接着配置弹出和收回动画：
在anim文件夹下新建2个xml文件：push_bottom_in.xml、push_bottom_out.xml，内容如下：

push_bottom_in.xml

<?xml version="1.0" encoding="utf-8"?>  
<!-- 上下滑入式 -->  
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator" >  
    <translate  
        android:duration="200"  
        android:fromYDelta="100%p"  
        android:toYDelta="0%p" />        
</set>

push_bottom_out.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 上下滑出式 -->
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator" >
    <translate
        android:duration="200"
        android:fromYDelta="0%p"
        android:toYDelta="100%p" />
</set>

接着在style.xml里配置入场\出场动画，继承自@android:style/Animation：

    <style name="AnimBottom" parent="@android:style/Animation">
        <item name="android:windowEnterAnimation">@anim/push_bottom_in</item>
        <item name="android:windowExitAnimation">@anim/push_bottom_out</item>
    </style>

再新建一个底部弹出窗口的风格PopupDialog，继承自我们之前的弹出窗父风格MyDialog：

    <style name="PopupDialog" parent="@style/MyDialog">
        <item name="android:windowAnimationStyle">@style/AnimBottom</item>
    </style>

然后在我们继承的Dialog java类中构造函数中设置PopupDialog为该弹出窗的风格就可以了：

    public PopupDialogMedia(Context context){
        super(context,R.style.PopupDialog);
        this.context = context;
        setMsgDialog();
    }

底部弹出窗我们就不用重新show()方法了，直接在setMsgDialog()方法中设置其宽度填满、高度自适应就可以了：

    private void setMsgDialog() {
        View mView = LayoutInflater.from(getContext()).inflate(R.layout.dialog_identy_photo, null);
        text_cancel = (TextView) mView.findViewById(R.id.text_pop_identy_cancel);
        text_photo = (TextView) mView.findViewById(R.id.text_pop_identy_photo);
        text_camera = (TextView) mView.findViewById(R.id.text_pop_identy_camera);
        text_cancel.setOnClickListener(listener);
        text_photo.setOnClickListener(listener);
        text_camera.setOnClickListener(listener);


        this.setCanceledOnTouchOutside(true);                 //点击外部关闭窗口

        Window win = this.getWindow();
        win.setGravity(Gravity.BOTTOM);                       //从下方弹出
        win.getDecorView().setPadding(0, 0, 0, 0);
        WindowManager.LayoutParams lp = win.getAttributes();
        lp.width = WindowManager.LayoutParams.MATCH_PARENT;   //宽度填满
        lp.height = WindowManager.LayoutParams.WRAP_CONTENT;  //高度自适应
        win.setAttributes(lp);

        super.setContentView(mView);
    }

这样底部弹出效果就完成了。

上一篇：仿IOS样式的弹出框

下一篇：好看电视推荐（2020最近比较火的网剧）