前回書いたC#のandroidアプリの作成方法の続き(補足)として、今回は一つのアプリ内で別のページを表示する方法について書いていこうと思います。
基本的には、デフォルトで生成されたコードを読み解けばわかる内容ではあるので、読まなくてもわかるという方はスルーしてください(笑)
下記が前回書いた記事ですので、今回の内容がわからない、もしくは単純に興味があるという方は見ていただけるとありがたいです。
https://qiita.com/NagaJun/items/87f126249028fa2b23a0
実装
前回の記事で書いた内容(プロジェクト作成時に自動で作成されるコード)を前提として、コードを書いていきます。
前提としては、/Resource/Layout/
フォルダー下にページデザイン用のファイルであるcontent_main.xml
とactivity_main.xml
があり、動きを制御するコードとしてMainActivity.cs
があります。
今回のサンプルを作成するために以上の三つのファイルを修正します。
修正内容は以下の通りです。
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
android:background="#ffffe0">
<TextView
android:text="activity_main_page"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px"
android:id="@+id/textView1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="change view content_menu"
android:id="@+id/btn_show_content_main_page"
android:layout_marginTop="@dimen/design_bottom_navigation_active_item_max_width"
>
</Button>
</android.support.design.widget.CoordinatorLayout>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:background="#ffd700"
>
<TextView
android:text="content_main"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="25px"
android:minHeight="25px"
android:id="@+id/textView1"
android:layout_marginBottom="35.5dp"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="change view activity"
android:id="@+id/btn_show_activity_main_page"
android:layout_marginTop="@dimen/design_bottom_navigation_active_item_max_width"
>
</Button>
</RelativeLayout>
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
public class MainActivity : AppCompatActivity
{
/// <summary>content_mainページ表示用ボタン</summary>
private Button BtnShowContent { get; set; }
/// <summary>activity_mainページ表示用ボタン</summary>
private Button BtnShowActivity { get; set; }
/// <summary>アプリ起動時</summary>
/// <param name="savedInstanceState"></param>
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
Xamarin.Essentials.Platform.Init(this, savedInstanceState);
// 初期ページを表示
SetContentView(Resource.Layout.activity_main);
// contentページ表示ボタン
BtnShowContent = FindViewById<Button>(Resource.Id.btn_show_content_main_page);
BtnShowContent.Click += BtnShowContent_Click;
}
/// <summary>contentページ表示イベント</summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void BtnShowContent_Click(object sender, EventArgs e)
{
SetContentView(Resource.Layout.content_main);
// activityページ表示ボタン
BtnShowActivity = FindViewById<Button>(Resource.Id.btn_show_activity_main_page);
BtnShowActivity.Click += BtnShowActivity_Click;
}
/// <summary>activityページ表示イベント</summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void BtnShowActivity_Click(object sender, EventArgs e)
{
SetContentView(Resource.Layout.activity_main);
// contentページ表示ボタン
BtnShowContent = FindViewById<Button>(Resource.Id.btn_show_content_main_page);
BtnShowContent.Click += BtnShowContent_Click;
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
不要なコードは全て省いてあるため、必要に応じて調整してください。
activity_main.xml
とcontent_main.xml
に関しては、今回サンプルとして記述した内容をそのままコピペしてもらえば大丈夫かと思います。
元のactivity_main.xml
には<include Layout=~>
という記述があったかと思いますが、その記述でcontent_main.xml
の内容を読み込んでいるみたいなので、その記述は消してあります。(画面遷移を見たいので、ページを入れ子で読み込ませてあるとわかりにくいため)
今回、MainActivity.cs
に対して記述した内容は、各ページのボタンクリック時にSetContentView()
で別ページを表示するようにしてあります。
ここで注意点ですが、FindViewById()
で取得できるオブジェクト(今回の場合だとButton)は処理時に画面上に存在しているものに限られるため、OnCreate()
メソッド内で初期画面に表示されないbtn_show_activity_main_page
ボタンを取得することはできません。
また、画面が切り替わると取得済みのボタンのコントロールが失われるため、ページを切り替えるたびにオブジェクトの取得とイベントの設定を行う必要があります。(設定したはずのイベントも失われます)
動作確認
上記の修正を加えたら、前回同様の手段でデバッグを行います。
挙動は単純で下記画像の様な画面が立ち上がり、CHENGE VIEW~
ボタンを押すたびに画面が切り替わります。
背景色と文字列が変わっているだけなので、一見、プロパティをいじっているだけにも見えますが(笑)
もっとわかりやすい変化を見たいという方は.xmlファイルを修正してみるとよいかと思います。
終わりに
今回調べていて知ったのですが、.xmlファイルに記述する内容に関しては、android studioでアプリを作成する場合と基本的に同じなんですね(当然といえば当然ですが)
C#のandroidアプリより、android studioの情報の方が、ネット上の先人の知恵が多いので助かります(笑)