自定义dialog弹窗

Dialog效果图

1.新建一个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:background="@color/transparent"
    android:orientation="vertical"
    android:padding="8dp">

    <Button
        style="@style/btn_style"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_radius_top_white_8"
        android:text="拨打电话" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#696767" />

    <Button
        android:id="@+id/bt_number"
        style="@style/btn_style"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_radius_bottom_white_8"
        android:text="10010" />

    <Button
        android:id="@+id/bt_cancel"
        style="@style/btn_style"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="@drawable/bg_radius_white_8"
        android:text="取消" />
</LinearLayout>

Button按钮背景是白色的并且带有圆角，这个效果可以让UI设计师提供背景图片，也可以用shape绘制。
1.1 在drawable下创建bottom的shape文件：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--圆角大小-->
    <corners
        android:topLeftRadius="8dp"
        android:topRightRadius="8dp" />
    <!--填充色-->
    <solid android:color="@color/colorWhite" />
    <!--内边距-->
    <padding
        android:left="5dp"
        android:right="5dp" />
</shape>

1.2以下是自定义的style样式：

    <!--统一设置bottom共同的属性-->
    <style name="btn_style">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#148fff</item>
    </style>

    <!--自定义Dialog样式-->
    <style name="bottom_dialog" parent="android:Theme.Dialog">
        <item name="android:paddingTop">15dp</item>
        <item name="android:paddingBottom">15dp</item>
        <item name="android:windowBackground">@color/transparent</item>
        <item name="background">@color/transparent</item>
        <item name="windowNoTitle">true</item>

        <!--引入自定义动画-->
        <item name="android:windowAnimationStyle">@style/dialog_style</item>
    </style>

    <!--自定义Dialog样式 出入场样式-->
    <style name="dialog_style" parent="android:Animation.Dialog">
        <item name="android:windowEnterAnimation">@anim/dialog_enter</item>
        <item name="android:windowExitAnimation">@anim/dialog_exit</item>
    </style>

1.3 colors.xml：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>
    
    
    <color name="colorWhite">#FFFFFF</color>
    <!--透明色-->
    <color name="transparent">#00ffffff</color>
</resources>

2. 自定义Dialog的入场、出场动画

2.1 新建资源文件夹名为anim，并新建动画的xml文件：

dialog_enter.xml 弹窗进入时（从底部垂直进入，动画持续300毫秒）
dialog_exit.xml 弹窗退出时（从底部垂直退到屏幕外，动画持续300毫秒）

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

</translate>

3.新建BottomUpDialog类继承Dialog，在构造方法中引入下号的自定义Dialog样式：R.style.bottom_dialog：

class BottomUpDialog : Dialog {
    private val mBtncancle: Button by lazy {
        bt_cancel
    }

    //一个参数的构造方法调用两个参数的构造方法
    constructor(context: Context?) : this(context, 0)
    constructor(context: Context?, themeResId: Int) : super(
        context!!,
        R.style.bottom_dialog
    ) {//引入自定义样式
        //关联自定义dialog布局
        setContentView(R.layout.dialog_layout)
        //设置大小宽度
        window!!.setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)
        //设置位置：底部显示
        window!!.setGravity(Gravity.BOTTOM)

        mBtncancle.setOnClickListener { dismiss() }
    }
}

最后在MainActivity中调用：

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        bt_anim.setOnClickListener { mBottomUpDialog.show() }
    }

    //初始化弹窗
    private val mBottomUpDialog: BottomUpDialog by lazy {
        BottomUpDialog(this)
    }
}