Android ユーザーインターフェースの基礎 【Android TIPS】

この記事は2013年4月9日に書かれたものです。内容が古い可能性がありますのでご注意ください。


Android ユーザーインターフェースの基礎

1
ユーザーインターフェース基礎とイベントリスナー
ユーザーインターフェースの基礎
この節では、ユーザーインターフェース(UI)を作成する上で重要となるViewクラスを紹介します。このクラスはAndroidのUIを構成する全てのパーツ(ウィジェットとも呼ばれ、ボタンやチェックボックス等のイメージ)の基底クラスとなっているため、多種多様に存在するウィジェットを同じように扱うことができます。
ViewとViewGroup
ウィジェットとは一般的にボタンやテキストボックスといった画面を構成する個々の部品を指します。
Androidではこれらのウィジェットは全てandroid.view.Viewクラスを継承したクラスとして定義されており、これらのウィジェットはandroid.widgetパッケージに収められています。
クラス 機能
TextView テキストの表示
EditText テキストの入力領域
CheckBox チェックボックス(複数選択)
Button ボタン
Spinner リストから選択
RadioButton ラジオボタン(単一選択)

上から順に、TextView、EditText、CheckBox、Button、Spinner、RadioButton

※これらのクラス名とレイアウトXMLファイルに使用するタグ名は基本的に同じ名前が使用されています。

 

Viewはボタンやテキストボックスのような単一のウィジェトだけではなく、画面のような複数のウィジェットをまとめグループ化したものも含まれます。このようなViewをViewGroupと呼びます。ViewGroupにはRelativeLayout、LinearLayout、ScrollViewなどがあります。

 

「res/layout/activity_main.xml」ファイルを見てみましょう。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world"
        tools:context=".MainActivity" />

</RelativeLayout>

ポイントとなるのは、ViewとViewGroupによって構成されるユーザインターフェースは必ず単一のツリー構造になるということです。
この例では、親がRelativeLayout、子がTextViewという作りになっています。前回までにグラフィカル・レイアウトでButton等を追加してある場合は、RelativeLayoutの中(TextViewの下に)Buttonが追加されているはずです。

 

また、View(ViewGroupも含みます)はどのようなViewなのか、どこに配置するかといったレイアウトに関する設定を行うことができます。これらの情報はLayoutParamsクラスが保持しており、XMLで定義する場合は「android:layout_xxxx」という属性が該当します。たとえば、「android:layout_width」はViewの横幅を設定するための属性で、「fill_parent」を指定した場合は親要素の横幅に合わせることを意味します。


ViewとViewGroupのツリー構造とLayoutParamsクラス

ユーザーインターフェースの定義方法
ユーザーインターフェースの定義方法は2種類あります。

  • XMLファイルで定義する方法
  • Javaプログラムで定義する方法

これまでレイアウトXMLファイルである「activity_main.xml」に手を加え(Buttonを追加して)、画面が変わることを確認しました。この方法は「XMLファイルで定義する方法」にあたります。
この方法で用いるレイアウトXMLファイルは「res/layout/」ディレクトリ以下に作成しなくてはいけません。

ページ:

1

2 3
  • このエントリーをはてなブックマークに追加