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