iT邦幫忙

2025 iThome 鐵人賽

0
Mobile Development

app學習實作經驗系列 第 6

Day 6:嘗試修改 UI(TextView、Button、EditText)

  • 分享至 

  • xImage
  •  

今天正式開始畫面設計的部分,主要是學怎麼在Android Studio裡修改UI元件。打開activity_main.xml,它其實就是App的畫面設定。裡面有像TextView(顯示文字)、Button(按鈕)跟EditText(輸入框)這些元件。

我先在設計畫面拖了一個TextView出來,改了文字、大小和顏色,馬上在模擬器上就看到變化了,很有成就感。接著加上EditText讓使用者可以輸入名字,再放一個Button,按下去後顯示「Hello + 名字」。這邊要去 MainActivity.kt連接按鈕事件,類似:

val button = findViewById(R.id.button)
val editText = findViewById(R.id.editText)
val textView = findViewById(R.id.textView)

button.setOnClickListener {
textView.text = "Hello, ${editText.text}"
}

當我看到畫面上真的顯示出「Hello, xxx」的時候就知道成功了,雖然一開始還打錯ID名稱,但修幾次就成功了。

今天算是第一次讓畫面「動起來」,但還很粗糙簡陋,感覺離自己做出真正的App又更近一步。也開始體會UI跟程式是怎麼互相連動的,之後想試試做更可愛一點的介面。


上一篇
Day 5:了解 Android App 的檔案結構(MainActivity.kt、res/layout)
下一篇
Day 7:練習Button點擊事件,顯示文字
系列文
app學習實作經驗30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言