Android 实现底部弹出对话框效果

本文主要是利用Dialog 实现 从屏幕底部弹出对话框的效果 并且有动画效果。

线上效果图：

首先先在style.xml中定义对话框的样式 如下

 

    <style name="dialog" parent="@android:style/Theme.Dialog">
        <item name="android:windowFrame">@null</item><!--边框-->
        <item name="android:windowIsFloating">true</item><!--是否浮现在activity之上-->
        <item name="android:windowNoTitle">true</item><!--无标题-->
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:backgroundDimEnabled">true</item>
        <item name="android:windowIsTranslucent">false</item>
        <item name="android:windowBackground">@color/transparent</item><!--背景透明-->
        <item name="android:background">@color/transparent</item>
        <item name="android:backgroundDimAmount">0.5</item>
        <item name="android:windowAnimationStyle">@style/ActionSheetDialogAnimation</item><!--动画-->
    </style>

 

 

动画样式如下

    <style name="ActionSheetDialogAnimation" parent="@android:style/Animation.Dialog">
        <item name="android:windowEnterAnimation">@anim/bottom_anim_dialog_in</item>
        <item name="android:windowExitAnimation">@anim/bottom_anim_dialog_out</item>
    </style>

 

bottom_anim_dialog_in.xml

 

 

 

 

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

 

 

bottom_anim_dialog_out.xml

 

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

最后在Dialog的构造方法中 使用此样式 

 

 

 super(context, R.style.BottomAnimDialogStyle);

 

 

这里实现的对话框样式是仿造iOS经典样式 布局文件如下 bottom_anim_dialog_layout.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:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/back_bg"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_item1"
            android:layout_width="match_parent"
            android:layout_height="@dimen/distance_size_50"
            android:gravity="center"
            android:text="换绑银行卡"
            android:textColor="@color/light_black"
            android:textSize="@dimen/font_size_16" />

        <View
            android:layout_width="match_parent"
            android:layout_height="@dimen/distance_size_split_line"
            android:background="@color/having_line" />

        <TextView
            android:id="@+id/tv_item2"
            android:layout_width="match_parent"
            android:layout_height="@dimen/distance_size_50"
            android:gravity="center"
            android:text="解绑银行卡"
            android:textColor="@color/light_red"
            android:textSize="@dimen/font_size_16" />

    </LinearLayout>

    <TextView
        android:id="@+id/tv_item3"
        android:layout_width="match_parent"
        android:layout_height="@dimen/distance_size_50"
        android:layout_marginTop="@dimen/distance_size_8"
        android:background="@drawable/back_bg"
        android:gravity="center"
        android:text="取消"
        android:textColor="@color/light_black"
        android:textSize="@dimen/font_size_16" />

</LinearLayout>

整个dialog的文件代码如下

 

 

package com.ppdai.installment.view.dialog;

import android.app.Dialog;
import android.content.Context;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.TextView;

import com.ppdai.installment.R;
import com.ppdai.installment.utils.DensityUtil;

public class BottomAnimDialog extends Dialog {


    private final Context mContext;

    private final String mItem1Name;
    private final String mItem2Name;
    private final String mItem3Name;


    private BottonAnimDialogListener mListener;
    private TextView mTvItem1;
    private TextView mTvItem2;
    private TextView mTvItem3;

    public BottomAnimDialog(Context context, String item1Name, String item2Name, String item3Name) {

        super(context, R.style.BottomAnimDialogStyle);
        this.mContext = context;

        this.mItem1Name = item1Name;
        this.mItem2Name = item2Name;
        this.mItem3Name = item3Name;

        initView();

    }


    private void initView() {

        LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(mContext.LAYOUT_INFLATER_SERVICE);
        View view = inflater.inflate(R.layout.bottom_anim_dialog_layout, null);

        Window window = this.getWindow();
        if (window != null) { //设置dialog的布局样式 让其位于底部 
            window.setGravity(Gravity.BOTTOM);
            WindowManager.LayoutParams lp = window.getAttributes();
            lp.y = DensityUtil.dip2px(mContext,10); //设置居于底部的距离
            window.setAttributes(lp);
        }

        mTvItem1 = (TextView) view.findViewById(R.id.tv_item1);
        mTvItem2 = (TextView) view.findViewById(R.id.tv_item2);
        mTvItem3 = (TextView) view.findViewById(R.id.tv_item3);

        mTvItem1.setOnClickListener(new clickListener());
        mTvItem2.setOnClickListener(new clickListener());
        mTvItem3.setOnClickListener(new clickListener());

        setContentView(view);

        setData();
    }


    private void setData() {
        mTvItem1.setText(mItem1Name);
        mTvItem2.setText(mItem2Name);
        mTvItem3.setText(mItem3Name);
    }

    public void setItem1TextColor(int colorId) {//设置item的字体颜色
        if (mTvItem1 != null) {
            mTvItem1.setTextColor(colorId);
        }
    }

    public void setItem2TextColor(int colorId) {
        if (mTvItem2 != null) {
            mTvItem2.setTextColor(colorId);
        }
    }

    public void setItem3TextColor(int colorId) {
        if (mTvItem3 != null) {
            mTvItem3.setTextColor(colorId);
        }
    }

    public void setClickListener(BottonAnimDialogListener listener) {
        this.mListener = listener;
    }

    public interface BottonAnimDialogListener {
        void onItem1Listener();

        void onItem2Listener();

        void onItem3Listener();
    }


    private class clickListener implements View.OnClickListener {

        @Override
        public void onClick(View v) {
            switch (v.getId()) {
                case R.id.tv_item1:
                    if (mListener != null) {
                        mListener.onItem1Listener();
                    }
                    break;
                case R.id.tv_item2:
                    if (mListener != null) {
                        mListener.onItem2Listener();
                    }
                    break;
                case R.id.tv_item3:
                    if (mListener != null) {
                        mListener.onItem3Listener();
                    }
                    break;
            }
        }
    }
}

最后直接使用：

 

 BottomAnimDialog dialog = new BottomAnimDialog(BankCardManagerActivity.this, "嘻嘻嘻嘻", "哈哈哈哈", "取消");
                dialog.setClickListener(new BottomAnimDialog.BottonAnimDialogListener() {
                    @Override
                    public void onItem1Listener() {
                       // TO_DO 
                        dialog.dismiss();
                    }

                    @Override
                    public void onItem2Listener() {
                         // TO_DO 
                        dialog.dismiss();
                    }

                    @Override
                    public void onItem3Listener() {
                        dialog.dismiss();
                    }
                });

 dialog.show();

 

就是这么简单 。

 

扫描下方二维码关注公众号，及时获取文章推送