AndroidアプリのActivityの画面の作り方予備知識編

日記のタイトルにやたらと「の」が入っていて全くセンスがないですが、ヌルく見守ってください。

Androidアプリ開発で基本的な画面の作り方を（眠いので）何回かに分けてメモっていきます。
大体以下のような内容を予定しています。
Activityって言われてさっぱりわからない人向けではないと思います。
サンプルとか、本やドキュメントを少し読んだけど、いまいちレイアウトが上手く作れねーんだけどとか、
上手くいくことは行くんだけど、いまいち仕組みが良く解らん。
っていう人の助けになればいいなぁぐらいの感覚で書いてます。

予備知識
レイアウトの種類
パーツの種類
Eclipse上での開発
思い通りの画面にするためのワンポイント

予備知識編

という感じで初めは、予備知識的なところを扱って(お茶を濁して)いこうと思います。

具体的な作業の前に、初めて画面を作る上で把握しておいた方がいいかなと思う点として、以下の４つを挙げてみます。

レイアウトの設定はXMLで行う
Activityとレイアウトのつなぎ込みは、Activityのコード上で行う
XMLファイルの名前から.xmlを覗いた部分がコード上での名前になる
画面はLayoutとViewで作る

サンプルコードに関して

以下で出てくるサンプルコードはAndroid_sdkに含まれている、NotePadプログラムの物を引用しています。
android_sdk/samples/android-7/NotePadにあります。
このサンプルの中身はandroid-8でも同じだと思います。

レイアウトの設定はXMLで行う

レイアウトの作り込み自体はJavaのソースコードベースでももちろん可能ですが、ロジックに影響がなければXMLで作ってしまったほうが楽でしょう。

SDKのNotePadのサンプルでは以下のようなXMLがres/layout/title_editor.xmlというファイル名で配置されています。

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2007 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at
  
          http://www.apache.org/licenses/LICENSE-2.0
  
     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 
   android:layout_width="wrap_content" 
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingLeft="6dip"
    android:paddingRight="6dip"
    android:paddingBottom="3dip">

<edittext android:id="@+id/title" 
        android:maxLines="1" 
        android:layout_marginTop="2dip"
        android:layout_width="wrap_content"
       android:ems="25"
        android:layout_height="wrap_content" 
        android:autoText="true"
        android:capitalize="sentences"
        android:scrollHorizontally="true" />

<button android:id="@+id/ok"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="right"
        android:text="@string/button_ok" />

</LinearLayout>

Eclipseを使ったりするとGUIでこのXMLを生成することもできます。

中身はとりあえずだらっと眺めてもらって、「やたらとandroidとか出てくるな」とか「@+idとか@stringあたりがポイントかな」とか思ってもらえばいいかなと思います。
また、置き場所がres/layoutディレクトリというのは後述する、コードとのつなぎ込みの上で大変重要なことになります。

Activityとレイアウトのつなぎ込みは、Activityのコード上で行う

で、肝心のつなぎ込みですが、こちらはJavaで記述します。title_editor.xmlを呼び出しているJavaのコードをさがすと、com/example/android/notepad/TitleEditor.javaというファイルの中に、その部分が見つかります。

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.title_editor);

        // Get the uri of the note whose title we want to edit
        mUri = getIntent().getData();

        // Get a cursor to access the note
        mCursor = managedQuery(mUri, PROJECTION, null, null, null);

        // Set up click handlers for the text field and button
        mText = (EditText) this.findViewById(R.id.title);
        mText.setOnClickListener(this);
        
        Button b = (Button) findViewById(R.id.ok);
        b.setOnClickListener(this);
    }

onCreateはActivityが生成されるときに呼び出されるAPIで、その最初の方にあるsetContentView(R.layout.title_editor);の部分でXMLファイルで作った画面と対応させています。

XMLファイルの名前から.xmlを覗いた部分がコード上での名前になる

このR.layout.title_editorの部分を理解することはスムーズに開発するために重要になってきます。
Androidアプリ開発ではresディレクトリの下に定義・配置したものにアクセするためのオブジェクトを自動生成してくれます。このRというクラスはgenディレクトリの下に、アプリのパッケージに属するように生成され、resディレクトリの中身を良きに理解してクラスを定義します。res/layoutディレクトリはRの内部クラスlayoutとして、XMLファイルの名前はlayoutクラスのプロパティとして定義されます。
このような処理を(antで)コンパイル前に自動でやってくれます。
※Eclipseの場合も同様にres/layoutの下にあるXMLの名前で自動生成されます。

つまりR.layout.title_editorのtitle_editorはres/layout/title_editor.xmlというファイル名から自動生成されたものなのです。

この様にXMLのファイル名がJavaのコード上でアクセスする際の名前となるため、XMLのファイル名変更をする場合、ソースコードも変更する必要があります。
そのためXMLファイルの名前はあとのことも考えて変更しなくてすむような名前を付ける必要があります。
どうしてもXMLのファイル名を変更する場合は慎重に行う必要があるでしょう。

画面はLayoutとViewで作る

最後にXMLファイルの中身に少し触れて、次につないでいきたいと思います。

上述したXMLにはLinearLayout、EditText、Button要素の3つしか出てきません。
この３つは画面要素の大まかな位置を決定するLineaLayoutと要素そのものであるEditTextとButtonの二つに分ける事ができます。前者をViewGroup、後者をViewと呼びます。

Androidの画面開発ではこのViewGroupとView、加えてそれらの属性を組み合わせて進めていきます。
そのため、思い通りの画面にするためにはViewGroup・Viewの種類さらに、それぞれで利用出来る属性への習熟が重要になってきます。

まとめ

レイアウトはres/layoutの下にXMLファイルで定義する
自動生成されたR.layoutのプロパティを使ってActivityにレイアウトを適用する
ViewGroupとViewと属性は暗記したい

次回はあるのか！！！！？

心魅 - cocoromi -

半角スペース時々全角