碼農日常大小事

首先容我用很奇怪的方法凸顯標題(¬_¬)ﾉ

最近很無聊看了一些關於SEO資訊搜索排行等等文章

然後其實他們強調了一個重點..就是標題要夠聳動

說真的我實在不太了解標題聳動是怎樣啦XD

而且寫技術文章是能聳動到哪裡去啦(´･д･｀)(´･д･｀)(´･д･｀)

如果按照那些文章說的話，我以後標題大概要下

"史上最強圓角AlertDialog教學"

"想學會使用圓角AlertDialog?看這篇就夠了!"

"5個步驟讓你完成屬於你的漂亮圓角AlertDialog!"

.

.

.

大概是這樣吧XD

可是回想一下那些常見的網路文章...

發現會出現在你的版面的都是那些....QQ

好啦，廢話太多了來切入主題。

今天要來講的是做出像是Apple的圓角Button原生套件的Dialog等等

像這種感覺。

okay，那我就直接PO今天的效果

像這樣的東西(上圖螢幕解析為1080*2160)

還有這樣的

左：768*1280

右：1080*1920

以及Github

->https://github.com/thumbb13555/RadiusDialogExample

1.畫介面

這次的內容的重點是在畫面

首先我先把加了哪些東西PO出來

簡單介紹一下兩個框框的功能

round_layout.xml：這是元件的底圖

dialog_item.xml：這是AlertDialog的Layout

1-1 元件底圖-round_layout.xml

首先創建底圖

這個底圖是一個圓弧角方形，而在編輯器內看起來是這樣

創建方法:

drawable上右鍵->New->Drawable Resource File

然後如果沒特別想要怎樣，直接複製我的程式就OK

而相關的說明我也寫註解了，可自行參考

round_layout.xml

1-2 AlertDialogLayout內容-dialog_item.xml

接下來畫AlertDialog的Layout

一樣創一個Layout檔

創建方法:

layout上右鍵->New->Layout Resource File

然後內容在此

dialog_item.xml

1-2 主介面-activity_main.xml

沒什麼好說，就一個Button

activity_main.xml

畫介面的部分到這邊就完成囉～(•ө•)♡

2.實作AlertDialog

把焦點轉至MainActivity.java內

不廢話直接上Code

public class MainActivity extends AppCompatActivity {

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

        Button btOpen = findViewById(R.id.button);

        btOpen.setOnClickListener((v)->{
            AlertDialog.Builder mBuilder = new AlertDialog.Builder(this);//創建AlertDialog.Builder
            View view = getLayoutInflater().inflate(R.layout.dialog_item,null);//嵌入View
            Button btDialog = view.findViewById(R.id.buttonDialog);//連結關閉視窗的Button
            mBuilder.setView(view);//設置View
            AlertDialog dialog = mBuilder.create();
            btDialog.setOnClickListener(v1 -> {dialog.dismiss();});
            dialog.show();

            DisplayMetrics dm = new DisplayMetrics();//取得螢幕解析度
            getWindowManager().getDefaultDisplay().getMetrics(dm);//取得螢幕寬度值
            dialog.getWindow().setLayout(dm.widthPixels-230, ViewGroup.LayoutParams.WRAP_CONTENT);//設置螢幕寬度值
            dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));//將原生AlertDialog的背景設為透明


        });
    }
}

基本上就是設置AlertDialog的基本步驟，再加上藍字的部分

關於如何設置AlertDialog的詳細可參考此

碼農日常-『Android studio』AlertDialog對話視窗

結語

本文中我自認為真的算很簡單地完成了圓角的AlertDialog

其實會了之後也發現不會很難～

但是有鑒於UI設計越來越強

客戶也會對畫面要求越來越高

甚至到最後我手上是有模組可以直接複製貼上

而今天的文只不過今天的文我把我平常用的模組放出來了而已(･ω･)b

那今天的文希望有幫助到你

希望日後還有幾會見面幫助你呦～