碼農日常大小事

今天的文章要來聊一下關於BottomSheetDialog這個東西(・∀・)

直接看英文的話沒概念的人還是不知道"わしれ供さ小"←(哇洗咧工撒小)

好吧以下字詞解釋看看能否理解

 

底部彈出式對話視窗

底部彈出式Dialog

仿IOS底部彈窗

Action Sheets←這是蘋果的命名

 

所以有理解嗎XD

 

好啦我繼續解釋，總之就是在Android上完成仿IOS系統的Action Sheets元件

也就是在IOS上的這個↓

資料來源：https://developer.apple.com/design/human-interface-guidelines/ios/views/action-sheets/

 

作為比對，PO一下完成圖

除了中間的黑線忘記加入之外...應該還行吧XDDDD

 

那就PO一下效果圖吧(・ωｰ)～☆

 

ＧitHub:

https://github.com/thumbb13555/BottomSheetExample/tree/master

---

 

1.載入依賴包

這個BottomSheet本身並非Android的內建元件，他是Google所發行的素材包之中的一個元件

因此第一步就是載入素材的依賴包(´･з･)

現在是Androidx的時代，因此要載入的也是Androidx的素材包

Maven網站->https://mvnrepository.com/artifact/com.google.android.material/material

複製以下這段

implementation 'com.google.android.material:material:1.2.0-alpha05'

打開build.gradle (Module: app)

將複製的文字加入至此

在java內部打上關鍵字就會出現囉～～(｀･ω･´)+

 

2.準備顯示材料

其實Bottom Sheet的操作非常接近於一般的AlertDialog

需要準備

1. 圓角的背景

2.顯示Dialog內容的介面

那首先先照著我圖中的內容去新增圓角背景

而圓角Layout的內容在這，直接複製拿去用就好

round_layout.xml

關於新增方法:

1.在drawable資料夾上點選右鍵，新增一個drawable檔案

 

2.新增，直接照預設走就好

 

3.把上面的內容全部丟進去就可以了

 

接著是新增Dialog的介面

新增介面的方法懶得講(ﾟдﾟ；)應該來到這邊的朋友們都會吧...吧...吧...吧...吧...

 

好啦所以我就不講囉(　´_ゝ`)

直接複製以下這些到你的內容吧～

bottom_sheet.xml

3.撰寫開啟動作

首先我有在activity_main.xml中新增過一個按鈕，太基本了所以我就不PO出來

來到ＭainActivity.java

撰寫以下內容

ＭainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(this);//初始化BottomSheet
        View view = LayoutInflater.from(this).inflate(R.layout.bottom_sheet,null);//連結的介面
        Button btCancel = view.findViewById(R.id.button_cancel);
        Button bt01 = view.findViewById(R.id.button_01);
        Button bt02 = view.findViewById(R.id.button_02);
        bottomSheetDialog.setContentView(view);//將介面載入至BottomSheet內
        ViewGroup parent = (ViewGroup) view.getParent();//取得BottomSheet介面設定
        parent.setBackgroundResource(android.R.color.transparent);//將背景設為透明，否則預設白底

        bt01.setOnClickListener((v)->{
            Toast.makeText(this, "01", Toast.LENGTH_SHORT).show();
            bottomSheetDialog.dismiss();
        });
        bt02.setOnClickListener((v)->{
            Toast.makeText(this, "02", Toast.LENGTH_SHORT).show();
        });
        btCancel.setOnClickListener((v)->{
            bottomSheetDialog.dismiss();
        });

        findViewById(R.id.button).setOnClickListener((v)->{
            bottomSheetDialog.show();//顯示BottomSheet
        });

    }
}

 

---

 

結語

意外地簡單！是ㄅ (`Д´)ゞ

沒錯，我當時也這樣想

當時製作這個東西的原因是因為當時我們公司的管理層曾經有個要求

 

“請問一下～請問你能把介面畫得跟IOS一樣嗎？這樣比較好教客人使用”

 

因為當時我剛進公司沒有多久，我的項目是重製之前的人留下的項目

所以雖然覺得幹...還是接下來了

於是就有了這篇XDDDD

 

啊然後就爽到IOS,誰叫他們的原生套件那麼漂亮(╯=▃=)╯︵┻━┻

好啦，一切都過去了(拍拍)

 

那麼謝謝大家看完，希望你有學到想要的東西～