Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Androidアプリ開発の基本 ~ ビューとアクティビティ

Android Studio 2で始めるアプリ開発入門 第3回

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

 Androidアプリを開発するにはAndroid Studioを使います。そのAndroid Studioのメジャーアップデートであるバージョン2.0のベータ版が公開されました。本連載では、正式版に先駆けて一足先にAndroid Studio 2.0ベータ版を使い、Androidアプリ開発の基本を解説していきます。前回までで開発環境が整いました。今回から少しずつアプリの作成方法を解説していきます。今回は、画面の作成方法です。

目次

[Note]Android Studio 2.0の正式公開

 2016年4月7日にAndroid Studio 2.0が正式公開されました。ニュースの内容に関しては、こちらの記事に記載されていますので、そちらを参照してください。
Android Studio 2.0を起動するといつも通りにupdateのメッセージが表示されますが、2.0が正式公開されたため、原稿執筆時点では指示に従ってupdateをすると、2.1がインストールされてしまいます。これは、以下のようにUpdatesの設定が「Canary Channel」になっているからです。

図1 設定画面のUpdates設定
図1 設定画面のUpdates設定

ここを「Stable Channel」に変更することで、2.0の正式版にアップデートできます。しかし、それよりも、Android Studioの公式ページより正式版インストーラをダウンロードして、インストールする方をお勧めします。
プレビュー版よりインストールしてあるAndroid Studioはそのまま残しておいてもかまいませんし、フォルダごと削除しても問題ありません。ただし、もし、2.1にアップデートして使用する場合は、正式にインストールする2.0とはSDKのフォルダを別にしておいた方がいいでしょう。
また、すでに、正式にインストールしてある1.5と2.0プレビュー版(ベータ版)を混在して使用している場合は、正式にインストールしてある1.5を2.0にアップデートすればいいでしょう。

対象読者

  • Androidアプリ開発未経験な方
  • Java言語は一通り習得済みである方

Androidアプリ開発の基本手順

 今回のサンプルアプリの作成、解説に入る前に、まず、Andoirdアプリ開発の基本手順を説明しておきます。

アクティビティ

 前回、ウィザードに従ってAndroidプロジェクトの作成方法を解説しましたが、このウィザードの最終画面(Customize the Activity画面)の「Activity Name」と「Layout Name」の入力欄が何を表すのか、から説明していくことにします。

 前回の最終章に記載したように、Androidでは処理をJavaクラスに、画面構成をxmlファイルに記述します。つまり、Javaクラスとxmlファイルのペアでひとつの画面が作られていることになります。

 このJavaクラスのことを「アクティビティ」といい、Activityクラス(またはその子クラス)を継承して作ります。一方、画面構成用のxmlファイルを「レイアウトファイル」といいます。通常、これらはペアなため、関連した名前をつけます。例えば、アクティビティのクラス名が「HelloAndroidActivity」ならレイアウトファイルのファイル名は「activity_hello_android.xml」となります。これらの入力を自動化してくれるのが、Customize the Activity画面なのです。

基本手順

 先述の通り、Androidアプリはレイアウトファイルとアクティビティのペアで成り立っています。よって、Androidアプリ開発では、まず、レイアウトファイルに画面構成を記述していきます。その後、アクティビティに処理を記述していく手順で進めていきます。

 また、アプリ中で使われる表示文字列は原則res/valuesフォルダ中のstrings.xmlに記述します。これは、アプリを他言語に対応させたい場合、別言語で記述されたstrings.xmlを作成し、所定のフォルダ(例えば日本語ならvalues-ja)に入れておくだけで、Android OSの言語設定に従ってOS側で自動的にstrings.xmlを切り替えてくれる仕組みが整っているからです。ですので、日本語向けアプリしか作成しない場合でも、strings.xmlに文字列を記述する癖をつけておきましょう。

サンプルプロジェクト作成

 では、今回使用するサンプルアプリを作成していきましょう。

