建立基本的互動式骰子應用程式

在本程式碼研究室中,您將建立一個 Dice Roller Android 應用程式,讓使用者能在應用程式中按一下 Button 來擲骰子。相關結果會顯示在畫面上的 TextView 中。

您將使用 Android Studio 中的 Layout Editor (版面配置編輯器)來建立應用程式版面配置,然後編寫 Kotlin 程式碼,以便在使用者點擊 Button 時觸發動作。

必要條件

  • 如何建立及執行「Hello, World!」應用程式
  • 在應用程式中使用 TextViewsImageViews
  • 如何在 Layout Editor (版面配置編輯器) 中修改 TextView 的屬性。
  • 如何將文字擷取為字串資源,讓您更容易翻譯應用程式並重複使用字串。
  • Kotlin 程式設計基本概念,與先前程式碼研究室中的教學內容相同。

課程內容

  • 如何將 Button 新增至 Android 應用程式。
  • 如何新增輕觸應用程式中的 Button 時的行為。
  • 如何開啟及修改應用程式的 Activity 程式碼。
  • 如何顯示 Toast 訊息。
  • 如何在應用程式執行期間更新 TextView 的內容。

建構項目

  • 具有 Button 的 Dice Roller Android 應用程式,以便擲骰子及用擲骰子結果來更新畫面上的文字。

軟硬體需求

  • 已安裝 Android Studio 的電腦。

您完成本程式碼研究室後,應用程式的外觀可能如下。

建立空白活動專案

  1. 如果已在 Android Studio 中開啟現有專案,請依序點選「File」(檔案) >「New」(新增) >「New Project...」(新專案...),然後開啟「Create New Project」(建立新專案) 畫面。
  2. 在「Create New Project」(建立新專案) 中,使用「Empty Activity」(空白活動) 範本建立新的 Kotlin 專案。
  3. 呼叫應用程式「Dice Roller」,最小 API 級別為 19 (KitKat)。

重要事項:如果您不熟悉在 Android Studio 中建立新專案,請參閱建立及執行第一個 Android 應用程式

  1. 執行新版應用程式。應用程式外觀如下:

