Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Androidアプリにおけるユーザインタフェースの基本処理

Android開発のためのJava SE再入門(3)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/07/15 14:00

 Androidアプリケーションは、Java言語を用いて開発することができます。Androidアプリケーションの開発にあたっては、米グーグル社が提供するAndroid SDK(Software Development Kit、開発キット)の知識は当然ながら、基本となるのはJava SEです。この連載では、Javaでの開発の基礎となるJava SEを、実際にAndroid上で実行できるソースコードとともに解説します。

目次

はじめに

 第3回目の本稿は、少し予定を変更して、ビューを用いたAndroidの画面処理や、ボタンのイベント処理など、本連載を読み進めていく上で必要となる、ユーザインタフェースの前提知識について解説していきます。

対象読者

 Androidアプリケーションの開発を始めたい方で、JavaとEclipseのごく基本的な知識がある方を対象とします。

ビューを用いたAndroid画面処理

 まずは前回の続きでもある、ビューを用いたAndroidのGUI画面処理を説明しましょう。

main.xmlの中身

 前回で説明したように、Activityクラスで画面を表示するには、onCreateメソッドのなかで画面の初期設定を行います。

リスト1 HelloAndroid.javaの一部
public class HelloAndroid extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);                    // (1)
    }
}

 (1)のsetContentViewメソッドは、画面レイアウトを定義したXMLファイルからViewオブジェクトを作成し、それをActivityクラスに登録する、という意味になります。

 このようにActivityクラスに登録するビューは、1つだけです。異なるビューでsetContentViewを複数回呼び出しても、最後に登録したビューだけが有効になります。

 Eclipiseのパッケージ・エクスプローラーから、R.layout.mainが示すmain.xmlファイルを開くと、Android Layout Editor(GUI編集画面)が起動します。ただGUIの画面だけでは、このビューがどのような構造になっているのかわかりにくいので、main.xmlをテキストとして表示してみましょう。

図1 GUI編集
図1 GUI編集

 Graphical Layoutのとなりにある、main.xmlというボタンをクリックすると、次のテキスト画面に切り替わります。

リスト2 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="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    />
</LinearLayout>

 このファイルの意味は、LinearLayoutという画面をレイアウトするオブジェクトの定義と、そのレイアウトの子要素として、TextViewという文字列などを表示するコンポーネントを定義する、というものです。

 なお、このように、ユーザインターフェイスを提供するビューオブジェクトのことを、ウィジットと呼びます。Androidでは、ボタンやチェックボックス、テキスト入力をはじめ、カレンダーや時計といった複雑なウィジェットまで、実装済みコンポーネントとして提供されています。

ビュー階層

 AndroidのGUI画面定義は、階層構造になっていて、まずベースとなるレイアウトがあり、そのなかにGUI要素を定義します。またレイアウトの中に、レイアウトをネストすることも可能です。

図2 ビューの構造例
図2 ビューの構造例

 LinearLayoutクラスは、もっともシンプルなレイアウトで、子要素を縦または横一列に並べるものです。ここでは一つの子要素しか定義していませんが、複数定義した場合でも、一列に並んで表示されます。それぞれの要素の座標を指定する必要はありません。ただし、縦または横に一列しか並べられないので、たとえば、格子状に配置したい場合には、LinearLayoutのなかにさらにLinearLayoutオブジェクトを配置します。

 main.xmlでは、LinearLayoutの属性として、orientation、layout_width、layout_heightの3つが指定されています。これはそれぞれ、レイアウトの向き、幅、高さの指定で、これらの属性に使用できる値は、次のようになります。

表1 属性に指定できる値
意味
vertical 縦向き
horizontal 横向き
fill_parent 親要素のサイズまでなるべく大きく表示(APIレベル8以降は、match_parentとする)
wrap_content 表示可能な最小の大きさ

  • LINEで送る
  • このエントリーをはてなブックマークに追加

修正履歴

  • 2011/07/21 12:07 match_parentの補足を、fill_parentの部分に移動訂正

著者プロフィール

  • WINGSプロジェクト 高江 賢(タカエ ケン)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:Android開発のためのJava SE再入門
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5