Dialog效果圖
1.新建一個(gè)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按鈕背景是白色的并且?guī)в袌A角轨淌,這個(gè)效果可以讓UI設(shè)計(jì)師提供背景圖片迂烁,也可以用shape繪制。
1.1 在drawable下創(chuàng)建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" />
<!--內(nèi)邊距-->
<padding
android:left="5dp"
android:right="5dp" />
</shape>
1.2以下是自定義的style樣式:
<!--統(tǒng)一設(shè)置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>
<!--引入自定義動(dòng)畫-->
<item name="android:windowAnimationStyle">@style/dialog_style</item>
</style>
<!--自定義Dialog樣式 出入場(chǎng)樣式-->
<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的入場(chǎng)递鹉、出場(chǎng)動(dòng)畫
2.1 新建資源文件夾名為anim盟步,并新建動(dòng)畫的xml文件:
dialog_enter.xml
彈窗進(jìn)入時(shí)(從底部垂直進(jìn)入,動(dòng)畫持續(xù)300毫秒)
dialog_exit.xml
彈窗退出時(shí)(從底部垂直退到屏幕外躏结,動(dòng)畫持續(xù)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却盘,在構(gòu)造方法中引入下號(hào)的自定義Dialog樣式:R.style.bottom_dialog:
class BottomUpDialog : Dialog {
private val mBtncancle: Button by lazy {
bt_cancel
}
//一個(gè)參數(shù)的構(gòu)造方法調(diào)用兩個(gè)參數(shù)的構(gòu)造方法
constructor(context: Context?) : this(context, 0)
constructor(context: Context?, themeResId: Int) : super(
context!!,
R.style.bottom_dialog
) {//引入自定義樣式
//關(guān)聯(lián)自定義dialog布局
setContentView(R.layout.dialog_layout)
//設(shè)置大小寬度
window!!.setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)
//設(shè)置位置:底部顯示
window!!.setGravity(Gravity.BOTTOM)
mBtncancle.setOnClickListener { dismiss() }
}
}
最后在MainActivity中調(diào)用:
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)
}
}