開啟 Layout Editor (版面配置編輯器)

  1. 在「Project」(專案) 視窗,連按兩下並開啟 activity_main.xml (「App」(應用程式) >「Res」(解析度) >「Layout」(版面配置) >「activity_main.xml」。。您應該會看到版面配置編輯器,其中只有「Hello World」這個 TextView 位於應用程式中央。

接下來,請將 Button 新增到您的應用程式。Button 是 Android 中的使用者介面 (UI) 元素,讓使用者輕觸即可執行動作。

在這項工作中,您將在「Hello World」TextView下方新增 ButtonTextViewButton 位於屬於 ViewGroup 類型的 ConstraintLayout 中。

如果 ViewGroup 中有 Views,則會將 Views 視為父項ViewGroup子項 。就您的應用程式而言,TextViewButton 視同父項 ConstraintLayout 的子項。

Button 新增為應用程式中現有 ConstraintLayout 的子項。

在版面配置中新增按鈕

  1. ButtonPalette 拖曳到「設計」檢視,位於「Hello World」的 TextView 下方。
  2. 在「Component Tree」(元件樹狀結構) 中的「Palette」(區塊面板) 下方,請確認ButtonTextView 列於 ConstraintLayout (作為 ConstraintLayout 的子項)。
  3. 請注意,Button 未受限。由於 Button 位於 ConstraintLayout 內,因此您必須設定垂直和水平限制條件進行定位。

安排按鈕的位置

在這個步驟中,您將新增從 Button 頂端到 TextView 底部的垂直限制條件。這會將 Button 放在 TextView 的下方。

  1. 在「Design」(設計) 檢視畫面中,按住 Button 上方邊緣的有藍色邊框的白色圓圈。拖曳指標,並箭頭會遵循指標。當您移動到「Hello World」TextView底部邊緣時放開。這會建立版面配置限制,而 Button 會向上滑至 TextView 的正下方。
  2. 查看版面配置編輯器右側的 [屬性]
  3. 請留意「Constraint Widget」(限制小工具) 中,新版面配置的限制條件設定為 TextView 的底部,例如 Top → BottomOf textView (0dp)(0dp) 表示邊界為 0。而且您遺漏了水平限制。
  4. 新增從 Button 的左側至父項 ConstraintLayout 的左側的水平限制條件。
  5. 於右側重複操作,將 Button 的右邊緣連接到 ConstraintLayout 的右邊緣。結果看起來會像這樣:

  1. 在仍然選取 Button 的情況下,「Constraint Widget」(限制小工具) 應如下所示。您新增了兩個額外的限制條件:Start → StartOf parent (0dp)End → EndOf parent (0dp)。這表示 Button 的上層是置中的,ConstraintLayout
  1. 執行應用程式。應如以下螢幕截圖所示。您可以點選 Button,但目前還沒有任何動作。接著執行下一項工作吧!

變更按鈕文字

您將會在 Layout Editor (版面配置編輯器)中進行幾項使用者介面變更。

不要將 Button 標籤改為顯示「按鈕」,而是將其改為顯示按鈕要執行的操作:「&lltRoll」。

  1. Layout Editor (版面配置編輯器) 中,在已選取 Button 情況中,前往「Attributes」(屬性),將 text 變更為 Roll,然後按下 Enter 鍵 (Mac 則是按下 Return 鍵)。

  1. 在 「Component Tree」(元件樹狀結構) 中,Button 旁邊會顯示橘色的警示三角形。只要游標懸停在三角形上,就會顯示訊息。Android Studio 在您的應用程式的程式碼中偵測到硬式編碼字串 (「Roll」),因此建議您改用字串資源

如果使用硬式編碼字串,應用程式就更難翻譯為其他語言。在應用程式不同部分中,較難重複使用字串。幸好,Android Studio 能自動為您進行修正。

  1. 在「元件樹狀結構」中按一下橘色三角形圖示。

系統隨即會開啟完整警告訊息。

  1. 在訊息底部的「Suggested Fix」(建議修正) 下方,按一下「Fix」(修正) 按鈕。(您可能需要向下捲動頁面。)
  2. 系統隨即會開啟「Extract Resource」(擷取資源) 對話方塊。擷取字串時會取得「Roll」文字,並在 strings.xml 中建立一個名為 roll 的字串資源 (「App」(應用程式) >「Res」(解析度) >「Values」(設定值) >「string.xml」)。預設值正確,因此請按一下「OK」(確定)。

  1. 請注意,在「屬性」中,Buttontext 屬性現在會顯示 @string/roll,指的是您剛剛建立的資源。

在「Design」(設計) 檢視畫面中,Button 應仍顯示出 Roll

設定 TextView 的樣式

「Hello World!」文字非常小,且訊息與您的應用程式無關。在這個步驟中,您必須將小型「Hello, World!」訊息取代為數字以顯示搖骰子值,並放大字型,讓使用者一目瞭然。

  1. 「Design Editor」(設計編輯器) 中選取 TextView,以在「Attributes」(屬性) 視窗中顯示其屬性。
  2. TextViewtextSize 變更為 36sp,以便放大且易讀。您可能需要捲動畫面,才能找到 textSize

  1. 清除 TextViewtext 屬性。您不用在 TextView 中顯示任何資訊,直到使用者擲骰子為止。

然而,當您編輯應用程式的版面配置和程式碼時,在 TextView 中看見一些文字是很實用的做法。為方便您在預覽時,將文字新增到 TextView 中,但只能顯示在預覽預覽畫面中,但不會顯示於應用程式執行期間

  1. 在「Component Tree」(元件樹狀結構) 中選取 TextView
  2. 在「Common Attributes」(通用屬性) 下方找到 text 屬性,下方則顯示含有工具圖示的 text 屬性。text 屬性是在應用程式執行時顯示給使用者。含有工具圖示的 text 屬性是您為開發人員設計的「tools text」(工具文字) 屬性,
  3. TextView 中將工具文字設定為「1」(假設您有一個顯示「1」的骰子)。「1」只會出現在 Android Studio 的「Design Editor」(設計編輯器) 中,但當您在實際裝置或模擬器上執行應用程式時,畫面上不會顯示「1」。

請注意,由於只有應用程式開發人員看得到此文字,因此您不需要為其提供字串資源。

  1. 在預覽畫面中查看應用程式。目前顯示「1」。

  1. 執行您的應用程式。這是在模擬器上執行應用程式後的外觀。未顯示「1」。這是正確的做法。

太好了,這樣版面配置已完成變更!

有一個應用程式按鈕,但只要輕觸按鈕,系統將不會執行任何動作。如要變更這項設定,你必須撰寫一些 Kotlin 程式碼,以便在輕觸按鈕時擲回骰子並更新畫面。

如要進行這項變更,您需要進一步瞭解 Android 應用程式的結構。

Activity 會提供應用程式繪製使用者介面的視窗。一般而言,Activity 會佔滿執行中應用程式的整個畫面。每個應用程式都有一或多個活動。頂層或第一個活動通常稱為 MainActivity,由專案範本提供。舉例來說,當使用者捲動裝置上的應用程式清單,然後輕觸「Dice Roller」應用程式圖示時,Android 系統將啟動應用程式的 MainActivity

您需要在 MainActivity 程式碼中提供Activity版面配置的設定方式,以及使用者與互動方式的方式。

  • Birthday Card 應用程式有一個 Activity 會顯示生日訊息和圖片的。
  • 在 Dice Roller 應用程式中,有一個 Activity 會顯示您剛建立的 TextViewButton 版面配置。

如果是較複雜的應用程式,可能有多個畫面以及多個 Activity。每個 Activity 都有特定用途。

例如,在相片庫應用程式中,您可以有一個 Activity 用於顯示相片格狀檢視畫面,第二個 Activity 可用於查看個別相片,而另一個 Activity 可用來編輯個別相片。

開啟 MainActivity.kt 檔案

您需要新增程式碼來回應 MainActivity 中的按鈕輕觸動作。為了正確執行這項作業,您必須進一步瞭解應用程式中現有的 MainActivity 程式碼。

  1. 前往 MainActivity.kt 檔案 (「App」(應用程式) >「Java」>「com.example.diceroller」>「MainActivity.kt」)。以下是您應該會看到的內容。如果畫面顯示 import...,按一下 ... 即可展開匯入內容。
package com.example.diceroller

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
   }
}

