iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
2
Software Development

Kotlin for Android系列 第 5

Day 05. 第一個 App - Bucket List 與 Kotlin 語言

  版面的部分已經設計完成,接著讓我們開始進行程式設計的部分,首先於專案總管打開 app > java > … > MainActivity.kt,如圖所示為主程式設計檔。

https://ithelp.ithome.com.tw/upload/images/20181019/201119446VEAutgkce.png


  首先就能發現 Kotlin 與 Java 差別,就是沒有程式行結尾分號,這點在設計過程會慢慢習慣的,接著讓我們試著訪問挑選願望的這個按鈕 pickBtn,如下圖所示 Studio 會自動辨識並提供快速完成程式碼的建議,只要按下 Enter,就會產生 import 將相關物件導入,接著就能直接訪問到該按鈕。

https://ithelp.ithome.com.tw/upload/images/20181019/201119442C608H0KCv.png


  若想測試一下是否真的有跟控制項連接到,可以輸入:

pickBtn.setOnClickListener { println("Clicked") }

  並啟動程式碼執行或偵測,按下按鈕後就能在 Console log 中看到成功印出了指定的文字,這邊值得注意的一點,若分別以執行或偵測來測試的時,顯示的 Console 會在不同視窗中,如下圖,記得切換到相對應的頁籤,才能看到正確結果。

https://ithelp.ithome.com.tw/upload/images/20181019/20111944I4aqGldRtc.png


  既然是願望清單,那就得先宣告一個集合來存放項目,在公用區域輸入 val 進行宣告一個可變清單,使用 mutableListOf 可以設定預設項目,這些型態使用不熟悉沒關係,會在之後的章節介紹。

https://ithelp.ithome.com.tw/upload/images/20181019/20111944giNpxJqJ7r.png

  接著設定【新增願望】按鈕的操作,透過訪問 wishTxt.text 取得在輸入框打的內容,並 toString() 轉換成文字,再將結果加入到 List 當中,另外在【挑選願望】按鈕操作中,採用隨機挑選的方式,使用 Math.random() 與清單中項目的數量相乘後轉為 Int,就能取得隨機索引,下一行便能利用此變數將清單中的項目讀出來,並且指定在 toDoTxt 上顯示。

https://ithelp.ithome.com.tw/upload/images/20181019/20111944iKA1ydxlgS.png

讀者可以在程式中加入下列程式碼,觀察清單變化狀況:

println(bucketList)

 


  現在讓我們測試一下,由於我們已經有啟動過模擬機,這次可以利用 Apply Change (Ctrl + F10) 的方式,快速的將變更部分套用,可以縮短每次重新模擬測試的處理時間,但若是需要重置的時候就不適合使用,例如想將 bucketList 還原成預設項目時。

https://ithelp.ithome.com.tw/upload/images/20181019/20111944P3DSYVGMZp.png

  測試時你會感覺到在操作上發現一些問題,如:

1. 輸入新的願望後,輸入框應該清空
2. 輸入太長的文字會顯示不完全
3. 出現過的項目想要排除掉

  在解決問題之前,應該先將 addBtn 與 pickBtn 的觸發方法分離,避免在同一段程式中無限的增長,這樣對於日後的可維護性較高,如下圖做了一些調整。另外進行正式的專案開發時,也別忘了適當的加上註解。

https://ithelp.ithome.com.tw/upload/images/20181019/20111944ZdN9hHER0d.png


  首先處理第一個問題,可以在 bucketList.add(newWish) 之後加入清除輸入框語法:wishTxt.text.clear()

  第二個問題則是在版面設計將 toDoTxt 的 layout_height 增加高度,讓顯示範圍增加到兩行,這邊你可以先將預設顯示的文字長度增加,比較方便掌握要調高多少,同時我們也將 wishTxt 設定限制輸入字數,在進階屬性編輯中找到 inputType 附近的 maxLength,設定成 20。

https://ithelp.ithome.com.tw/upload/images/20181019/20111944sPZcXmRoJB.png

  第三個問題,透過點選 pickBtn 時除了顯示項目為,同時也將選中的項目從清單中移除,可以使用 bucketList.removeAt(random),其中 removeAt 需要指定一個索引值作為移除的項目依據,這邊我們給予之前隨機產生的索引值:random

  接著別忘了想到一個衍生問題,當清單值都已經被挑選完為空清單時怎麼辦?若沒有額外進行判斷,剛剛修改的程式會產生錯誤情形,讀者可以嘗試看看執行,會發現 App 發生崩潰,因此我們必須多加上當清單內已無項目時,避免再進行清單的讀取、刪除,並於畫面上顯示提示文字:

