iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 5
0
自我挑戰組

Android初學筆記系列 第 5

Day 5 - 元件操作

昨天我們在介面上新增了兩個元件,今天我們就來讓這些元件動起來,目標是讓使用者在EditText輸入文字,按下按鈕後把輸入的內容顯示到TextView上。

程式

要控制元件必須透過Java程式,請先打開MainActivity檔案
http://ithelp.ithome.com.tw/upload/images/20161220/20103849wejNo1BAPS.jpg
目前內容非常的簡單,第11行表示要連結的介面檔,也就是我們昨天編輯過的activity_main

我們將程式改成這樣
http://ithelp.ithome.com.tw/upload/images/20161220/20103849xYBIhHDIdd.jpg

  • 第13~15行先宣告我們要用到的元件
  • 第23~25行將元件透過findViewById連結到介面檔,所以若要透過程式控制的元件記得要在xml裡給它一個id哦
  • 第28行為myButton新增一個OnClickListener,並將點擊時要做的事寫在onClick裡面(文章底下有補充快速新增的方式哦)
  • 第33行我們宣告一個字串來承接myEditText的內容,getText會返回目前輸入的內容,再用toString將內容轉為字串
  • 第36行用setText更新myTextView要顯示的文字

這樣就完成啦!非常簡單對不對!一行程式就可以取得使用者打在EditText的值,再用一行程式就可以變更TextView的值


執行結果

在EditText裡打字,按下按鈕後就會更新TextView
http://ithelp.ithome.com.tw/upload/images/20170101/20103849KqhyusMkl3.png


自動完成onClickListener

第28~38行是看起來比較複雜的地方,這邊我們可以用Android Studio的自動完成功能,其實只要打幾個字就可以創好一個OnClickListener哦

  1. 輸入 myButton. 如下圖,當按下 . 的時候就會出現很多項目可以選
    http://ithelp.ithome.com.tw/upload/images/20161220/20103849R8UOoiM4Ma.jpg

  2. 可以接著輸入一些字來過濾項目,例如輸入setOn
    http://ithelp.ithome.com.tw/upload/images/20161220/20103849hEDY6ZHtT1.jpg

  3. 找到並選擇setOnClickListener,程式會變這樣
    http://ithelp.ithome.com.tw/upload/images/20161220/20103849Nd2MRgWU02.jpg

  4. 在括號裡輸入new On就會出現很多選項,選擇OnClickListener
    http://ithelp.ithome.com.tw/upload/images/20161220/20103849lKJdPPdsI9.jpg

  5. Android Studio會自動產生其餘部分,我們就可以開始把事件寫在OnClick裡了
    http://ithelp.ithome.com.tw/upload/images/20161220/20103849zqlprRjcQH.jpg


上一篇
Day 4 - 使用者介面
下一篇
Day 6 - 使用者介面(2)
系列文
Android初學筆記30

尚未有邦友留言

立即登入留言