您不需要瞭解上述程式碼中的每個字詞,但必須大致瞭解這些程式碼有何作用。越常使用 Android 程式碼,就越容易理解,也讓您更瞭解。

  1. 查看 MainActivity 類別的 Kotlin 程式碼,並以關鍵字 class 和名稱來識別。
class MainActivity : AppCompatActivity() {
    ...
}
  1. 請注意,您的 MainActivity 中沒有 main() 函式。

    之前,您已得知每個 Kotlin 程式都必須具備 main() 函式。Android 應用程式的運作方式有所不同。當應用程式首次開啟時,Android 系統會呼叫 MainActivityonCreate() 方法,而不是呼叫 main() 函式。
  2. 找出 onCreate() 方法,程式碼看起來如下所示。
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
   }

您稍後會在程式碼研究室中學習 override,因此暫時不必費心。其他 onCreate() 方法會使用匯入作業中的程式碼及用 setContentView() 設定起始版面配置,來設定 MainActivity

  1. 請留意開頭為 import 的行。

Android 提供許多類別的架構,可讓您更輕鬆地撰寫 Android 應用程式,但必須確切瞭解您的類別。您可以使用 import 陳述式,指定您程式碼要使用架構中的哪個類別。舉例來說,android.widget.Button 中定義了 Button 類別。

啟用自動匯入作業

如果您同時使用更多類別,新增 import 陳述式會變得困難。幸好,使用他人提供的類別時,Android Studio 可協助您選擇正確的匯入作業。在這個步驟中,您將設定 Android Studio 在在可能的情況下自動匯入作業,並在程式碼中自動移除未使用的匯入作業。

  1. 在 Android Studio 中,前往 [File >Other Settings >Preferences of New Projects] (新專案偏好設定) 開啟設定。
  2. 展開 [其他設定] > [自動匯入]。在「Java」和「Kotlin」區段中,確定已勾選「Add unambiguous imports on the fly」(快速新增不明確的匯入) 和「Optimize imports on the fly (for current project)」(快速最佳化匯入 (適用於目前的專案)。請注意,每個部分都有兩個核取方塊。

    「明確匯入」設定會指示 Android Studio 自動新增匯入陳述式,前提是要先確定該使用哪一個陳述式。[最佳化匯入] 設定會指示 Android Studio 移除程式碼未使用的匯入項目。
  3. 按一下 [確定] 即可儲存變更並關閉設定。

現在您對於 MainActivity 瞭若指掌,您將修改應用程式後,使得按一下 Button 即可在螢幕上進行其他動作。

在點選按鈕時顯示訊息

在這個步驟中,您需要指定在按下按鈕時,畫面底部顯示簡短訊息。

  1. setContentView() 呼叫後,將下列程式碼新增至 onCreate() 方法。findViewById() 方法會在版面配置中找到 ButtonR.id.buttonButton 的資源 ID,這是其專屬識別碼。程式碼會將對 Button 物件的參照儲存在名為 rollButton 的變數中,而非 Button 物件本身。
val rollButton: Button = findViewById(R.id.button)

程式碼會將對 Button 物件的參照儲存至名為 rollButton 的變數中,而非 Button 物件本身。

onCreate() 方法現在應會如下所示。

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)

   val rollButton: Button = findViewById(R.id.button)
}
  1. 確認 Android Studio 已自動為 Button 新增 import 陳述式。
    請注意,目前已有 3 個匯入陳述式,其中第 3 個是自動新增的陳述式。
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button

