Kotlin學習之旅第十三天
今天主要是編寫代碼，繼續實現其他的功能
前言
Kotlin學習之旅(D6)-Kotlin Idioms part 1
Kotlin學習之旅(D7)-Kotlin Idioms part 2
Kotlin學習之旅(D8)-From Java to Kotlin
Kotlin學習之旅(D9)-Android Extensions
Kotlin學習之旅(D10)- Unit Test with Kotlin
今日目標
首先要說的就是，昨天我們已經完成了App基本的添加，編輯功能了，但是有一個很不方便的地方，就是App來查看筆記的時候沒有辦法直接查看下一條，因此今天我們要做的就是，在ActionBar加入一個Next按鈕，點擊按鈕之後能顯示下一條筆記的信息。
點擊筆記 -> 顯示筆記內容 -> 點擊右上角的 ‘’>’’ -> 顯示下一條筆記
這種交互方式對用戶來說更爲友好，順便我們也能學習一下ActionBar的用法~走你
修改MenuItem
首先我們來看一下res -> menu 文件夾下的 menu_main.xml文件：
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.blue.notekeeper.MainActivity">
<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:title="@string/action_settings"
app:showAsAction="never" />
</menu>
這個時候只有一個item,我們加入Next Item
<item
android:id="@+id/action_next"
android:checkable="true"
android:enabled="true"
android:icon="@drawable/ic_forward_white_24dp"
android:title="Next"
android:visible="true"
app:showAsAction="ifRoom|withText" />
創建icon的方式和前面創建其他圖標是一樣的
- drawable文件夾右鍵 -> new -> Vector Asset
- 在
Clip Art選項中選擇forward - 把顏色設置爲白色
也可以看圖片：
注意：app:showAsAction=“ifRoom|withText” 的意思就是 當屏幕空間足夠的時候，這個item會顯示到ActionBar 具體效果大家可以運行項目，然後 切換屏幕方向 就懂了
- 橫屏的時候Next的圖標和文字都會顯示出來
- 豎屏的時候Next只有圖標顯示出來，文字由於空間不足就隱藏起來了
修改MainActivity
xml文件搞定以後，我們就要開始在代碼中處理邏輯了
Menu提供了兩個方法給我們處理menu item的相關邏輯
- onPrepareOptionsMenu() - 這個方法很常見，在item被點擊的時候會觸發，因此我們在這裏做對應的點擊事件的處理
- onPrepareOptionsMenu() - 這個方法可能用的比較少，在item還未初始化之前會被調用，因此我們可以在這裏做一些準備工作，例如對item圖標的更換，點擊事件的控制等，接下來大家就知道爲什麼要重新這個方法了
重寫onPrepareOptionsMenu()
override fun onOptionsItemSelected(item: MenuItem): Boolean {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
return when (item.itemId) {
R.id.action_settings -> true
R.id.action_next -> {
moveNext()
true
}
else -> super.onOptionsItemSelected(item)
}
}
知識點：when 表達式
moveNext()
private fun moveNext() {
++notePosition
displayNote()
invalidateOptionsMenu()
}
每一次點擊 next 按鈕，我們先讓記錄當前筆記位置的變量notePosition +1，然後再顯示下一條筆記，這個方法已經在昨天的文章裏實現了，最後就是調用invalidateOptionsMenu() 方法。
重寫onPrepareOptionsMenu()
在沒有重寫這個方法之前，如果我們不停的點擊next,到了最後一條筆記的時候，再點擊next，app會crash，原因就是數組下標越界了。這個問題很容易解決，就是當我們已經顯示了最後一條筆記時，next按鈕變成一個不可點擊的狀態，如圖：
在onPrepareOptionsMenu()方法裏面，我們通過當前的位置來進行判斷是否需要變更圖標
override fun onPrepareOptionsMenu(menu: Menu?): Boolean {
if (notePosition>= DataManager.notes.lastIndex){
val menuItem = menu?.findItem(R.id.action_next)
if (menuItem != null){
menuItem.icon = getDrawable(R.drawable.ic_block_white_24dp)
menuItem.isEnabled = false
}
}
return super.onPrepareOptionsMenu(menu)
}
如果還沒到最後一條筆記，那麼就顯示next，否則的話就顯示block，並且設置爲不可點擊。
關於如何生成 block icon，這裏就不重複了，步驟和上面生成Next圖標是一樣的
最後再運行一遍App，看一下效果，應該就和Day11那篇文章開頭的動圖是一樣的了。
總結
在這個筆記App中，我們實現了以下功能：
- 新增筆記
- 查看和編輯筆記
- 通過Next查看下一條筆記
- 橫豎屏切換時保存筆記狀態
但是其實還有許多可以改進的地方，例如：
- 刪除筆記（List 左滑 / 長按 / 進入編輯頁面刪除 等等）
- 優化控件（RecyclerView 替換 ListView）
- 優化界面（讓筆記通過卡片形式展示，加入點擊和過場動畫，使用不同顏色的字體 等等）
- 優化筆記功能（可以插入圖片，url，等額外的信息）
有興趣的童鞋可以在此基礎上繼續開發~通過實戰提高自己的技術！！
不過我們Kotlin學習之旅的目的還是達到了，雖然只是一個簡單的半成品App，通過前期學習Kotlin的語法和特性，然後到一步步寫出這個App，這個過程中的成就感還是非常大的，同時也讓自己對Android和Kotlin得以一直保持熱度和興趣。
明天就是Kotlin學習之旅的最後一天了，我會做一個Kotlin學習資料的總結，包括文檔，博客，視頻，Github的開源項目等
Day 13 - Learn Kotlin Trip， Completed.