toDoTxt.text = "No more plan"

  這時你會發現 Studio 告知你應該使用 resources 的方式取代直接將文字固定設在程式碼當中,原因是這麼做才有利多國語言版本的開發,詳細資訊可參考:Localize your app

https://ithelp.ithome.com.tw/upload/images/20181019/20111944b9L3jv56gY.png

  在專案總管打開 res > values > strings.xml,新增一個文字資源 noMorePlan

https://ithelp.ithome.com.tw/upload/images/20181019/20111944k9KpSuzqjS.png

  程式發開過程中,總是會面對到許多問題,並過關斬將,像是上圖中會看到 make a wish...,有出現提示訊息,它建議使用省略號字符…取代輸入三個 . (dot),你可直接複製提示文字 (…, …) 中的 … 取代。

https://ithelp.ithome.com.tw/upload/images/20181019/201119441AdOrpMf7U.png


  另外一點,在閱讀了 Localize your app 之後會發現在範例上 string name= 的命名規則有些差異,因此這邊順便做了調整,在有引用到資源的地方也要記得同時修改,最後修改結果如下圖:

https://ithelp.ithome.com.tw/upload/images/20181019/20111944FXdLjKiqh7.png


  繞了一大圈,回到程式碼主體,我們將 toDoTxt.text = "No more plan" 修改為 toDoTxt.text = getString(R.string.no_more_plan_txt)getString() 方法表示要從目的地取回字串,我們用 R.string 訪問到如上圖所示的 resources.string,再以指定的 name 取回值,下圖為最終程式調整後的成果:

https://ithelp.ithome.com.tw/upload/images/20181019/20111944eGaOM9uTEC.png


  大功告成,趕緊執行程式測驗一下你所設計的第一個 App 吧!若想要在實體機器上執行程式,也非常簡單,只需要將手機用 USB 連接上電腦,再把手機開啟開發人員模式 (設定 > 系統 > 關於手機 > 連續點版本號碼 7 下),手機會出現提示【啟用開發人員模式】,接著回到設定選單最下方會新出現開發人員模式項目 (若看不到可以回到主畫面再重新進入設定),進入後開啟 USB 偵錯功能,此時會產生一組 Key 並請你同意授權電腦設備連線。

  接著只需在 IDE (Android Studio) 上點選執行,並選擇在 Connected Devices 上執行而非虛擬機,再來會出現下圖視窗請點選 Proceed without Instant Run,IDE 就會自動將應用程式 APK 安裝到手機上並直接執行成功。

https://ithelp.ithome.com.tw/upload/images/20181019/20111944za77xXuRuW.png

https://ithelp.ithome.com.tw/upload/images/20181019/20111944am28UBpOpH.png

  在你的手機上操作看看吧!第一個應用程式的教學就到這邊,再來將進入 Kotlin 語言的學習,我們明天見!


資料參考

Localize your app
https://developer.android.com/guide/topics/resources/localization

Install OEM USB drivers
https://developer.android.com/studio/run/oem-usb

Get the Google USB Driver
https://developer.android.com/studio/run/win-usb


上一篇
Day 04. 第一個 App - Bucket List 與版面視覺設計
下一篇
Day 06. Kotlin 語言學習 - 變數運用
系列文
Kotlin for Android30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
SunAllen
iT邦研究生 1 級 ‧ 2018-10-19 12:54:51

這個星期二,在高雄某書店,看到Kotlin的書籍...覺得這專有名詞,好眼熟...後來想到,今年的鐵人賽,有人寫這個系列...

先看大大的文章,之後再去買書回來看,謝謝大大。

藍諾 iT邦新手 5 級 ‧ 2018-10-19 13:21:14 檢舉

感謝支持,歡迎搭上 Kotlin 30 節列車,若文中有太難懂的部分,可以提出來討論喔!

SunAllen iT邦研究生 1 級 ‧ 2018-10-19 13:23:18 檢舉

好的,謝謝您。

我要留言

立即登入留言