第4回　Xamarinを使ってAndroid向けアプリを開発

今回は、Xamarinを使用してAndroid向けのアプリを開発します。

アプリケーションをダウンロードして実行する

iOS版と同様に、ポータルサイトのプラットフォームにてAndroidを選択して「ダウンロード」をクリックします。

ダウンロードしたzipを解凍し後フォルダをリネームして、前回作成したソリューションのフォルダにコピーします。

Xamarinにて既存のプロジェクトとして追加します。

追加したプロジェクトを「スタートアッププロジェクトとして設定」にします。

Debugを実行し、任意のデバイスを選択して「Start Emulator」でエミュレータを起動します。

エミュレータが起動して、待ち受け画面になったら「最新の状態に更新」をクリックして、「⁠not started」から「device」の表示に変わることを確認します（筆者環境だと3分ぐらい更新されないこともあります⁠）⁠。

「device」と表示が変わったデバイスを選択して、OKをクリックすると、エミュレータにアプリが表示されます。

iOS版と異なり、画面を下に引っ張って更新といった機能は用意されておらず、更新したいときはREFRESHボタンをタッチしてくだださい。タスクの完了方法も異なりチェックボックスをタッチすることで完了となります。

Androidアプリに画面を追加する

それではiOS版と同じように詳細画面を追加してみましょう。Androidの場合は、iOS版と異なりXcodeなどの外部アプリケーションを使用せず、Xamarin内蔵のUIデザイナーを使用します。

詳細画面のLayoutファイルを追加する

右クリックから「追加 - 新しいファイル」を選択します。

「Android Layout」を選択し、名前に「Activity_To_Do_Detail」と入力し、「⁠新規」をクリックします。

詳細画面のLayoutファイルを編集する

「Activity_To_Do_Detail.axml」を編集してタイトルを表示できるようにする。Toolboxから「TextView」を2つドラッグアンドドロップで配置します。

画面の余白をクリックして、「⁠LinearLayout」を選択したら、プロパティのOrientationを「vertical」から「horizontal」に変更します。

「TextView」の右端をつかんで左にドラッグして、大体半分ぐらいのちょうど良いサイズになるようにします。

Textに「タイトル」を入れます。

一覧画面を編集する

一覧画面は次のように2つのxamlで構成されています。

今回は、テキスト部分をタッチして詳細画面に進むように改造を加えてみます。改造前はテキスト部分をタッチすると、チェックがONになってしまいタスクが消えてしまいますので、チェックボックスとテキストは分離させます。

Row_List_To_Do.axmlを開いて、チェックボックスのテキスト「@string/checkbox_text」を消します。

続いて、TextViewを追加します。

このままだとチェックボックスと表示位置がずれるので、追加したTextViewを選択して、左上の「▼」をクリックします。

すると良い感じで表示されるようになります。ついでにIdも他とかぶらないように「@+id/listTitle」のようにしておきましょう。

一覧画面のイベントを編集する

レイアウトができたので、先ほど追加した一覧のTextViewにタッチされたときのイベントを追加しましょう。「⁠ToDoItemAdapter.cs」を開いて、GetViewメソッドを次のように書き換えてください。

public override View GetView (int position, Android.Views.View convertView, Android.Views.ViewGroup parent)
{
    var row = convertView;
    var currentItem = this [position];
    CheckBox checkBox;
    TextView textView;

    if (row == null) {
        var inflater = activity.LayoutInflater;
        row = inflater.Inflate (layoutResourceId, parent, false);

        checkBox = row.FindViewById <CheckBox> (Resource.Id.checkToDoItem);

        checkBox.CheckedChange += async (sender, e) => {
            var cbSender = sender as CheckBox;
            if (cbSender != null && cbSender.Tag is ToDoItemWrapper && cbSender.Checked) {
                cbSender.Enabled = false;
                if (activity is ToDoActivity)
                    await ((ToDoActivity)activity).CheckItem ((cbSender.Tag as ToDoItemWrapper).ToDoItem);
            }
        };

        // textViewのクリックイベントを追加
        textView = row.FindViewById<TextView> (Resource.Id.listTitle);
        textView.Click += (sender, e) => {
            var intent = new Intent(activity, typeof(ToDoDetailActivity));
            intent.PutExtra("item", JsonConvert.SerializeObject(currentItem)); 
            activity.StartActivity(intent);
        };

    } else {
        checkBox = row.FindViewById <CheckBox> (Resource.Id.checkToDoItem);
        textView = row.FindViewById <TextView> (Resource.Id.listTitle);
    }

    textView.Text = currentItem.Text;
    checkBox.Checked = false;
    checkBox.Enabled = true;
    checkBox.Tag = new ToDoItemWrapper (currentItem);

    return row;
}

この状態でビルドするとエラー画面が表示されます。これはToDoDetailActivityクラスがないなど複数の原因があります。手動でクラスを追加しても良いのですが、XamarinのQuick Fixを使ってエラーを解消していきましょう。

Option＋Command＋↓を押すとエラーメッセージの箇所にジャンプします。その状態でOption+Enterをおして「using Android.Content」を選択しますと先頭行に「using Android.Content;」が追加され、ビルドエラーが1つ解消します。

同様の操作を行い、ToDoDetailActivityのところでは「Create class」を選択し、JsonConvertでは「using Newtonsoft.json;」を選択します。

詳細画面のActivityを編集する

新たに作成された「ToDoDetailActivity.cs」は次のように書き換えてください。

using System;
using System.Collections.Generic;
using Android.App;
using Android.Content;
using Android.OS;
using Android.Views;
using Android.Widget;
using Newtonsoft.Json;

namespace nnasaki_gi
{
    [Activity (Label = "ToDoDetailActivity")]            
    public class ToDoDetailActivity : Activity
    {
        protected override void OnCreate (Bundle bundle)
        {
            base.OnCreate (bundle);

            // Layoutを関連づける
            SetContentView (Resource.Layout.Activity_To_Do_Detail);

            // 前の画面のデータをデシリアライズする
            var str = this.Intent.Extras.GetString ("item");
            var item = JsonConvert.DeserializeObject<ToDoItem> (str);

            // タイトルを表示する
            var textView2 = FindViewById <TextView> (Resource.Id.textView2);
            textView2.Text = item.Text;
        }
    }
}

これで、TextViewをタッチすると詳細画面を表示するようになりました。