iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 4
2
Software Development

Kotlin for Android系列 第 4

Day 04. 第一個 App - Bucket List 與版面視覺設計

  • 分享至 

  • xImage
  •  

  今天一開始我們先來處理兩個錯誤及一個警告:

https://ithelp.ithome.com.tw/upload/images/20181018/20111944jbCLqM6HVr.png

  首先處理 Image without ‘contentDescription’ 問題。設定內容描述 (contentDescription) 是為了能夠支援無障礙友善功能,在某些狀況下會以念出指定的替代文字取代顯示圖片,因此可順便重新命名 ID,再進行內容描述文字的資源建立。

https://ithelp.ithome.com.tw/upload/images/20181018/20111944MWl4OwHJK9.png
https://ithelp.ithome.com.tw/upload/images/20181018/201119445JsmWnGBQ0.png


  第二個問題: Missing Constraints in ConstraintLayout,主要是我們加入了 ImageView 的物件,需要進行版面設計排列,點選 ImageView 如左圖所示將上、左、右加入位置約束,此時錯誤訊息就會消失,接著可將上左右的邊緣分別設定為 80、0、0,並將水平位置設定為 50% 如右圖所示。

https://ithelp.ithome.com.tw/upload/images/20181018/2011194489Q7QEKb1U.png

  這裡一同重新設定原有的 TextView 上方約束,點擊如左圖所示位置的小圓點,緊接再點 + 圖式重新加回上方約束,並將邊界設定為 0,調整垂直位置到 0% 如右圖所示。

https://ithelp.ithome.com.tw/upload/images/20181018/2011194499VSWTTiBx.png


  剩下的問題 Using VectorDrawableCompat

https://ithelp.ithome.com.tw/upload/images/20181018/2011194469hjfdPJhk.png

  處理也很簡單,就是到專案總管 > Gradle Scripts > build.gradle (Module: app) > android.defaultConfig 加入一行啟用參數 vectorDrawables.useSupportLibrary = true,加好後記得在右上方點立即同步,等程式處理完後該錯誤訊息就會消失,相關操作的詳細位置可參考下圖。

https://ithelp.ithome.com.tw/upload/images/20181018/20111944eq9GOsLuUM.png

  現在我們可以來執行一下應用程式模擬(Shift + F10),看一下到目前為止的結果如何:

https://ithelp.ithome.com.tw/upload/images/20181018/20111944ufUTcNLkmx.png


  繼續回到版面設計,現在我們還缺少幾樣東西:提供願望輸入框、新增的按鈕、自動挑選願望的按鈕,在調整版面時,除了之前介紹在屬性視窗設定的方式之外,也可以直接在預覽視窗中的右邊藍圖點著物件的四邊原點,往邊界拖曳後放開,就能完成與屬性視窗相同的設定。

https://ithelp.ithome.com.tw/upload/images/20181018/20111944bnWlHgPTpE.png
https://ithelp.ithome.com.tw/upload/images/20181018/20111944wevBgEompr.png

  另一種方式是直接在物件上按滑鼠右鍵,選擇 Center 進行水平或垂直排列。

https://ithelp.ithome.com.tw/upload/images/20181018/20111944Zv1DCB6jCH.png


  在輸入框的部分需要於 EditText > hint 指定提示,會物件上顯示字樣讓使用者知道該輸入什麼資料,你可能會發現設定好了 hint 時卻看不出效果,因為輸入框有預設文字,需在下方 TextView > text 將預設文字 “Name” 清除,隨即能看到 hint 以較淡的顏色出現於畫面上。

https://ithelp.ithome.com.tw/upload/images/20181018/20111944iwSJzDwQnb.png

  到目前為止的成果如下圖所示:

https://ithelp.ithome.com.tw/upload/images/20181018/20111944f3Uweg9d3w.png


  作者在這邊有遇到一個問題,在進行版面調整的時候,下圖的這個控制器突然消失不見,後來找不到可以復原的方式,或是在新增/刪除 res 內部檔案時 Studio 沒有自動更新,這兩個問題直接關閉 Android Studio 再啟動一次就正常,這個部分就留下記錄參考。今天的課程就到這邊,下一步將開始進入 Kotlin 程式設計,明天見!

https://ithelp.ithome.com.tw/upload/images/20181018/20111944WTQxGVo54g.png


上一篇
Day 03. 第一個 App - Bucket List 與圖檔資源概念
下一篇
Day 05. 第一個 App - Bucket List 與 Kotlin 語言
系列文
Kotlin for Android30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言