iT邦幫忙

2021 iThome 鐵人賽

DAY 17
1

既然我們知道該怎麼在虛擬機跟手機上顯示撰寫程式的結果了,那直接使用 TextView 動手寫一個簡單生日賀卡吧。


一開始跟我們第一個禮拜介紹的一樣,先想好 App 裡面的介面會是甚麼樣子,有了初步的想法之後,就可以直接進入到 Android Studio 裡面實作啦。

進入 Android Studio 後要先打開 activity_main_xml 的檔案,路徑可以從左邊的檔案總管那邊找到(app > res > layout > activity_main.xml),快速連點兩下就會跑出下面這張圖的畫面。

https://ithelp.ithome.com.tw/upload/images/20211002/20140638IwL6Lxq1Li.png

1:類似檔案總管裡面放著 project 的各式文件。

2:Palette 視窗,你可以直接從這個視窗添加你需要的各種 View。

3:Component Tree視窗:他會列出畫面上所有的 View 。

4:你可以想像成 App 在手機上運行的樣子。

5:Blueprint:在執行某種特定操作的時候,blueprint 非常有用。

6:Attributes:這邊顯示 View 的屬性,你也可以直接在這裡更改。

甚麼是 View ?簡單來說你在手機應用程式裡看到的各種元素,都算是 View ,View 也可以互動,像是按鈕或是可輸入的文字方塊。

一般來說 View 不會單獨浮在螢幕上,通常各個 View 彼此之間互相關聯。如果要整理很多 View 的話都會把它們都放在一個容器( container )也叫做 ViewGroup,它負責

排列容器內的各個 View 。另外 ConstraintLayout 就是一種 ViewGroup ,幫你靈活的排列 Views 。

接下來進入製作卡片環節。


插入你的 Textview

直接進入專案,再狠狠滴把中間的那個 hello world 用 delete 把他甩到一邊去,你就會獲得全白的畫面,再從 Palette 視窗先拉一個 TextView 進畫面裡面:

https://ithelp.ithome.com.tw/upload/images/20211002/20140638ugaJdJPIkH.png

哭阿怎麼有錯誤?

https://ithelp.ithome.com.tw/upload/images/20211002/201406381fqFVmYz9b.png

原來是他這需要一些限制 constraints ,這時候從右邊的 Attributes 視窗:

https://ithelp.ithome.com.tw/upload/images/20211002/20140638SeafeB7eUI.png

點擊 "+" 給他一點限制,我給他上面的距離是32,左邊也是32這樣程式就會知道該怎麼去放這個 TextView 。

在上面的 Declared Attributes 裡可以修改 View 文字的內容:

https://ithelp.ithome.com.tw/upload/images/20211002/201406384BadXTuVXP.png

右下角我們也照著同樣方法放我們的署名,總是要讓他知道是哪個小淘氣這麼貼心:

https://ithelp.ithome.com.tw/upload/images/20211002/20140638byZj0P8xhS.png

貼心是貼心但字的樣式好像不是很滿意,這時候還是需要 attributes 去修改,在 Common Attribute 裡面可修改:

(這邊貼心小提示:記得要點選到你要修改屬性的 View 右邊的 attribute 視窗才是屬於那個 View 的喔)

https://ithelp.ithome.com.tw/upload/images/20211002/201406381mPtVJr3DE.png

這邊就可以調整字體樣式,但是中文的字體就沒有英文那麼多種類了。

文字的地方就先這樣,接下來加一點圖片讓卡片更像卡片吧。


插入你的圖片

這時候準備一張好看的圖片,這會成為整張卡片的重點,沒有之一,因為整張卡片只有他。

下載好之後點選上方工具列 View > Tool window > Resouce manager ,再 Resource Manager 下面的 "+" ,再點選 Import Drawables。

https://ithelp.ithome.com.tw/upload/images/20211002/20140638caiDV0ZYRu.png

找到你的圖片 Import 進來,這時直接點選最左側的 Project 就可以回到之前的頁面啦。

接下來就從 Palette 把 ImageView 拉進手機畫面裡,別忘了替它加上 constrains。

https://ithelp.ithome.com.tw/upload/images/20211002/201406382bMCm0BozP.png

圖片是上來的,但是上下有空白也是挺奇怪的,可以從右邊的 scaleType 選取 center crop ,畫面應該會就被圖片塞滿了。

https://ithelp.ithome.com.tw/upload/images/20211002/201406383DBCLZZC7c.png

從 Component Tree 把它從最下面直接拖曳到最上面,也就是拖到最底層的意思。

這樣看起來就是有模有樣,收到的人看到這個沒有哭泣就不是人,你也在朋友圈樹立了一個專業 Android 工程師的形象,但可惜,你很喜歡的人也會用同樣方式製作生日賀卡,但是她發現...

欸!?我 Component Tree 那邊怎麼好像有點錯誤?

她急了,你笑了。

你笑不是因為嘲笑,而是你明天就知道這個問題怎麼解決,想到機會即將來臨忍不住笑了出來。

今天就先這樣,

下一篇見寫寫打家打家擺掰。


上一篇
DAY16 Run application in real life
下一篇
DAY18 Conponent Tree 的黃色警告三角型?!
系列文
糟了!是世界奇觀!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
juck30808
iT邦研究生 1 級 ‧ 2021-10-03 20:01:24

打家打家擺掰

我要留言

立即登入留言