DAY22 这边先帮你上一个按钮喔~(四)

「欸！？阿按了这个按钮怎麽没反应阿？」

这是我妈最常问我的问题，大部分情况都是她遥控器忘记装电池。

如果按钮按下去之後有个反应或是回馈的话，是不是就能让使用者能更沉浸在互动中呢？

「帮我看一下啦。」

妈！没问题！

现在的你了解了 Activity 的大致用途，接下来就是让 App 上的按钮点了真的有反应的时候了。这时候介绍一个东西：

Toast

其实我第一次看到这个名词的时候，也是各种问号，吐司？？？查了一下资料发现，其实它比想像中的更加熟悉，就是这个：

通常会出现在底部，大概过几秒就消失的小文字讯息方块就是 Toast ，当然它也可以出现在萤幕的任何地方，也可以客制化 Toast 的样式，但我们这边就没有说明这些了。这边只是先放个提示说你点了这个 Button 这样。

昨天所说到 Andriod 在第一次打开 App 的时候会先调用 onCreate( ) ，再去画出 Layout ，你可以把要执行动作的程序码加到 onCreate() 之後。利用 findViewById( ) 可以找到 Button ，R.id.Button 是 Button 的 resource ID，每个resource ID 都是唯一值。再把 Button 这个 object 保存到一个变数 rollButton 中。

val rollButton: Button = findViewById(R.id.button)

把这行加到 onCreate( ) 函式之中就会是这个样子：

override fun onCreate(savedInstanceState: Bundle?){
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
  
    val rollbutton: Button = findViewById(R.id.button)

再往上看到 import 会发现多了一行内容：

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

第三行的 import 是自动加上去的，如果没有的话直接在警告那边按 alt+Enter 就可以添加上去了。

接下来要设定监听，让 button 的动作与程序结合。我们使用 setOnClickListener( ) 这个function 去监听，实际上在这个方法的後面会使用 { } ，大括号中可以放入点按之後会执行的动作的程序码。

rollButton.serOnClickListener{

}

我们选择在里面放入一个 Toast 讯息，让 user 知道他点了按钮：

val toast = Toast.makeText(this , "Dice Rolled!",Toast.LENGTH_SHORT)
toast.show()

利用 Toast.makeText( ) 来创建包含 "Dice Roller!" 讯息的 Toast ，在透过 show( ) 来显示。当然你也可以写得更简洁一点：

Toast.makeText(this,"Dice Rolled!",Toast.LENGTH_SHORT).show()

加入这些程序码的整体看起来会像是这样：

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

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

运行起来就会是这个样子：

点按按钮之後改变 TextView

按钮被点下去了！数字也是时候该让它出现了！

先去 Attribute 里看 TextView 的 id ，

已差不多的步骤去让他与 Button 连动，先宣告一个变数去接 TextView ：

val resultTextView: TextView = findViewById(R.Id.textView)
resultTextView.text = "6"

这边先预设点按之後 resultTextView 的 text 会出现 6 ，之後我们再把骰子的程序补上，最後的程序应该会长这样：

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

        val rollButton: Button = findViewById(R.id.button2)
        rollButton.setOnClickListener {
            Toast.makeText(this,"Dice Rolled!", Toast.LENGTH_SHORT).show()
            val resultTextView: TextView = findViewById(R.id.textView)
            resultTextView.text = "6"
        }
    }
}

今天让终於让 Button 与程序码有点互相关联了，但还是有一小段路要完成，我是真的没有想到我 Button 可以写那麽多篇，本想快速结束。但是真的太多了。一样先 JOHN，

下一篇见写写打家打家摆掰。