今回は、
アプリケーションをダウンロードして実行する
iOS版と同様に、
![Androidのテンプレートをダウンロード Androidのテンプレートをダウンロード](/assets/images/dev/serial/01/wams/0004/thumb/TH800_001.png)
ダウンロードしたzipを解凍し後フォルダをリネームして、
![iOS版のあるフォルダにリネームして展開する iOS版のあるフォルダにリネームして展開する](/assets/images/dev/serial/01/wams/0004/002.png)
Xamarinにて既存のプロジェクトとして追加します。
![既存のプロジェクトを選択する 既存のプロジェクトを選択する](/assets/images/dev/serial/01/wams/0004/thumb/TH800_003.png)
![Androidのcsprojを選択する Androidのcsprojを選択する](/assets/images/dev/serial/01/wams/0004/thumb/TH800_004.png)
追加したプロジェクトを
![スタートアッププロジェクトとして設定 スタートアッププロジェクトとして設定](/assets/images/dev/serial/01/wams/0004/thumb/TH800_005.png)
Debugを実行し、
![エミュレータを起動 エミュレータを起動](/assets/images/dev/serial/01/wams/0004/thumb/TH800_006.png)
エミュレータが起動して、
![最新の状態に更新 最新の状態に更新](/assets/images/dev/serial/01/wams/0004/thumb/TH800_007.png)
「device」
![アプリ起動 アプリ起動](/assets/images/dev/serial/01/wams/0004/thumb/TH800_008.png)
iOS版と異なり、
Androidアプリに画面を追加する
それではiOS版と同じように詳細画面を追加してみましょう。Androidの場合は、
詳細画面のLayoutファイルを追加する
右クリックから
![新しいファイルを選択する 新しいファイルを選択する](/assets/images/dev/serial/01/wams/0004/thumb/TH800_009.png)
「Android Layout」
![Activity_To_Do_Detailを作成する Activity_To_Do_Detailを作成する](/assets/images/dev/serial/01/wams/0004/thumb/TH800_010.png)
詳細画面のLayoutファイルを編集する
「Activity_
![TextViewを2つ配置する TextViewを2つ配置する](/assets/images/dev/serial/01/wams/0004/thumb/TH800_011.png)
画面の余白をクリックして、
![horizontalに変更する horizontalに変更する](/assets/images/dev/serial/01/wams/0004/thumb/TH800_012.png)
「TextView」
![サイズを変更する サイズを変更する](/assets/images/dev/serial/01/wams/0004/013.png)
Textに
![タイトルと入力する タイトルと入力する](/assets/images/dev/serial/01/wams/0004/thumb/TH800_014.png)
一覧画面を編集する
一覧画面は次のように2つのxamlで構成されています。
![一覧画面の構成 一覧画面の構成](/assets/images/dev/serial/01/wams/0004/015.png)
今回は、
Row_
![Textの中身を消す Textの中身を消す](/assets/images/dev/serial/01/wams/0004/thumb/TH800_016.png)
続いて、
![TextViewを追加 TextViewを追加](/assets/images/dev/serial/01/wams/0004/thumb/TH800_017.png)
このままだとチェックボックスと表示位置がずれるので、
すると良い感じで表示されるようになります。ついでにIdも他とかぶらないように
![Idを変更する Idを変更する](/assets/images/dev/serial/01/wams/0004/thumb/TH800_018.png)
一覧画面のイベントを編集する
レイアウトができたので、
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クラスがないなど複数の原因があります。手動でクラスを追加しても良いのですが、
Option+Command+↓を押すとエラーメッセージの箇所にジャンプします。その状態でOption+Enterをおして
![「using Android.Content」を選択する 「using Android.Content」を選択する](/assets/images/dev/serial/01/wams/0004/thumb/TH800_019.png)
同様の操作を行い、
![「Create class」を選択します 「Create class」を選択します](/assets/images/dev/serial/01/wams/0004/thumb/TH800_020.png)
詳細画面のActivityを編集する
新たに作成された
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;
}
}
}
これで、
![詳細画面 詳細画面](/assets/images/dev/serial/01/wams/0004/thumb/TH800_021.png)