こんにちは!
せのり(@senoriblog)です。
今回はAndroidアプリの画面遷移方法を紹介します。
アプリ開発において、画面遷移は必ずと言って良いほど頻繁に使用するロジックです。
商品一覧画面で商品を選択すると商品詳細画面に遷移する、
注文画面で注文を行って決済画面に遷移する、など。
あらゆる場面で使われています。
今回はボタンをクリックしたら、
次画面に遷移する方法を紹介したいと思います。
上記の内容で解説します。
それでは、順番にみていきましょう。
プロジェクト構成
例として「myapplication」というプロジェクトを作成しました。
※プロジェクト名は何でも好きなように設定できます。
但し、日本語や半角スペースは使用できません。
Androidプロジェクトの作成方法は以下を参照下さい。
-
-
【Android Studio】Gradle sync failed(同期失敗)エラーの対処方法
プロジェクトを作成すると2つのファイルができています。
- activity_main.xml
- MainActivity.java
今回は遷移元と遷移先の2画面が必要となるため、
上記に加えて遷移先の画面(SubActivity)を追加しました。
従って、以下の構成になっています。
- activity_main.xml
- MainActivity.java
- activity_sub.xml
- SubActivity.java
遷移元画面
画面レイアウトは以下の通りです。
まずはMainActivity.javaに画面遷移のロジックを追加します。
5,7,17~25行目が追加したソースです。
17~25行目はボタンをクリックした際に呼び出されるメソッドです。
なお、5,7行目は自分で記載しなくても、Android Studioが補完してくれます。
上記メッセージが表示されるので、Alt+Enterを押すと自動で追記してくれます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
package com.example.myapplication; import androidx.appcompat.app.AppCompatActivity; import android.content.Intent; import android.os.Bundle; import android.view.View; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } public void onClick(View v) { // ①インテントの作成 Intent intent = new Intent(this, SubActivity.class); // ②遷移先画面の起動 if (intent.resolveActivity(getPackageManager()) != null) { startActivity(intent); } } } |
画面遷移のポイントは以下の2つです。
②遷移先画面の起動
①はIntent
の第二引数に遷移したいActivity(ここではSubActivity)を指定します。
②は①で作成したIntent
を引数にstartActivity
を起動します。
次にactivity_main.xmlを編集して、レイアウトを作成します。
9~24行目が追加したソースです。
LinearLayout
の中にボタンを1つ作成しています。
このボタンをクリックすると、次画面に遷移するようにしたいので、
android:onClick="onClick"
として、クリックした時にonClick
メソッドを実行するように設定しています。
なお、onClick
の名称は任意で決めることができます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
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"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent"> <Button android:id="@+id/button_hello" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/button_hello" android:onClick="onClick"/> </LinearLayout> </androidx.constraintlayout.widget.ConstraintLayout> |
遷移先画面
画面レイアウトは以下の通りです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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=".SubActivity"> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello" android:textSize="50sp" android:textColor="#0000aa" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintLeft_toLeftOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
package com.example.myapplication; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; public class SubActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_sub); } } |
遷移先画面は特に編集不要です。
今回はテキストボックスを1つ追加しました。
ここまでで、遷移元画面でボタンをクリックすると、SubActivityが表示されます。
一度動作確認してみましょう。
画面が切り替われば成功です!