【超初心者向け】Android入門 画面遷移編

はじめに

前回まではViewの表示の仕方など学んできました。
今回は画面遷移の方法を学んでいきます。
以前にも紹介しましたがこのシリーズはTodoアプリを作ることが目標です。
Todoアプリは

• 一覧画面
• 詳細画面
• 追加画面

少なくともこの3つの画面がなければいけないので画面遷移が必須となってきます。

記事の対象

• Androidアプリ開発初心者
• Androidをこよなく愛する人
• 前回の記事を読んだ方

そもそも画面ってどうやって構成されてるの？

今までActivityについては何も言及してきませんでしたが、複数の画面を扱うにあたってActivityを紹介していきたいと思います。

Activityとは?
公式リファレンスのAndroid Developersを見ると何やらややこしいことが書いてありますが、Activityを一言で表すのであれば画面のことです。
1画面1Activityで構成されていて、新しい画面を作りたい場合は新しいActivityを生成すればいいのです。

※当記事は初心者向けのため、わかりやすく1画面1Activityと書いてありますが、正確にはそうではありません。ですがここでFragmentの説明も加えてしまうと記事の量が膨大になる&初学者の方の理解の妨げになるためそう説明しています。ご了承ください。

1.新しいActivityを作ってみる。

現在存在しているのはMainActivityです。
遷移先のActivityの名前はTestActivityにしましょう。

まずはAndroid Studioでapp/java/your_packagenameを右クリックしNew→Kotlin File/Classをクリックし、TestActivityと入力しclassを押下します。

そうすると、

TestActivity.kt

class TestActivity {
}

こんな感じでTestActivityが生成されていると思います。ただこれだけだとActivityとして認識してもらえないためAppCompatActivityを継承させます。

TestActivity.kt

class TestActivity : AppCompatActivity() {
}

こんな感じでOKですね！

2. 遷移先のレイアウトを作ってみる

簡単に遷移先のレイアウトを作ってみましょう。

今度はapp/res/layoutを右クリックし、New→Layout Resource fileをクリックします。File名にactivity_testと入力し、OKをクリックします。
そうすると

activity_test.xml

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

</androidx.constraintlayout.widget.ConstraintLayout>

こんな感じのxmlファイルが生成されると思います。

ConstraintLayoutである必要がないので前回と同様にLinearLayoutにしていきましょう。

activity_test.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">

</LinearLayout>

これでOKですね！
遷移したとわかるように何か適当なTextViewを配置しておきましょう

activity_test.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="30dp"
        android:text="Success"
        android:textColor="@android:color/black"
        android:textSize="24sp" />

</LinearLayout>

遷移したらSuccessと表示するようにしました。わかりやすいですね。

TestActivityにこのレイアウトを読み込ませる処理をしましょう

TestActivity.kt

class TestActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_test)
    }
}

onCreateのなかでsetContentViewをするとレイアウトを読み込んでくれます。

最後にAndroidManifest.xmlにこのActivityを認識させます。

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.helloworld">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.HelloWorld">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".TestActivity"/>
    </application>

</manifest>

<activity android:name=".TestActivity"/>

この1文を追加しました。

これをしないと画面遷移したときに「知らないActivityだよ！」と怒られてしまいます。

3. MainActivityを編集する

今MainActivityには前回のRecyclerViewを表示するAdapterやViewHolderなどが書かれていると思いますが、とりあえず全部消しちゃいましょう！
ついでにactivity_main.xmlも編集してButtonだけにしちゃいましょうか

MainActivity:kt

class MainActivity : AppCompatActivity() {

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

        val button = findViewById<Button>(R.id.button)
        button.setOnClickListener { 
            
        }
    }

}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="遷移！"
        android:textSize="24sp"/>

</FrameLayout>

さらっとFrameLayoutを使っていますが、説明は割愛させていただきます。

MainActivityを編集して、ボタンを押しても何もしないというところまで来ましたね

4. 遷移する

さぁここからが本題です。実際に画面遷移をしていきましょう。
画面遷移に必要になってくるのはIntentというものです。

Intentとは？

インテントを使用すると、実行したい簡単なアクション（「地図を表示する」、「写真を撮る」など）を Intent オブジェクトに記述することによって、別のアプリでアクティビティを開始できます。

Intentを使うと別のActivityを開始してくれるそうですね。

ではどうやって使うのか解説していきます。

val intent = Intent(this, TestActivity::class.java)
startActivity(intent)

まずはIntentのインスタンスを作成します。
第一引数にはcontext、第二引数には開始させたいActivityを記述していきます。第一引数はおまじないと思ってもらって構いません。
インスタンスが生成できたらstartActivityの引数にそのインスタンスを渡してあげると、Activityを開始してくれます。

先ほどのsetOnClickListenerの中に記述していきましょう。

MainActivity.kt

class MainActivity : AppCompatActivity() {

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

        val button = findViewById<Button>(R.id.button)
        button.setOnClickListener {
            val intent = Intent(this, TestActivity::class.java)
            startActivity(intent)
        }
    }

}

こんな感じになりましたね！

5.実行

さぁ実行していきましょう！

筆者は上手く画面遷移できましたが皆さんはどうでしょうか？

まとめ

今回は画面遷移について学んでいきました。
次回から本格的にTodoアプリを作っていこうかと思っています