Androidアプリ開発 初級編 （ボタン押下処理実装）

投稿者 投稿日:

せっかくなので、初心に帰りUdacityを参照しながらAndroidアプリ開発の初歩的な知識を復習としてやっていきたいと思います。意外と知らないこともあるかもしれません…

■Android Studioのインストール

公式サイトからAndroid Studioをインストールしましょう。

記事作成時のバージョンは4.1.2ですが、最新版を常に使うようにしてください。実際の開発現場によってはバージョン指定があるかもしれません。

https://developer.android.com/studio?hl=ja&gclid=Cj0KCQiA3smABhCjARIsAKtrg6LYs2fPaIlFgBWG9sqz4O-pYUfmBsJf52P1GiurFB9pTE2a_CGE6dsaAiteEALw_wcB&gclsrc=aw.ds

■プロジェクト作成

New Project -> Empty Activity

特にjavaを使う理由がなければ言語はkotlinを選びましょう。デフォルトでkotlinになっていると思うのでfinishを押して作成します。

プロジェクトを作成したら、tools -> AVD Managerを起動して左下のCreate Virtual Device… ボタンを押してAndroidデバイスのエミュレーターを作成します。

基本的にはPhoneでPixelの最新版、System ImageもAPI Levelが最新版のものを使って作成しましょう。advance Settingにてメモリなど詳細に設定することも出来るので動作PCのスペックに合わせてお好みの設定にすると良いです。

もちろんAndroid端末がある方はPCに接続して実機動作確認も行うことが出来ます。その際はAndroid端末のAPIレベルに合わせてプロジェクトを変更する必要があるかもしれませんので、今回はエミュレーターをメインに進めます。

■動作確認

Shift + F10 でエミュレーター + アプリを起動してHello World!が表示されることを確認しましょう。

正常に動作出来ましたか？

一先ずこれで物凄く簡単にアプリケーションのプロジェクトの雛形を作成することが出来ました。あとはコードをいじるのみです。

■サンプルアプリを作る

ボタンを押してサイコロを振るアプリを作ってみます。

※GoogleがUdacityで作成手順を詳しく説明しています。英語動画ですが、字幕を日本語翻訳で表示することが出来ます。

まずはレイアウトファイルを弄りましょう。

res > layout > activity_main.xml を開いて以下のように設定してみてください。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/diceImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Roll"
        app:layout_constraintTop_toBottomOf="@+id/diceImage"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

AndroidにはレイアウトのWigetが複数あり、状況に応じて使うことになります。代表的なものはFrameLayout、RelativeLayout、LinearLayout、ConstraintLayoutなどです。ほかにもTableLayoutなどありますのでアプリケーションのUI設計に合わせて選ぶと良いです。今回はデフォルトのViewをフラットにLayoutを組むことができるConstraintLayoutを使用してみます。

UdacityではLinearLayoutを使っているので是非受講してみてください。

それでは書き換えたら早速ctrl + F10で変更を反映してみましょう。

ボタンが表示されれば問題ありません。

しかし、このままではボタンを押しても何も反映されないので、ボタンが押された時の処理を実装します。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val button: Button = findViewById(R.id.button)
        button.setOnClickListener { /* ボタン押下時の処理 */ }
    }
}

buttonの変数にボタンの参照を代入します。

findViewByIdというメソッドの引数にレイアウトのButtonに記載したandroid:id=”@+id/button”を R.id.button という形で渡すことでButtonの参照を取得することが出来ます。

取得したButtonのインスタンスに対しsetOnClickListenerでクリックされたときの振る舞いを設定します。コードのコメント部分に押下時の処理を追加していくことになります。実際の処理は後ほど実装します。

次にサイコロを表示する画像を用意したいと思います。

Udacityからサイコロの画像ファイルをダウンロードしてください。Developing Android Apps with kotlin の20項目にあります。

zipファイルを展開したら res > drawable にドラックアンドドロップしてRefactorボタンを押すと追加することができます。

次に初期画像が表示されるようにレイアウトを変更します。

    <ImageView
        android:id="@+id/diceImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/empty_dice"
        tools:src="@drawable/dice_1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent" />

android:srcでImageViewに表示する画像を設定することができます。パラメータは@drawable/empty_diceで、先ほどdrawableディレクトリに追加した画像のファイル名を指定しています。

※以下は余談なので読み飛ばしてもらって構いません。

tools:srcにはdice_1を指定しており、レイアウトデザインのUIを確認するときに使います。今回のように空の画像を表示している場合はデザインの確認が困難なためtools:srcに指定することでレイアウトエディタのDesignから確認することが可能になります。toolsで指定した箇所は実際にアプリをビルドする際には削除されますのでリリースには影響ありません。

ボタン押下によってサイコロを振る処理を実装します。

class MainActivity : AppCompatActivity() {
    lateinit var diceImageView: ImageView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val button: Button = findViewById(R.id.button)
        diceImageView = findViewById(R.id.diceImage)
        button.setOnClickListener { rollDice() }
    }

    private fun rollDice() {
        val randomInt = Random.nextInt(6) + 1
        val diceDrawable = when (randomInt) {
            1 -> R.drawable.dice_1
            2 -> R.drawable.dice_2
            3 -> R.drawable.dice_3
            4 -> R.drawable.dice_4
            5 -> R.drawable.dice_5
            else -> R.drawable.dice_6
        }
        diceImageView.setImageResource(diceDrawable)
    }
}

これでRollボタンを押してサイコロを振ることが出来るようになりました。早速ctrl + F10で確認しましょう。

ここでもう一度コードを確認してみるとrandomInt変数の下に波線が表示されています。

カーソルを合わせると変数の使用箇所にinlineで書くこと出来るぞっていうことを知らせてくれています。alt + shift + enter を実行すると自動で書き換えてくれます。

このようにちょっとしたコードの警告や、importしていないclassなどは赤字で警告してくれますので、alt + shift + enter を使って解消していきましょう。

試しにactivity_mainのレイアウトファイルを確認してRollボタンのテキストをstrings.xmlで定義するようにalt + shift + enter を活用してみてください。

values > string.xml にrollの定義が自動で作られると思います。

■まとめ

・レイアウトファイルをActivityが読み込むことでアプリケーションの表示が出来るようになっている

・レイアウトファイルに定義したViewをfindViewByIdで参照を取得し、取得したView操作を定義出来る

・Android Studioにはコードの警告を自動で変換してくれる機能がある(もちろんすべてに対応してはいません)

・アプリケーションに使う画像ファイルはdrawableフォルダに追加する

ざっと最初はこんなイメージを掴めていれば特に問題ないと思います。

実際に作ってみるとこんなに簡単に作れることに驚いたのではないでしょうか。

あとは他のViewを試したり、localストレージと連携してみたり、Webサービスと連携してみたり、便利なフレームワークを活用してみたり….

まだまだ様々なことが出来ますのでまた学習(復習もですが)していきたいと思います。

それでは今回はこれで終わります。ここまでお付き合いいただきありがとうございました。

投稿者: tomo

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です