Android application development 第8章:XMLによるUI記述とコードの連携

■ なぜXMLでUIを書くのか?

Androidアプリでは、UI(ユーザーインターフェース)をXMLファイルで定義するのが一般的です。HTMLのようなタグベースの記述形式で、どの部品(View)をどこにどのように配置するかを、視覚的・構造的に記述できます。

Java(やKotlin)のコードでもUIを構築できますが、XMLは分離・再利用・視認性の高さの点で優れており、Android Studioのレイアウトエディタとも連携しています。


■ UIのXMLファイルの例(res/layout/activity_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="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/helloText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="こんにちは" />

    <Button
        android:id="@+id/clickButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="押してね" />
</LinearLayout>

ここでは、縦方向に TextViewButton が並んでいます。それぞれに android:id がついており、コード側でこのIDを使って部品を操作します。


■ コードとの連携(Activityクラス)

XMLだけではボタンを押しても何も起きません。Java側でイベント処理などのロジックを記述して、UIと結びつける必要があります

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main); // ①XMLを読み込む

        // ②XMLに定義したViewを取得
        TextView textView = findViewById(R.id.helloText);
        Button button = findViewById(R.id.clickButton);

        // ③ボタンが押されたときの処理を記述
        button.setOnClickListener(v -> {
            textView.setText("こんにちは、世界!");
        });
    }
}

ポイント:

  1. setContentView() でXMLを画面として読み込む
  2. findViewById() でXML内のViewをJavaコードから取得
  3. 必要に応じてイベント処理やプロパティ変更を行う

■ なぜこの構成が良いのか?

  • UI(見た目)とロジック(処理)を分離できる → 保守性が高くなる
  • XMLファイルを再利用できる(includemerge などの構文もある)
  • デザイナーとエンジニアで作業を分担しやすい
  • Android Studioのレイアウトプレビューで即時確認できる

■ よくあるミスと注意点

  • findViewById() の型やIDの間違い → コンパイルは通っても落ちる
  • setContentView() を忘れると画面が表示されない
  • IDが @+id/... で定義されていないとコードから参照できない
  • Viewが null になる場合は、対象のXMLに本当に存在しているかを確認

まとめ:XMLは“見た目を作る”、Javaは“動きを作る”

AndroidのUIは、基本的に「XMLで画面を作り、Javaで動きを与える」という役割分担で構成されます。最初は連携に少し戸惑うかもしれませんが、慣れるととても効率よく開発ができます。

mh

Related Posts

Android application development 第9章:イベントリスナーの定義(Java視点からの違和感に注意)

Androidアプリでも、JavaのGUI開発と同様に「ユー…

Android application development 第7章:ViewとViewGroup、Layoutの基本的な考え方

Androidアプリでは、ユーザーが操作する画面は「ビュー(…

You Missed

Kubernetes Learning 第5章:kubectl の基本操作(get / describe / logs / exec)

  • 投稿者 mh
  • 5月 9, 2025
  • 14 views

Android application development 第9章:イベントリスナーの定義(Java視点からの違和感に注意)

  • 投稿者 mh
  • 5月 9, 2025
  • 16 views

Android application development 第8章:XMLによるUI記述とコードの連携

  • 投稿者 mh
  • 5月 8, 2025
  • 27 views

Kubernetes Learning 第4章:Kubernetesを触ってみよう(最小構成で試す)

  • 投稿者 mh
  • 5月 8, 2025
  • 27 views

Android application development 第7章:ViewとViewGroup、Layoutの基本的な考え方

  • 投稿者 mh
  • 5月 7, 2025
  • 28 views

Kubernetes Learning 第3章:Dockerとの関係

  • 投稿者 mh
  • 5月 7, 2025
  • 23 views