前回までで、新しいプロジェクトを作る事ができました。
ここからは実際のコーディングに入って行きます。
完成形の確認
まず、完成形を確認しましょう。
インストールすると、アプリランチャーにアイコンが表示されます。
今回は特にアイコン画像を指定していないのでデフォルトのアイコンがでます。
アイコンをクリックすると↓の様な画面が表示されます。
「Click!!」ボタンを押すと、下のEditTextビューに「Hello World!!」が表示されます。
これだけのアプリです。
ちょっと、つまらないかも知れませんが、これで結構覚えるポイントがありますので、
一つずつ見て行きましょう。
レイアウトXMLの編集
まず、画面レイアウトの設計から始めます。Androidアプリの画面レイアウトはベタベタにコーディングしても書けるのですが、基本的にはXMLで定義します。
レイアウトを指定するXMLはプロジェクトを作成した際に、デフォルトのものが用意されています。「res」→「layout」フォルダにある「main.xml」と言うファイルがそれです。ダブルクリックして開いてみましょう。
最初はとてもシンプルな内容ですがこれを以下の様に編集して下さい。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button
android:id="@+id/Button01"
android:text="Click!!"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<EditText
android:id="@+id/EditText01"
android:text=""
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
編集できたら、編集エリア左下にある「レイアウト」タブをクリックして、現在のレイアウトをプレビューしましょう。下の様になっているはずです。
できたら保存します。
これでアプリのレイアウトが作れました。
軽くXMLの中身を説明しますね。
まず、言葉の定義ですが、Androidではボタンやテキスト等の各パーツをViewと言い、それを整列させる為の枠組みをViewGroupと言います。
（ViewGroupクラスはViewクラスを継承しています。）
今回の例では、「LinearLayout」と言うViewGroupに「Button」と「EditText」と言う二つのビューを配置しています。
「LinearLayout」は縦方向、もしくは横方向にViewを並べるViewGroupで、今回は縦方向に並べています。
では、「LinearLayout」のあたりを見てみましょう。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
ここまでの部分はおまじないだと思って下さい。必ずこの様に書きます。使うViewGroupがLinearLayoutでなくても、必ず最初に記述するViewGroupやViewの定義に「xmlns:android="http://schemas.android.com/apk/res/android"」の記述が必要ですので注意して下さい。
android:orientation="vertical"
この「android:orientation」プロパティーで縦に並べるか、横に並べるか指定します。縦なら「vertical」、横なら「horizontal」と指定します。ちなみに、Eclipseで編集している場合は、「android:」まで入力すると指定できるプロパティーの候補が列記されます。また、「android:orientation=」まで入力すると、指定できる値の候補も表示されるので細かい設定値を覚えていなくても何とかなります。
android:layout_width="fill_parent"
android:layout_height="fill_parent"
最後に「layout_width」と「layout_height」ですが、これは横幅と縦幅を指定するプロパティーです。具体的な値で指定する事も出来ますが、候補として「fill_parent」と「wrap_contet」が表示されるので何れかを選ぶのが簡単です。「fill_parent」は親Viewと同じ幅で、「wrap_content」はそのView内に表示される子viewやテキスト等の幅に合わせます。
ボタンやテキストも幅の指定などはLinearLayoutと同じですが、違う点が2つあります。一つは「android:id」プロパティーです。
<Button
android:id="@+id/Button01"
例としてボタンの方を扱いますが、上記の例ではこのボタンviewに「Button01」と言うIDを振っています。こうやってViewにIDを振っておく事でプログラムの中からこのIDをキーとしてviewを操作できるようになります。
それから、「android:text」ですが、これは文字通りViewに表示するテキストを設定するプロパティーです。
android:text="Click!!"
レイアウトXMLの作り方が何となく分かってもらえましたでしょうか？
次は、ボタンをクリックしたら、EditTextに「Hello World！！」と表示する機能のコーディングに進みます。
つづく。
