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

 

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

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

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

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

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

"史上最強圓角AlertDialog教學"

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

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

.

.

.

大概是這樣吧XD

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

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

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

 

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

像這種感覺。

mcdonalds-app-ui-redesign-02

 

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

截圖 2020-04-03 下午3.22.58

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

截圖 2020-04-03 下午3.17.36

還有這樣的

左:768*1280

右:1080*1920

 

以及Github

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


 

1.畫介面

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

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

截圖 2020-04-03 下午4.08.37

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

round_layout.xml:這是元件的底圖

dialog_item.xml:這是AlertDialog的Layout

 

1-1 元件底圖-round_layout.xml

 

首先創建底圖

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

截圖 2020-04-03 下午4.21.46

創建方法:

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

截圖 2020-04-03 下午4.22.53

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

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

round_layout.xml

 

1-2 AlertDialogLayout內容-dialog_item.xml

接下來畫AlertDialog的Layout

一樣創一個Layout檔

截圖 2020-04-03 下午4.36.45

創建方法:

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

然後內容在此

dialog_item.xml

截圖 2020-04-03 下午4.43.18

 

1-2 主介面-activity_main.xml

沒什麼好說,就一個Button

activity_main.xml

截圖 2020-04-03 下午4.43.39

 

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

 

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

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

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

thank-33014588

arrow
arrow
    創作者介紹
    創作者 碼農日常 的頭像
    碼農日常

    碼農日常大小事

    碼農日常 發表在 痞客邦 留言(1) 人氣()