【マインスイーパー開発 #6】ImageViewをアニメーションでボタンっぽくする｜Android & Kotlinアプリ開発

Android ＆ Kotlinの環境でマインスイーパーを開発する方法を説明します。

前回配置した「リセットボタン」はImageViewなのでタッチしても何も反応がありません。

そのため、アニメーションを使ってボタンっぽいエフェクトをつけてみます。

そそたた

わざわざImageViewにしている理由は特にありません。

ImageButtonやButtonなども使えそうですが、独自のボタンエフェクトを付けようと思ってシンプルそうなImageViewを使用しています。

動作イメージ

画面上段真ん中に配置している黄色のが「リセットボタン」です。

タッチすると少しだけ縮小するアニメーションを使ってボタンっぽいエフェクトをつけています。

ソースコード

開発環境は次の通りです。

package com.sosotata.minesweeper.ui.main

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.view.animation.Animation
import android.view.animation.ScaleAnimation
import androidx.fragment.app.Fragment
import androidx.lifecycle.ViewModelProviders
import com.sosotata.minesweeper.R
import com.sosotata.minesweeper.model.TileController
import com.sosotata.minesweeper.model.TileType
import kotlinx.android.synthetic.main.game_fragment.*

class GameFragment : Fragment() {
    companion object {
        fun newInstance() = GameFragment()
    }

    private lateinit var viewModel: GameViewModel

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                              savedInstanceState: Bundle?): View {
        return inflater.inflate(R.layout.game_fragment, container, false)
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)
        viewModel = ViewModelProviders.of(this).get(GameViewModel::class.java)

        viewModel.tile = TileController.create(TileType.Square)
        viewModel.tile.initialize(requireContext())
        squareView.initialize(viewModel.tile)

        resetButton.setOnClickListener {
            val btnEffect = ScaleAnimation(
                1.0f, 0.9f, 1.0f, 0.9f,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f)
            btnEffect.duration = 100
            btnEffect.setAnimationListener(object : Animation.AnimationListener {
                override fun onAnimationStart(animation: Animation) {}
                override fun onAnimationRepeat(animation: Animation) {}
                override fun onAnimationEnd(animation: Animation) {
                    // アニメーション完了後にやらせる処理を書く
                }
            })
            resetButton.startAnimation(btnEffect)
        }
    }
}

解説

ボタンっぽいエフェクトは、100ミリ秒間かけて中心を基点に90%縮小するアニメーションをScaleAnimationを使って実現しています。

val btnEffect = ScaleAnimation(
    1.0f, 0.9f, 1.0f, 0.9f,
    Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f)
btnEffect.duration = 100