[Note]ダウンロードしたサンプルの扱い

 今回使用するサンプルはこのページからダウンロードできます。ダウンロードしたZIPファイルを適当なところに解凍すると、ViewSampleというフォルダが作られます。このフォルダ自体がAndroid Studio 2のプロジェクトとなっています。Android Studio 2を起動し、スタート画面「Open an existing Android Studio project」を選択(あるいは、FileメニューからOpenを選択)し、表示されたフォルダ選択ダイアログで先の解凍したフォルダ(ViewSampleフォルダ)を選択すればそのまま参照、実行できるようになっています。

 この連載中で今後公開していくサンプルも同様の手順で参照、実行できます。

 なお、今回のサンプルは、解説中でソースを追記していきます。ダウンロードサンプルはその完成版となります。

プロジェクト情報

 今後この連載中で使用するサンプルアプリについては、プロジェクト情報として以下のような記述をします。この情報でひとつのプロジェクトが作られるようになっています。

  • Application name: ViewSample
  • Company Domain: android.wings.websarva.com
  • Package name: com.websarva.wings.android.viewsample
  • Project location: C:\…任意のワークフォルダ…\ViewSample
  • Phone and Tablet Minimum SDK: API 15
  • Add an activity: Empty Activity
  • Activity Name: ViewSampleActivity
  • Layout Name: activity_view_sample

 「Application name」から「Project location」がプロジェクト作成ウィザードの第1画面(New Project画面)、「Phone and Tablet Minimum SDK」が第2画面(Target Android Devices画面)、「Add an activity」が第3画面(Add an activity to Mobile画面)、「Activity Name」と「Layout Name」が第4画面(Customize the Activity画面)の入力項目に対応します。なお、「Project location」は最終フォルダが「ViewSample」であれば、どこに作成しても構いませんし、ウィザード表示のデフォルトのままでも構いません。それを表すために「任意のワークフォルダ」と記載しました。

 実際に、プロジェクト作成ウィザードを起動し、順番に入力し、プロジェクトを作成してください。

[Note]プロジェクトの閉じ方

 Android Studioでは、プロジェクトを開いた状態で右上のウィンドウを閉じる「×」ボタンをクリックすると、プロジェクトが閉じるのではなくAndroid Studioが終了します。このまま再度Android Studioを起動すると、スタート画面ではなく、前回開いていたプロジェクトをそのまま開いた状態で起動します。プロジェクトを終了し、スタート画面を表示させたい場合はFileメニューから「Close Project」を選択してください。

ソースコード

 今回は、画面の作成方法がメインですので、アクティビティ(Javaのソースコード)はプロジェクト作成時のままで使用します。

 まず、values/strings.xmlファイルを以下の内容に書き換えます。なお、(2)などの数字は解説のためのものですので、ソースコードには入力しないでください。

リスト1 strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">画面部品サンプル</string>
    <string name="tv_msg">お名前を入力してください。</string>  (2)
    <string name="bt_save">保存</string>

</resources>

 次に、activity_view_sample.xmlファイルを以下の内容に書き換えます。

リスト2 activity_view_sample.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="#A1A9BA"
              android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="5dp"
        android:background="#ffffff"
        android:text="@string/tv_msg"  (2)
        android:textSize="25sp"/>

    <EditText
        android:id="@+id/etInput"  (1)
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="25dp"
        android:layout_marginTop="5dp"
        android:background="#ffffff"
        android:inputType="text"/>

    <Button
        android:id="@+id/btSave"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="@string/bt_save"/>

</LinearLayout>

 入力が終了し、特に問題がなければエミュレータを起動し、アプリを実行してみてください。以下のような画面が表示されれば成功です。

図2 画面部品サンプルアプリ実行結果
図2 画面部品サンプルアプリ実行結果

 今回のサンプルでは、各画面部品の配置が分かるように色を付けています。全体の背景としてグレーを使用し、各部品は白にしています。

 なお、今回、Javaのソースコードを一切記述していません。つまり、処理が記述されていませんので、例えば、ボタンをタップしても、タップはできますが何も起こりません。この画面操作に対応する処理に関しては、次回以降解説していきます。


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

著者プロフィール

  • WINGSプロジェクト 齊藤 新三(サイトウ シンゾウ)

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

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

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

バックナンバー

連載:Android Studio 2で始めるアプリ開発入門

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5