数日前から取り組んでいるAndroidアプリの開発ですが、画面レイアウトの作り方なんかは、かなり習得できてきたつもりなので、ここで少しアウトプットとして書かせてもらいます。最初は、javaプログラム内にビューとなるボタンやテキストやらを描くためのコードを書いていたのですが、これは面倒だし、エラーのもとになるし、ロジックとデザインの分離ができていないし・・・というデメリットが多いので、特に必要がなければ止めておいたほうがいいでしょう。それよりも、ここで紹介するXMLレイアウト（？）はとても便利なので、使い方を覚えておくといいかと思います。

今回作る画面

今回作る画面は、以下のような画面です。上から順にチェックボックスがいくつか並び、最後の段に、ボタンを横に4つほど中央揃えで並べる、という感じですね。

main.xml

XMLレイアウトで画面デザインを指定するためには、./res/layout/内の***.xmlファイルを変更します。ここに、新しいxmlファイルを作成します（ファイル名はここではtoppage.xmlとします）。作成した、toppage.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="wrap_content"
    >
        <CheckBox
            android:id="@+id/junre1"
            android:text="基礎理論"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
        />
        <CheckBox
            android:id="@+id/junre2"
            android:text="コンピュータシステム"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
        />
        <CheckBox
            android:id="@+id/junre3"
            android:text="技術要素"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
        />
        <CheckBox
            android:id="@+id/junre4"
            android:text="開発技術"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
        />
        <CheckBox
            android:id="@+id/junre5"
            android:text="プロジェクトマネジメント"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
        />
        <CheckBox
            android:id="@+id/junre6"
            android:text="サービスマネジメント"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
        />
        <CheckBox
            android:id="@+id/junre7"
            android:text="システム戦略・経営戦略"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
        />
        <CheckBox
            android:id="@+id/junre8"
            android:text="企業と法務"
            android:layout_width="fill_parent"
            roid:layout_height="wrap_content"
        />
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="310px"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
        >
            <Button
                android:id="@+id/allcheck"
                android:text="全てチェック"
                android:layout_width="100px"
                android:layout_height="50px"
            />
            <Button
                android:id="@+id/q10button"
                android:text="10問"
                android:layout_width="70px"
                android:layout_height="50px"
            />
            <Button
                android:id="@+id/q20button"
                android:text="20問"
                android:layout_width="70px"
                android:layout_height="50px"
            />
            <Button
                android:id="@+id/q30button"
                android:text="30問"
                android:layout_width="70px"
                android:layout_height="50px"
            />
    </LinearLayout>
</LinearLayout>

各コードの解説

LinearLayout

レイアウトの種類には、LinearLayout以外にもRelativeLayout, GridLayoutなど、いろいろあるのですが、一番メジャーで使いやすい（？）とも思えるLinearLayoutを使っています。一番最初のLinearLayoutタグにあるxmlnsは、名前空間の指定で、xmlファイルの中の一番外側のタグにつけておくべき属性です。これを複数のタグにつけてしまってはいけないので、注意しましょう。

android:orientationでは、そのレイアウト内で、ボタンやテキスト（ビューという）をどの方向に並べていくのかを指定します。horizontalと指定すれば、横に配置されていき、verticalと指定すれば、下に配置されていきます。途中で方向を変えたくなった場合は、LinearLayoutタグを入れ子にするなどして新しくレイアウトを追加していきます。

android:layout_width, android:layout_heightは、その名の通り、レイアウトの横幅と縦の長さを指定します。fill_parentとすれば、縦または横に画面いっぱいまでの大きさで描き、wrap_contentとすれば、内容に応じて可変の長さになります。このあたりは各自で一度体験してみるといいでしょう。

CheckBox

基本的には、LinearLayoutと同じですが、CheckBoxの場合には、ラベルに書く文字の指定と、idを割り当てる必要があります。

それぞれandroid:textにラベルに書く文字を指定し、android:idにidを指定します。idの方は、android:id=”@+id/******”という形式で書き、******の部分がidになります。なお、このidは、javaプログラムからアクセスする必要があるビューには付ける必要があり、javaプログラムからアクセスする必要がないビュー（テキストなど？）にはidを割り当てる必要はありません。

Button

CheckBoxで説明した属性のみなので、ここでは説明を省略します。

実行するには？

実行時に今作成した画面を出力するには、javaプログラムの対応する場所で、setContentView(R.layout.toppage);とします。このtoppageというのが、今作成したxmlファイルのファイ名（拡張子を除いたもの）です。おそらく、最初にプロジェクトを作成したとき、MainActivity.javaのonCreateメソッドには、setContentView(R.layout.main);とあり、./res/layout/main.xmlというファイルがあると思いますが、これはmain.xmlファイルにしたがってレイアウトを行え、という命令なのです。

まとめ

今回制作した画面は、xmlファイルで記述すれば、これだけの長さで済むのですが、同じことをjavaプログラム内に書こうとすると、かなり分かりにくくなってしまいます。なので、xmlファイルでレイアウトを指定することは、とても便利になるかと思います。次回は、インテントとかいうやつでかなり詰まった気がするため、別のページに遷移するプログラムの書き方について書こうかと思います。

Android 1.5プログラミングバイブル
	ソシム 2009-06 売り上げランキング : 7827 おすすめ平均 アンドロイドの最初の一冊に是非 ２冊目に最適 Amazonで詳しく見る by G-Tools

関連記事

• Androidアプリ開発 プログレスダイアログの実装
• Androidアプリ開発中
• Androidでタグクラウドを実装する（ソースコード付き）
• Androidアプリケーションの公開方法（署名付きapkファイルの作成）
• Android アプリ開発時の汎用関数の紹介

[PR]

トラックバック

http://yamablo.com/2009/09/08-233437.php/trackback

コメント

Name

Mail (will not be published)

Website