接下來,您需要建立程式碼與 Button 的關聯,以便在輕觸 Button 時執行程式碼。點擊事件監聽器是在使用者輕觸或點選時採取動作的程式碼。在此情況中,您不妨把程式碼想成是僅僅坐著「監聽」使用者是否點選 Button

  1. 使用 rollButton 物件並呼叫 setOnClickListener() 方法來對其設定點擊事件監聽器。
rollButton.setOnClickListener {
}


Android Studio 會在你輸入時提供多個建議。這時請選擇 setOnClickListener {...} 選項。

您可在大括號中放入指令,指示在輕觸按鈕時應該執行的操作。目前,您必須讓應用程式顯示 Toast,也就是向使用者顯示的簡短訊息。

  1. 呼叫 Toast.makeText() 即可建立內含文字 "Dice Rolled!"Toast
val toast = Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT)
  1. 然後呼叫 show() 方法,讓 Toast 自行顯示。
toast.show()

更新後的 MainActivity 類別如下所示;packageimport 陳述式仍位於檔案頂端:

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       val rollButton: Button = findViewById(R.id.button)
       rollButton.setOnClickListener {
           val toast = Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT)
           toast.show()
       }
   }
}

您可以將點擊事件監聽器中的兩行合併成沒有變數的一行。這是其他程式碼中常見的模式。

Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT).show()
  1. 執行應用程式,然後按一下「Roll」按鈕。浮動式訊息應會以彈出式視窗顯示在螢幕底部,而且不久後就會消失。

太棒了!點選按鈕後,畫面上會以彈出式視窗顯示訊息!這是您第一次編寫 Android 適用的 Kotlin 程式碼!

在點選按鈕時更新 TextView

如果不想顯示臨時 Toast 訊息,您必須撰寫程式碼,並在點選「Roll」按鈕時更新畫面上的 TextView

  1. 返回activity_main.xml (「App」(應用程式) >「Res」(解析度) >「Layout」(版面配置) >「activity_main.xml」)
  2. 按一下 TextView
  3. 請注意,idtextView
  4. 開啟 MainActivity.kt (「應用程式」>「java」>「com.example.diceroller」>「MainActivity.kt」)
  5. 刪除建立並顯示 Toast 的程式碼行。
rollButton.setOnClickListener {
  
}
  1. 在該位置建立一個名稱為 resultTextView 的新變數,以便儲存 TextView
  2. 使用 findViewById() 在版面配置中使用 textView 找出這個 ID 並儲存其參照。
val resultTextView: TextView = findViewById(R.id.textView)
  1. resultTextView 中的文字設定為「6」引號。
resultTextView.text = "6"

操作方式與您在「Attributes」(屬性) 中設定 text 屬性的方式相同,但現在您已納入程式碼,因此文字必須置於雙引號中。如果明確設定,TextView 目前會顯示 6。您需要加入程式碼來擲骰子,並在下一個工作中顯示不同的值。

MainActivity 類別應如下所示:

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       val rollButton: Button = findViewById(R.id.button)
       rollButton.setOnClickListener {
           val resultTextView: TextView = findViewById(R.id.textView)
           resultTextView.text = "6"
       }
   }
}
  1. 執行應用程式。按一下按鈕。應將 TextView 更新為「6」。

唯一遺漏的就是實際上擲骰子。您可以重複使用先前的程式碼研究室的 Dice 類別,該類別會處理擲骰子的邏輯。

新增 Dice (骰子) 類別

  1. MainActivity 類別中加上最後一個大括號後,透過 roll() 方法建立 Dice 類別。
