Androidアプリ/日記5
入力フォームを作ろう
Activityの設計もできたので、実際にActivityの詳細を実装していきます。まずはInputWeightアクティビティから始めてみることにします。これは体重を入力するして記録するというアクティビティになります。まずは入力を受け付ける画面設計から考えていきます。
画面設計
レイアウト
画面のレイアウトはres/layout/input.xmlの中で設定していきます。とりあえずeclipseで上記のファイルを開いてみると、XMLを編集するエディタが大きく表示され、ルート要素にLinearLayoutという要素が設定されています。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</LinearLayout>
この要素の中に子要素を配置していくとうまいことレイアウトしてくれるのだそうです。レイアウトの種類はいくつかあるようですので、例示してみます。
| レイアウト要素名 | 特徴 |
| LinearLayout | 要素を一方向に順番に配置していくレイアウト |
| TableLayout | 表組みの中に子要素を配置していくレイアウト |
| RelativeLayout | 要素間で相対的に位置を指定するレイアウト |
| AbsoluteLayout | 子要素の画面上の絶対位置を指定できるレイアウト |
| FrameLayout | 全ての子要素の左上を一点に合わせるレイアウト |
入力フォームは入力項目を列挙していくだけなのでLinearLayoutのままでよさそうです。
ただし、LinearLayoutが子要素を並べていく方向が標準では横方向なので、orientationプロパティを「vertical」に変更して縦方向にします。
また、横幅は画面いっぱい広がるようにLayout_widthをfill_parent
それでは中に「計測日時」「体重」「体脂肪率」の3つの入力欄と入力値を「記録」するボタンを配置してみましょう。
入力欄とボタン
3つの入力欄はそれぞれ入力値が「数値」「数値」「日時」です。手軽に入力できるようにできる限り入力支援をつけてみたいところですが、Androidの標準機能はどこまでできるのでしょう。
まず、最初に「体重」の入力欄を設けます。eclipseではXMLを直接編集する方法と、Outlineエリアで＋ボタンを押して要素を追加する方法があるようですが、XMLを直接書くほどの知識はまだないので、OutlineエリアでLinearLayoutを選択し、そこに＋ボタンを使って要素を追加してみることにしました。要素の追加用のダイアログが表示されると、追加可能な要素が列挙されていますので、EditTextを選択して「OK」ボタンを押します。するとOutlineエリアにEditTextが追加されます。
同様にしてEditTextをもう一つとDatePickerとTimePickerとButtonを追加しました。
続いて、追加したばかりのEditTextをOutlineエリアで選択すると、eclipseのPropertiesエリアで要素のプロパティが設定できるようになりました。プロパティがいっぱいあってどれが何を示しているのか勉強しなくてはいけないですね。
EditTextには追加された初期状態で以下のようなプロパティが予め設定されていました。
| プロパティ名 | 値 | プロパティの内容 |
| text | @+id/EditText01 | 入力されている内容 |
| id | @+id/EditText01 | 要素の識別子 |
| layout_width | wrap_content | 要素の横幅サイズ |
| layout_height | wrap_content | 要素の縦幅サイズ |
DatePickerやTimePickerは日時を扱う入力欄なのでtextプロパティはありません。
Buttonにもtextプロパティがありますが、これはボタンのラベルとして表示されるようです。
IDが適当に采番されていると制作中わかりにくいので、意味にあったIDを振ることにします。また、layout_widthの設定は横いっぱいにサイズを設定してくれる「fill_parent」の方がよさそうです。
# ここで設定したレイアウトを即時に確認できるツールがあればいいなぁとちょっと思いました。
EditTextのtextは消してしまって、入力前は空の状態でよさそうです。
Buttonのtextは「記録する」などのボタンの意味をあらわす文字にしたいです。
同様にEditTextにも何を入力するかわかるようにhintプロパティを設定します。
EditTextには数値だけ入力できればいいので、inputTypeプロパティを「number」にします。結果、以下のようなXMLができました。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content" android:orientation="vertical" android:layout_width="fill_parent">
<EditText android:text="" android:layout_height="wrap_content"
android:id="@+id/EditTextWeight" android:layout_width="fill_parent"
android:hint="@string/weightinput" android:inputType="number"></EditText>
<EditText android:text="" android:layout_height="wrap_content"
android:id="@+id/EditTextFatPercentage" android:layout_width="fill_parent"
android:hint="@string/fatpercentageinput"
android:inputType="number"></EditText>
<DatePicker android:layout_height="wrap_content"
android:id="@+id/DatePickerWeight"
android:layout_width="fill_parent"></DatePicker>
<TimePicker android:layout_height="wrap_content"
android:id="@+id/TimePickerWeight"
android:layout_width="fill_parent"></TimePicker>
<Button android:layout_height="wrap_content"
android:id="@+id/ButtonLog" android:text="@string/buttonLog"
android:layout_width="fill_parent"></Button>
</LinearLayout>
どんな見栄えになっているかエミュレートしてみたところ、特にかっこいいデザインにはなっていませんが、必要な条件は満たしていそうです。DatePickerやTimePickerは何も指定しなければ、標準的に現在の日時を表示してくれるようですので、体重を計測した後すぐに入力するのに適していそうです。
なお、ボタンのキャプションや数値入力欄のヒントには、res/values/strings.xmlで定義した英字が入るように指示されています。後でstringsの設定をしたときのことも日記に起こしておきます。
入力フォームで入力された数値の取り扱いは、javaのプログラム「InputWeight.java」に書いていくことになります。その前にいくつか別のトピックを取り上げていこうと思います。