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

#概要
前回：[C#でAndroidアプリを作ってみる 2 (デバッグ実行)](https://qiita.com/plusM/items/87b386f4051c74cad461)
今回は、ZodiacSignApp(干支×星座算出アプリ)の画面を作ります。

# レイアウトの作成
ZodiacSignApp\Resources\layout\activity_main.xmlを開きます。
初期状態では、RelativeLayoutタグしかありません。

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

```xml: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 日付の選択](https://docs.microsoft.com/ja-jp/xamarin/android/user-interface/controls/pickers/date-picker)を参考に作ります。

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

```cs: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ボタン押下で日付選択ダイアログを表示するようにします。
コードは以下の通りです。

```cs: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);
        }
    }
}
```

# 実行してみる
実機でデバッグ実行します。
![アプリ開始.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520699/1820b48a-3634-3b90-57dc-7b3f55193931.png)
SELECT DATEボタンをタップします。
![日付選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520699/791573cd-a3a5-6fea-6c5b-118b02f5cb10.png)
日付を選択して、OKをタップします。
![選択日付表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520699/b46ec8e1-0fdc-1abe-fe6a-5cb763b0cb3e.png)
日付が選択できました。

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