class Dice(val numSides: Int) {

   fun roll(): Int {
       return (1..numSides).random()
   }
}
  1. 請注意,Android Studio 會以numSides灰色底線標示底線。(可能需要一些時間才會顯示。)
  2. 將遊標懸停在 numSides上方,就會出現彈出式視窗,其中會顯示「Property 'numSides' is private to」。

numSides 標示為 private 後,您只能在 Dice 類別中存取。由於只有使用 numSides 的程式碼才會位於 Dice 類別內,因此可為 Dice 類別指定這個引數 private。下一單元中您將瞭解 privatepublic 變數。

  1. 只要點選 [製作及自訂檔案 (#39;''private'),即可從 Android Studio 提出建議。

建立 rollDice() 方法

現在您已經新增 Dice 類別至應用程式,必須更新 MainActivity 才能使用該類別。如要妥善整理程式碼,請將所有擲骰子邏輯放入一個函式中。

  1. 將點擊事件監聽器中將文字設定為 "6" 的程式碼替換為呼叫 rollDice()
rollButton.setOnClickListener {
   rollDice()
}
  1. 因為尚未定義 rollDice(),Android Studio 會標記誤並以紅色顯示 rollDice()
  2. 滑鼠游標懸停在 rollDice() 上時,Android Studio 會顯示問題和可能的解決方法。

  1. 按一下「More actions...」(更多動作...) 開啟選單。Android Studio 提供更完善的使用體驗!

  1. 選取 [Createfunction 'rollDice']。Android Studio 會為 MainActivity 中的函式建立空白定義。
private fun rollDice() {
    TODO("Not yet implemented")
}

建立新的 Dice 物件執行個體

在這個步驟中,您必須建立 rollDice() 方法並擲骰子,然後在 TextView 中顯示結果。

  1. rollDice() 中刪除 TODO() 呼叫。
  2. 加入程式碼即可建立具有 6 面的骰子。
val dice = Dice(6)
  1. 呼叫 roll() 方法即可擲骰子,並將結果儲存在名為 diceRoll 的變數中。
val diceRoll = dice.roll()
  1. 呼叫 findViewById() 即可找到 TextView
val resultTextView: TextView = findViewById(R.id.textView)

變數 diceRoll 是數字,但 TextView 使用文字。您可以使用 diceRoll 上的 toString() 方法將其轉換為字串。

  1. diceRoll 轉換成字串,並使用該字串更新 resultTextView 的文字。
resultTextView.text = diceRoll.toString()

rollDice() 方法的樣式看起來像:

private fun rollDice() {
    val dice = Dice(6)
    val diceRoll = dice.roll()
    val resultTextView: TextView = findViewById(R.id.textView)
    resultTextView.text = diceRoll.toString()
}
  1. 執行您的應用程式。擲骰子結果應變更為 6 以外的其他值!由於這是 1 到 6 之間的隨機數字,因可能偶爾也會顯示此值 6。

太棒了!

您在這裡微調部分程式碼並讓應用程式正常運作後,程式碼通常看起來會有些微雜亂。但是在退出程式碼前,請先完成一些簡單的工作。應用程式的保持在良好狀態,日後也更容易維護。

這些習慣是專業 Android 開發人員編寫程式碼時的實務做法。

Android 樣式指南

團隊合作時,理想的做法是以類似的方式撰寫程式碼,讓程式碼之間保持一致。因此,Android 提供樣式指南來說明如何編寫 Android 程式碼,包括命名慣例、格式和其他遵循的建議做法。撰寫 Android 程式碼時請遵守這些規範:Android 開發人員專用的 Kotlin 樣式指南

您可以透過下列幾種方式遵守樣式指南。

清理您的程式碼

縮減程式碼

您可以將程式碼縮減成較短行的程式碼,讓程式碼更精簡。以下範例是設定 Button 點擊事件監聽器的程式碼。

rollButton.setOnClickListener {
    rollDice()
}

由於點擊事件監聽器的操作說明只有 1 行,因此您可以縮減 rollDice() 方法呼叫,並將大括號全部置於一行。這看起來像這樣 單行而非三行!

rollButton.setOnClickListener { rollDice() }

重新設定程式碼格式

現在,您必須重新設定程式碼格式,確保程式碼符合 Android 建議的程式碼格式規範。

  1. MainActivity.kt 類別中,用 Windows 的鍵盤快速鍵 Control+A (Mac 則是 Command+A) 就可選取檔案中的所有文字。或者在 Android Studio 的選單中依序點選「Edit」(編輯) >「Select All」(全選)。
  2. 選取檔案中的所有文字後,在 Android Studio 的選單中依序點選「Code」(程式碼) >「Reformat Code」(重新格式化程式碼),或使用鍵盤快速鍵 Ctrl+Alt+L (Mac 則是 Command+Option+L)。

這會更新程式碼的格式,包括空白字元、縮排等等。您可能還看不到任何變化,這很好。您的程式碼已正確格式化!

為程式碼加上註解

在您的程式碼中新增一些評論,說明您編寫的程式碼的作用。隨著程式碼變得越來越複雜,註明您撰寫程式碼以按照您的方式運作原因也很重要。如果之後返回變更程式碼,程式碼或許還是易懂明瞭,但您不記得當初編寫程式碼的原因。

通常,為每個類別 (MainActivityDice 是您的應用程式中僅有的類別) 和您撰寫的每個方法新增註解。請在註解的開頭和結尾使用 /****/ 符號,告訴系統這不是程式碼。系統在執行程式碼時會忽略這些行。

類別註解範例:

/**
* This activity allows the user to roll a dice and view the result
* on the screen.
*/
class MainActivity : AppCompatActivity() {

方法的註解範例:

/**
* Roll the dice and update the screen with the result.
*/
private fun rollDice() {

您可以在方法中隨意新增註解,協助讀者瞭解程式碼。提醒您,您可以在註解開頭加上 // 符號。行中 // 符號後面的所有內容都會視為註解。

方法中有 2 個註解範例:

private fun rollDice() {
   // Create new Dice object with 6 sides and roll it
   val dice = Dice(6)
   val diceRoll = dice.roll()

   // Update the screen with the dice roll
   val resultTextView: TextView = findViewById(R.id.textView)
   resultTextView.text = diceRoll.toString()
}
  1. 繼續並花點時間在程式碼中加入註解。
  2. 完成這些註解和格式變更之後,建議您再次執行應用程式,確保應用程式可正常運作。

查看解決方案程式碼,瞭解您可以在程式碼中新增註解的方式。

本程式碼研究室的解決方案程式碼在下方顯示的專案和模組中。

如要從 GitHub 取得此程式碼研究室的程式碼,並在 Android Studio 中開啟此程式碼,請執行下列步驟。

  1. 啟動 Android Studio。
  2. 在「Welcome to Android Studio」(歡迎使用 Android Studio) 視窗中,按一下「Check out project from version control」(從版本控制切換專案)
  3. 選擇 [Git]

  1. 在「Clone Repository」(複製存放區) 對話方塊中,將提供的程式碼網址貼到 [URL] (網址) 方塊中。
  2. 按一下 [測試] 按鈕,然後等待系統顯示綠色彈出式說明圖示,指出 [連線成功]
  3. 您也可以將「Directory」(目錄) 變更為與建議預設值不同的內容。

  1. 按一下「Clone」(複製)。Android Studio 會開始擷取程式碼。
  2. 在「Checkout from Version Control」(從版本控制切換) 彈出式視窗中,按一下「Yes」(是)

  1. 等待 Android Studio 開啟。
  2. 在程式碼研究室的範例程式碼或解決方案程式碼,選取正確的模組。

  1. 按一下 [Run] 按鈕 可建構並執行程式碼。
  • 使用Layout Editor (版面配置編輯器)在 Android 應用程式中新增 Button
  • 修改 MainActivity.kt 類別以在應用程式中加入互動行為。
  • 以彈出式視窗顯示 Toast 訊息做為暫時解決方案,驗證您的方向是否正確。
  • 使用 setOnClickListener() 設定 Button 的點擊事件監聽器,新增點選 Button 時的行為。
  • 應用程式執行期間,呼叫關於 TextViewButton 或其他版面配置中的 UI 元素的方法,就可以更新畫面。
  • 請撰寫程式碼的註解,協助閱讀程式碼的其他人瞭解您的做法。
  • 重新設定程式碼格式並清理程式碼,以盡可能精簡。

請練習下列項目:

  1. 在應用程式中新增另一個骰子。按一下「Roll」按鈕應擲 2 個骰子。螢幕上應在 2 個不同的 TextViews 中顯示結果。

檢查操作:

您完成的應用程式應該可以正常執行,而且會在應用程式中顯示兩個骰子。