首先容我用很奇怪的方法凸顯標題(¬_¬)ノ
最近很無聊看了一些關於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
而相關的說明我也寫註解了,可自行參考
1-2 AlertDialogLayout內容-dialog_item.xml
接下來畫AlertDialog的Layout
一樣創一個Layout檔
創建方法:
layout上右鍵->New->Layout Resource File
然後內容在此
1-2 主介面-activity_main.xml
沒什麼好說,就一個Button
畫介面的部分到這邊就完成囉~(•ө•)♡
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
那今天的文希望有幫助到你
希望日後還有幾會見面幫助你呦~
留言列表