Programming Style

メニュー

初心者がアプリ開発者になるためのプログラミング学習サイト

[Android] ユーザインターフェースの概要

android_android-layout-overview_01

Androidのインターフェースは、すべてViewオブジェクトとViewGroupオブジェクトで構成されています。ViewViewGroupにはさまざまなタイプがあり、それぞれがViewクラスを継承しています。ここではAndroidのインターフェースの基本的な概要を説明します。

 

広 告

 

目次

前提条件

  • なし

動作確認端末

  • Google Nexus 5 – 5.0.0 – API21(エミュレータ)

1. レイアウト構造について

Viewオブジェクトは、ボタンやテキストの画面に表示させるコンポーネントです。

ViewGroupオブジェクトは、それ自身が画面に表示されることはありませんが、他のViewオブジェクト(もしくはViewGroupオブジェクト)を子ビューとして保持し、それらのレイアウト配置する役割を持っています。

 

android_android-layout-overview_01

Androidのユーザインターフェースは、上記の図のように、ViewオブジェクトとViewGoupオブジェクトとが階層的に構成されています。

この階層的なレイアウトは、JavaコードからViewオブジェクトやViewGroupオブジェクトをインスタンス化することで実現できますが、レイアウトXMLを用いて定義し、それをJavaコードで読み込む方法の方が、より簡単にレイアウトが組むことができます。

XMLファイルは、HTMLと似ていて、レイアウト構造が把握しやすい記述内容になっているからです。

 

android_android-layout-overview_02

実際に上記のレイアウトをJavaコード定義する方法、レイアウトXMLで定義する方法、それぞれについて見てみます。

まずはJavaコードで定義する方法です。

 

java/<package name> /MainActivity.java

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        final LinearLayout layout = new LinearLayout(this);
        layout.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT));
        layout.setOrientation(LinearLayout.HORIZONTAL);

        final EditText editText = new EditText(this);
        editText.setHint(getString(R.string.hint));
        editText.setWidth(400);

        final Button button = new Button(this);
        button.setText(getString(R.string.button));

        layout.addView(editText);
        layout.addView(button);
        setContentView(layout);
    }
}

次にレイアウトXMLで定義する方法です。

 

res/layout/toast_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity
    ">

    <EditText
        android:layout_width="400px"
        android:layout_height="wrap_content"
        android:hint="@string/hint"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"/>

</LinearLayout>

レイアウトXMLで定義した場合、Javaコード(Activityクラス)にてXMLファイルを読み込む処理を記述する必要があります。

 

java/<package name> /MainActivity.java

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

双方を比べると、XMLで定義した場合の方が、レイアウト階層がXMLの階層で表現できるため、容易に把握できます。Javaで定義した場合も記述方法などを工夫すれば、レイアウト階層がより把握しやくなるかもしれませんが、レイアウトが複雑になればなるほど困難になります。

 

2. XMLタグ名とJavaクラス名の名前について

レイアウトXMLで使用するタグ名は、Javaコードで扱うViewクラス、ViewGroupクラスと同じ名前になっています。例えば、<TextView>タグはTextViewクラスに対応しており、<LinearLayout>タグはLinearLayoutクラスに対応しています。

Androidのフレームワークが、レイアウトXMLを読み込み時に各XMLの要素をJavaのオブジェクトに変換するため、アプリ開発者はそのオブジェクトを使って、画面上のコンポーネントに対して処理を記述することができます。

 

広 告