DAY24 这边先帮你上一个按钮喔~(六)

这边真的是帮你上最後一份按钮了啦。

想遥远的按钮系列的第一篇，有说到希望最後的样子是会长这个样子：

毕竟他的专案名称还是叫做「DiceRoller」我们还是要给他一点 respect ，Respect you know?

那就今天就让这个系列做一个完整的结束，GOGOGOGO!

将数字换成 image

饿死胎头，要将昨天做完中间又大又直白的阿拉伯数字~~(但其实阿拉伯数字是印度的婆罗米人发明的)~~，换成对应点数的骰子图案。

改革总是伴随着牺牲与付出，我们必须在这里跟我们挚爱的朋友 TextView 说再见，感谢他让我们更好理解程序的运行状况，TextView 总是在第一线赤裸裸地被使用者观看，背後又有大群程序需要靠他显示，如此伟大的 object 最终要离开我们，让我们怀念他。

在我们狠狠低把 TextView 甩到一边去之後，就是 ImageView 要来顶替这个重要的位子了，就如同杰克失去左手之後，把草帽交给鲁夫一样，显示结果这个重责大任就交给 ImageView 了。

把 Image 拖进来之後 Android Studio 会让你选择你想要的 resource，我们还没有骰子的图，所以我们先放 avatars 作为临时图片。

毕竟我们的大哥 TextView 被甩到旁边去了，APP 里的一些 object 也失去了与大哥的连结(限制)，完成上面步骤之後还是得为 ImageView 加一点限制，这边我们有开另一篇文章跟大家解释过了，就不多讲啦。

但就算添加了一些限制之後，ImageView 仍存在一条警告，我们会在之後处理他，先不用担心。

添加骰子图片

这边提供一个连结，给各位下载骰子图片使用，不用担心是甚麽奇怪的网址，因为这是从google developer 那边找到的。载完解压缩就可以准备丢进 Android Studio 啦。

你可以点最左边的 Resource Manager 的标签，再点「+」找到你要丢进来的图片，中间没有甚麽要调的设定，看到下面这样的图就是完成啦：

再来就是把 avatars 替换成骰子图片啦，进入 attribute 里找到带有板手的 srcCompat (还记得ㄇ，带有板手的就是只有开发者会看到，使用者是看不到的喔)，将图片替换成 dice 的任一个图片应该会看到下列这样情况：

好...好大>///<

稍微调整一下大小，不要让 APP 一直忍，调整完之後就可以进入程序修改的环节啦，进入 MainActivity.kt 之後会有一堆错误等着你，你可能会很紧张，

为甚麽这样子？你拉着我说你有些错误。

别担心，是大哥留下来的痕迹，我们还没有去除而已。

private fun rollDice(){
        val dice = Dice(6)
        val diceRoll = dice.roll()

        val resultTextView: TextView = findViewById(R.id.textView)
        resultTextView.text = rollDice.toString()

    }

原来是我们仍在引用 R.id.textView ，让 Andriod Studio 找不到他，着急的向你求救。把他删除之後错误讯息就都会消失了。

让我们在同样的位子补上 ImageView ：

val diceImage: ImageView = findViewById(R.id.imageView) //宣告diceImage

如果你想测试一下的话你可以将这段程序写在下方：

diceImage.setImageResource(R.drawable.dice_2) //点击按钮之後会把目前的image更改为dice_2

根据乱数产生的数字，产生对应点数的图片

目前的程序码跟昨天的程序码就差在 TextView 换成了 ImageView ，点击按钮後修改 TextView 的 text 跟直接换上图片，这样的差距，其他监听或是产生乱数的都还好好的躺着。

之前有稍微介绍过条件式 if-else 与 when ，接下来会用这样的条件式去判断 diceRoll 这个变数接收到的数字为多少，再换上对应的图片。那我们如果以 if-else 的方式下去写的话就是：

if (diceRoll == 1){
    diceImage.setImageResource(R.drawable.dice_1) 
}else if (diceRoll == 2){
    diceImage.setImageResource(R.drawable.dice_2)
}else if (diceRoll ==3){
    ...
}else {
    ...

会发现重复的程序码一直出现，如果这时候改用 when 来处理呢？

when (diceRoll) {
    1 -> diceImage.setImageResource(R.drawable.dice_1)
    2 -> diceImage.setImageResource(R.drawable.dice_2)
    3 -> diceImage.setImageResource(R.drawable.dice_3)
    4 -> diceImage.setImageResource(R.drawable.dice_4)
    5 -> diceImage.setImageResource(R.drawable.dice_5)
    6 -> diceImage.setImageResource(R.drawable.dice_6)
   }

when 语句可以更简洁的完成相同的逻辑。

将这段语法放进宣告 diceImage 的下方，整个 APP 就正式完成啦！最後补上完整程序码：

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()
            rollDice()
        }
    }
    private fun rollDice(){
        val dice = Dice(6)
        val diceRoll = dice.roll()
        val diceImage: ImageView = findViewById(R.id.imageView) // 宣告diceImage
        when (diceRoll) {
            1 -> diceImage.setImageResource(R.drawable.dice_1)
            2 -> diceImage.setImageResource(R.drawable.dice_2)
            3 -> diceImage.setImageResource(R.drawable.dice_3)
            4 -> diceImage.setImageResource(R.drawable.dice_4)
            5 -> diceImage.setImageResource(R.drawable.dice_5)
            6 -> diceImage.setImageResource(R.drawable.dice_6)
        }

    }
}

class Dice(private val numSides: Int){    //numSides这个参数代表骰子会有的面数

    fun roll(): Int {
        return (1..numSides).random() //回传 1~骰子面数的随机数字
    }
}

最後的最後是不是忘记了甚麽，不能跟小智一样对比雕说我办完事马上回来，结果一抛弃就是抛弃22年。

坏。

还有 contentDescription 的问题要去处理，再按按钮更新图片之後，ImageView 的内容描述也要跟着更新，内容应该为当前骰子的数量。要记得补上去喔~

diceImage.contentDescription = diceRoll.toString()

骰子按钮系列就终於是结束啦，我在想是不是该拉回正题，还是我就继续这样慢慢学，把正题留到下次参赛，但我还是会写一些跟题目会使用到的功能啦。

今天先 John ，

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