【Xamarin】C#でAndroidアプリを作ってみる 3 (画面作成1)

概要

前回：C#でAndroidアプリを作ってみる 2 (デバッグ実行)
今回は、ZodiacSignApp(干支×星座算出アプリ)の画面を作ります。

レイアウトの作成

ZodiacSignApp\Resources\layout\activity_main.xmlを開きます。
初期状態では、RelativeLayoutタグしかありません。

SELECT DATEボタンと選択日付の表示ラベルを追加します。
コードは以下の通りです。

activity_main.xml

<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">

    <Button
        android:text="SELECT DATE"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minWidth="25px"
        android:minHeight="25px"
        android:id="@+id/date_select_button" />

    <TextView
        android:id="@+id/selected_date_label"
        android:layout_height="match_parent"
        android:layout_width="wrap_content" 
        android:layout_below="@id/date_select_button"/>

</RelativeLayout>

日付選択ダイアログを表示する

SELECT DATEボタンを押下すると、日付選択ダイアログが表示されるイメージです。
Android 日付の選択を参考に作ります。

DatePickerFragmentクラスを作ります。
コードは以下の通りです。

DatePickerFragment.cs

using Android.App;
using Android.OS;
using Android.Widget;
using System;

namespace ZodiacSignApp
{
    /// <summary>
    /// 日付選択ダイアログフラグメント
    /// </summary>
    public class DatePickerFragment : DialogFragment, DatePickerDialog.IOnDateSetListener
    {
        // タグ
        public static readonly string TAG = "X:" + typeof(DatePickerFragment).Name.ToUpper();

        // 日付選択処理のデリゲート
        Action<DateTime> dateSelectedHandler = delegate { };

        /// <summary>
        /// インスタンス生成
        /// </summary>
        /// <param name="onDateSelected"></param>
        /// <returns></returns>
        public static DatePickerFragment NewInstance(Action<DateTime> onDateSelected)
        {
            var frag = new DatePickerFragment();
            frag.dateSelectedHandler = onDateSelected;
            return frag;
        }

        /// <summary>
        /// ダイアログ生成
        /// </summary>
        /// <param name="savedInstanceState"></param>
        /// <returns></returns>
        public override Dialog OnCreateDialog(Bundle savedInstanceState)
        {
            var now = DateTime.Now;
            var dialog = new DatePickerDialog(Activity, this, now.Year, now.Month - 1, now.Day);
            return dialog;
        }

        /// <summary>
        /// IOnDateSetListener.OnDateSetの実装
        /// </summary>
        /// <param name="view"></param>
        /// <param name="year"></param>
        /// <param name="month"></param>
        /// <param name="dayOfMonth"></param>
        public void OnDateSet(DatePicker view, int year, int month, int dayOfMonth)
        {
            var selectedDate = new DateTime(year, month + 1, dayOfMonth);
            dateSelectedHandler(selectedDate);
        }
    }
}

SELECT DATEボタン押下で日付選択ダイアログを表示するようにします。
コードは以下の通りです。

MainActivity.cs

using Android.App;
using Android.OS;
using Android.Support.V7.App;
using Android.Runtime;
using Android.Widget;
using System;

namespace ZodiacSignApp
{
    /// <summary>
    /// メインアクティビティ
    /// </summary>
    [Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]
    public class MainActivity : AppCompatActivity
    {
        // SELECT DATEボタン
        Button dateSelectButton;

        // 選択日付の表示ラベル
        TextView selectedDateLabel;

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            Xamarin.Essentials.Platform.Init(this, savedInstanceState);
            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.activity_main);

            selectedDateLabel = FindViewById<TextView>(Resource.Id.selected_date_label);
            dateSelectButton = FindViewById<Button>(Resource.Id.date_select_button);
            dateSelectButton.Click += DateSelectButton_Click;
        }

        /// <summary>
        /// SELECT DATEボタン押下時の処理
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void DateSelectButton_Click(object sender, System.EventArgs e)
        {
            var frag = DatePickerFragment.NewInstance(delegate (DateTime time)
            {
                selectedDateLabel.Text = time.ToString("yyyy年MM月dd日");
            });
            frag.Show(FragmentManager, DatePickerFragment.TAG);
        }

        public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
        {
            Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);

            base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
        }
    }
}

実行してみる

実機でデバッグ実行します。

SELECT DATEボタンをタップします。

日付を選択して、OKをタップします。

日付が選択できました。

まとめ

今回は、レイアウトを作成し、日付選択ダイアログから日付を選択するところまでを行いました。
次回は、選択した日付の干支×星座算出を行います。
次回分はこちら⇒C#でAndroidアプリを作ってみる 4 (画面作成2)