版面的部分已經設計完成,接著讓我們開始進行程式設計的部分,首先於專案總管打開 app > java > … > MainActivity.kt,如圖所示為主程式設計檔。
首先就能發現 Kotlin 與 Java 差別,就是沒有程式行結尾分號,這點在設計過程會慢慢習慣的,接著讓我們試著訪問挑選願望的這個按鈕 pickBtn,如下圖所示 Studio 會自動辨識並提供快速完成程式碼的建議,只要按下 Enter,就會產生 import 將相關物件導入,接著就能直接訪問到該按鈕。
若想測試一下是否真的有跟控制項連接到,可以輸入:
pickBtn.setOnClickListener { println("Clicked") }
並啟動程式碼執行或偵測,按下按鈕後就能在 Console log 中看到成功印出了指定的文字,這邊值得注意的一點,若分別以執行或偵測來測試的時,顯示的 Console 會在不同視窗中,如下圖,記得切換到相對應的頁籤,才能看到正確結果。
既然是願望清單,那就得先宣告一個集合來存放項目,在公用區域輸入 val 進行宣告一個可變清單,使用 mutableListOf 可以設定預設項目,這些型態使用不熟悉沒關係,會在之後的章節介紹。
接著設定【新增願望】按鈕的操作,透過訪問 wishTxt.text 取得在輸入框打的內容,並 toString() 轉換成文字,再將結果加入到 List 當中,另外在【挑選願望】按鈕操作中,採用隨機挑選的方式,使用 Math.random() 與清單中項目的數量相乘後轉為 Int,就能取得隨機索引,下一行便能利用此變數將清單中的項目讀出來,並且指定在 toDoTxt 上顯示。
讀者可以在程式中加入下列程式碼,觀察清單變化狀況:
println(bucketList)
現在讓我們測試一下,由於我們已經有啟動過模擬機,這次可以利用 Apply Change (Ctrl + F10) 的方式,快速的將變更部分套用,可以縮短每次重新模擬測試的處理時間,但若是需要重置的時候就不適合使用,例如想將 bucketList 還原成預設項目時。
測試時你會感覺到在操作上發現一些問題,如:
1. 輸入新的願望後,輸入框應該清空
2. 輸入太長的文字會顯示不完全
3. 出現過的項目想要排除掉
在解決問題之前,應該先將 addBtn 與 pickBtn 的觸發方法分離,避免在同一段程式中無限的增長,這樣對於日後的可維護性較高,如下圖做了一些調整。另外進行正式的專案開發時,也別忘了適當的加上註解。
首先處理第一個問題,可以在 bucketList.add(newWish)
之後加入清除輸入框語法:wishTxt.text.clear()
。
第二個問題則是在版面設計將 toDoTxt 的 layout_height 增加高度,讓顯示範圍增加到兩行,這邊你可以先將預設顯示的文字長度增加,比較方便掌握要調高多少,同時我們也將 wishTxt 設定限制輸入字數,在進階屬性編輯中找到 inputType 附近的 maxLength,設定成 20。
第三個問題,透過點選 pickBtn 時除了顯示項目為,同時也將選中的項目從清單中移除,可以使用 bucketList.removeAt(random)
,其中 removeAt 需要指定一個索引值作為移除的項目依據,這邊我們給予之前隨機產生的索引值:random
。
接著別忘了想到一個衍生問題,當清單值都已經被挑選完為空清單時怎麼辦?若沒有額外進行判斷,剛剛修改的程式會產生錯誤情形,讀者可以嘗試看看執行,會發現 App 發生崩潰,因此我們必須多加上當清單內已無項目時,避免再進行清單的讀取、刪除,並於畫面上顯示提示文字:
toDoTxt.text = "No more plan"
這時你會發現 Studio 告知你應該使用 resources 的方式取代直接將文字固定設在程式碼當中,原因是這麼做才有利多國語言版本的開發,詳細資訊可參考:Localize your app。
在專案總管打開 res > values > strings.xml,新增一個文字資源 noMorePlan
。
程式發開過程中,總是會面對到許多問題,並過關斬將,像是上圖中會看到 make a wish...
,有出現提示訊息,它建議使用省略號字符…取代輸入三個 . (dot),你可直接複製提示文字 (…, …) 中的 … 取代。
另外一點,在閱讀了 Localize your app 之後會發現在範例上 string name= 的命名規則有些差異,因此這邊順便做了調整,在有引用到資源的地方也要記得同時修改,最後修改結果如下圖:
繞了一大圈,回到程式碼主體,我們將 toDoTxt.text = "No more plan"
修改為 toDoTxt.text = getString(R.string.no_more_plan_txt)
,getString()
方法表示要從目的地取回字串,我們用 R.string
訪問到如上圖所示的 resources.string,再以指定的 name 取回值,下圖為最終程式調整後的成果:
大功告成,趕緊執行程式測驗一下你所設計的第一個 App 吧!若想要在實體機器上執行程式,也非常簡單,只需要將手機用 USB 連接上電腦,再把手機開啟開發人員模式 (設定 > 系統 > 關於手機 > 連續點版本號碼 7 下),手機會出現提示【啟用開發人員模式】,接著回到設定選單最下方會新出現開發人員模式項目 (若看不到可以回到主畫面再重新進入設定),進入後開啟 USB 偵錯功能,此時會產生一組 Key 並請你同意授權電腦設備連線。
接著只需在 IDE (Android Studio) 上點選執行,並選擇在 Connected Devices 上執行而非虛擬機,再來會出現下圖視窗請點選 Proceed without Instant Run
,IDE 就會自動將應用程式 APK 安裝到手機上並直接執行成功。
在你的手機上操作看看吧!第一個應用程式的教學就到這邊,再來將進入 Kotlin 語言的學習,我們明天見!
資料參考
Localize your app
https://developer.android.com/guide/topics/resources/localizationInstall OEM USB drivers
https://developer.android.com/studio/run/oem-usbGet the Google USB Driver
https://developer.android.com/studio/run/win-usb
這個星期二,在高雄某書店,看到Kotlin的書籍...覺得這專有名詞,好眼熟...後來想到,今年的鐵人賽,有人寫這個系列...
先看大大的文章,之後再去買書回來看,謝謝大大。
感謝支持,歡迎搭上 Kotlin 30 節列車,若文中有太難懂的部分,可以提出來討論喔!
好的,謝謝您。