---

theme: condensed-night-purple

本文正在參加「金石計劃 . 瓜分6萬現金大獎」

前言

隨著工作的不斷深入，作者最近接觸到了給APP換UI的需求，看著花裡胡哨的新UI，想起了我之前無意在某設計網站上碰到的新詞——高階設計感，緊接著，作者又在開發中發現了Google提出的Material Design，這個在14年就提出的介面設計語言，與高階設計感這個詞正所謂相得益彰。

正篇

安卓中的Material Design

作為Google旗下的一員——安卓，則是將其一些最具代表性一些控制元件和效果封裝在Material庫,這就讓我們開發者可以在不瞭解Material Design的情況下，也很容易將自己的應用Material化，當然現在在AndroidX庫中的一些元件也可以實現一些Material Design的效果。

使用原因

前言說到，作者是工作中更換UI需求的時候真正接觸到Material Design的，其實就是因為我需要一個使用其中一個控制元件，這個就是本篇要說的內容——BottomSheetDialogFragment。

BottomSheetDialogFragment元件

介紹

其中這個元件在Material Design中分屬Bottom Sheets：

其實它還有個兄弟叫BottomSheetDialog，不過我在專案中沒有具體使用，這兄弟倆在官網中的所示繼承關係如下：

而MD風格的底部彈窗，比自定義dialog或popupwindow使用更簡單，功能也更為豐富，而我正好需要它的底部向上滑動的這個效果，而通過查詢大量資料，發現BottomSheetDialogFragment的底部出現到中間停頓，然後再向上可以拖動的效果完美符合我的需求，而且使用起來更簡單，故採用該方法。

使用方法

首先使用該底部彈窗樣式的第一步就是需要匯入Material庫：

Gradle implementation 'com.google.android.material:material:1.7.0' 新增好後Sync Gradle成功後，我們就可以在專案中新增BottomSheetDialogFragment了，很簡單，和正常寫繼承DialogFragment的Dialog一樣，因為在上述中我們看到了其繼承關係，BottomSheetDialogFragment是繼承自AppCompatDialogFragment，而
AppCompatDialogFragment又是繼承自DialogFragment。如此一來，由於BottomSheetDialogFragment是DialogFragment的子類，故它具有DialogFragment的所有特性。 下面先說一下Kotlin的寫法，Java寫法下一篇再介紹：

```Kotlin class MyBottomSheetDialog : BottomSheetDialogFragment() {

override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
    val dialog = super.onCreateDialog(savedInstanceState)
    val view = LayoutInflater.from(context).inflate(R.layout.layout_item_bottom_sheet, null)
    dialog.setContentView(view)
    initView(view)
    return dialog
}

private fun initView(rootView: View) {
    //do something
    rootView.tv_cancel.setOnClickListener { dismiss() }

}

}

佈局可以自己隨便寫，呼叫方法：Kotlin MyBottomSheetDialog().show(supportFragmentManager, "MyBottomSheetDialog") ``` 最簡單的效果展示：

總結

最簡單的使用方法已經介紹好了，但仍然沒有說明好如何可以彈出後再接著可以拖拽，所以，接下來的一篇將會去解釋如何進一步去使用以適配自己的需求，以及相關Java的寫法，其實使用Kotlin後發現語言的確更精煉了，希望還是可以儘快掌握該語言。