Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

レイアウトの作成手順をマスターする!
~速習! Androidアプリケーション開発(3)~

第3回 レイアウトの作成

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

 この連載では、Androidの開発の楽しさを感じてもらう事を目標に、難しい内容はひとまず置いておいて、アプリケーション開発ができるようになるまでを最短ルートで説明していきます。今回はサンプルアプリケーションの画面レイアウトを作成していきます。

目次

はじめに

 今回はサンプルアプリケーションの画面レイアウトを作成していきます。本稿の作業を行った状態のプロジェクトをサンプルソースとして用意したので、迷った場合は参考にしてください。

対象読者

 本連載はJavaおよびEclipseの基本を理解している方を対象としています。

前回の記事

事前準備

 まずは、今回使用するイメージファイルを準備しましょう。イメージファイルは、「drawable-***」フォルダに置くことで解像度ごとに別のファイルを使用することもできますが、今回は同じイメージファイルを使用します。イメージファイルをダウンロードしたら、解凍し、中にある「drawable」フォルダを「res」フォルダの直下に配置してください。

一覧画面のレイアウト作成

 それでは、一覧画面のレイアウトから作成していきましょう。

一覧画面の完成イメージ
一覧画面の完成イメージ

 一覧表示には、ListViewという部品を利用します。「res/layout/main.xml」を開き、次のようにTextViewをListViewに変更します。

main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<!-- 一覧表示用リスト -->
<ListView
	android:id="@+id/list"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent" />
</LinearLayout>

 ListViewで指定している属性は下記の意味を持ちます。

ListViewの属性
属性 意味
android:id プログラムからビューを参照するためのID
layout_width ビューの幅。fill_parentで親いっぱいに広がる
layout_height ビューの高さ。fill_parentで親いっぱいに広がる

 ここで使用した以外にも、ビューはさまざまな属性を指定することが可能です。属性の詳細については下記を参照ください。

 この状態で実行すると、タイトルだけの空の画面が表示されます。なお、「Virtual Device」の設定していない場合は、第1回を参考にして、設定してください。

 もしも、うまく実行できないようであればEclipseの「Console」ビューおよび、「LogCat」ビュー([Window]-[Show View]-[Other]-[Android]-[LogCat]で表示)で原因を特定してください。

 この状態ではレイアウトが正しくできているのか確認できないので、ListViewにアイテムを設定してみましょう。ListActivityを開いて次のように書き換えてください。

ListActivity.java
/**
 * 一覧表示アクティビティ
 */
public class ListActivity extends Activity {
// 一覧表示用ListView
private ListView listView = null;

@Override
public void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	// 自動生成されたR.javaの定数を指定してXMLからレイアウトを生成
	setContentView(R.layout.main);

	// XMLで定義したandroid:idの値を指定してListViewを取得します。
	listView = (ListView) findViewById(R.id.list);

	// ListViewに表示する要素を保持するアダプタを生成します。
	ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(this,
				android.R.layout.simple_list_item_1);
	// 要素を追加
	arrayAdapter.add("新規追加");
	// アダプタを設定
	listView.setAdapter(arrayAdapter);
}
}

 この状態で再度実行すると、ListViewに「新規追加」という要素が表示され、レイアウトが正しくできていることが確認できます。


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

著者プロフィール

  • 横井 朗(ヨコイ アキラ)

    株式会社ビーブレイクシステムズにて業務システムのパッケージソフト(MA-EYES)の製品開発から導入までを手掛けるとともに、オープンソースソフトウェア(ExCella)の開発リーダも務める。 オープンソース関連について多くの執筆経験を持つ。 &nbsp; &nbsp;

バックナンバー

連載:速習! Androidアプリケーション開発
All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5