Fragmentを利用して、画面遷移する世界一簡単なAndroidアプリを開発する

はじめに

今回はタイトルの通り、ボタンをクリックすると別の画面に遷移するという、非常にシンプルなAndroidアプリを作成します。但し、3.X系から導入された、フラグメントの仕組みを利用しているので、これまでのアクティビティーのみの実装と比較すると、かなりやらなければならない手順が格段に増えています。

しかし、フラグメントを利用するメリットについては、別の機会に説明するとして、今後、Androidアプリを開発していく上では、避けては通れないところなので、基礎知識として頭に入れておいて下さい。

ちなみに、本アプリはEclipseでの開発を前提としていて、バージョンによっては操作が異なる場合があるかとは思いますが、それほど大きな違いはないと思いますので、適宜、読み替えて下さい。もちろん、プラグインもインストール済みで、開発準備ができているところからの開始です。

それでは早速、楽しいAndroidアプリの開発に入って行きましょう。

Androidプロジェクトの作成

まずはプロジェクトを作成します。ファイル(F)→新規(N)→プロジェクト(R)...→Androidアプリケーション・プロジェクトを選択して下さい。

アプリケーション名はAndsampleと入力して下さい。アプリケーション名を入力すると、自動で他の項目も入力されます。警告が出ているようですが、今回は出来るだけ手間を掛けたくないので、無視してそのまま次へ(N)＞ボタンをクリックします。

ここでは、カスタム・ランチャー・アイコンを作成するのチェックを外しておいて下さい。チェックを外したら次へ(N)＞ボタンをクリックします。

Empty Activityを選択して次へ(N)＞ボタンをクリックします。

アクティビティー名を聞かれますが、そのままでいいので完了(F)＞ボタンをクリックします。

MainActivityの編集

MainActivity.java package com.example.andsample; import android.os.Bundle; import android.support.v4.app.FragmentActivity; public class MainActivity extends FragmentActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } }

自動生成されたアクティビティーですが、フラグメントを利用する場合は、FragmentActivityを継承する必要があります。extendsをActivityからFragmentActivityに変更しておいて下さい。

詳細画面のレイアウトを作成

res/layout/activity_main.xmlをコピーしてres/layout/detail.xmlを作成して下さい。このdetail.xmlが詳細画面のレイアウトになります。

トップ画面のレイアウトを作成し遷移ボタンを配置する

res/layout/activity_main.xmlを開き、アウトラインからTextViewを削除して下さい。この操作で一つのオブジェクトも存在しないレイアウトになりました。

保存した後でres/layout/activity_main.xmlをコピーしてres/layout/main.xmlを作成して下さい。このまっさらな状態からトップ画面のレイアウトを作成していきます。

res/layout/main.xmlを開き、左下のタブからグラフィカル・レイアウトを選択します。そして、左にあるPaletteからフォーム・ウィジェットを開き、Buttonをドラッグすると、レイアウトにボタンが追加されるはずです。

配置したボタンを右クリックしEdit ID...を選択、新しい名前にbtnMoveと入力して下さい。ここまで出来たら保存します。

トップ画面のレイアウトとロジックを紐付ける

Fragmentを継承したMainFragmentクラスを作成します。先ほど作成したトップ画面のレイアウトに紐付く、ロジックを担当するクラスになります。MainActivityと同じパッケージにクラスを新規作成して下さい。

MainFragment.java package com.example.andsample; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class MainFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.main, container, false); return view; } }

FragmentのonCreateViewをオーバーライドします。第一引数で先ほど作成したトップ画面のレイアウトを指定しています。第三引数はfalseを指定しないとうまく動作しないようなので、決まり事として指定しておいて下さい。

トップ画面にアクティビティーを紐付ける

res/layout/activity_main.xmlを開き、左下のタブからグラフィカル・レイアウトを選択します。そして、左にあるPaletteからレイアウトを開き、Fragmentをドラッグします。フラグメントには先ほど作成したMainFragmentを指定します。ここまで出来たら保存します。

DetailActivityの作成

MainActivityと同じパッケージにアクティビティーを新規作成して下さい。

ここでアクティビティー名を聞かれるので、DetailActivityと入力します。他の項目は自動で変更されるので、完了(F)＞ボタンをクリックします。

ここでも忘れずに自動生成されたアクティビティーのextendsをActivityからFragmentActivityに変更しておいて下さい。

詳細画面のレイアウトとロジックを紐付ける

Fragmentを継承したDetailFragmentクラスを作成します。はじめにコピーして作成した詳細画面のレイアウトに紐付く、ロジックを担当するクラスになります。DetailActivityと同じパッケージにクラスを新規作成して下さい。

DetailFragment.java package com.example.andsample; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class DetailFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.detail, container, false); return view; } }

MainFragmentの時と同様に、FragmentのonCreateViewをオーバーライドします。第一引数では詳細画面のレイアウトを指定しています。

詳細画面にアクティビティーを紐付ける

これもトップ画面の時と同様に、自動生成されたres/layout/activity_detail.xmlを開き、TextViewを削除した上で、フラグメントのコンポーネントを追加します。クラスはDetailFragmentを指定します。ここまで出来たら保存します。

遷移ボタンの処理を実装する

ここまで来たら、あと一息です。遷移処理を担当するmoveメソッドをトップ画面のアクティビティーに実装します。

MainActivity.java（最終形） package com.example.andsample; import android.content.Intent; import android.os.Bundle; import android.support.v4.app.FragmentActivity; public class MainActivity extends FragmentActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } void move() { Intent intent = new Intent(this, DetailActivity.class); startActivity(intent); } }

Intentを生成し、第二引数に遷移先のアクティビティーであるDetailActivity.classを指定しています。startActivityで、遷移先の詳細画面のアクティビティーを開始します。

続いて、遷移ボタンの振舞いをトップ画面のフラグメントに実装していきます。

MainFragment.java（最終形） package com.example.andsample; import android.app.Activity; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup; import android.widget.Button; public class MainFragment extends Fragment { private MainActivity parent; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.main, container, false); Button btnMove = (Button) view.findViewById(R.id.btnMove); btnMove.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { parent.move(); } }); return view; } @Override public void onAttach(Activity activity) { parent = (MainActivity) activity; super.onAttach(activity); } }

まずは、onAttachをオーバーライドし、フラグメントの生成時に紐付くトップ画面のアクティビティーを取得しておきます。

詳細画面のビューから、findViewByIdで遷移ボタンのID（btnMove）を指定して、Buttonのオブジェクトを取得します。そして、取得した遷移ボタンに対し、setOnClickListenerでボタンクリック時の振舞いを実装します。

遷移ボタンをクリックした時の振舞いは、前述のトップ画面のアクティビティーに実装したmoveメソッドを呼び出して、詳細画面のアクティビティーを開始する処理を実行することです。

なぜかフラグメントでは直接インテントを生成する方法がなく、画面の遷移はアクティビティーで実装するというルールになっているので、いちいちフラグメントで紐付いているアクティビティーを取得した上で、画面遷移のイベントを発生させなきゃならないという、まどろっこしいことをしなければいけません。

動作を確認してみる

ようやくアプリが完成しました。エミュレータや実機を通してアプリを実行してみましょう。

おおおっ！質素な画面が出力されました。Buttonを押してみましょう。

おおおっ！うまくいきました。無事、詳細画面が開始されたようです。エミュレータの場合はEscキーで、実機の場合はバックボタンを押すとトップ画面に戻ります。

遷移ボタンをクリックすると、トップ画面の上に詳細画面が乗っかるイメージですね。戻るのイベントが発生すると、一番上に乗っかっている画面がどかされて、直前の画面に戻るような動きです。

Google Androidプログラミング入門 改訂2版

• 作者: 江川崇
• 出版社/メーカー: アスキー・メディアワークス
• 発売日: 2012/08/30
• メディア: 大型本

４月のダイエット記録

コツを掴んだ

１ヶ月を通して順調に減量しています。4月から筋トレメニューに『スクワット』を追加したのが良かったのでしょうか。この頃から見た目にも変化が現れてきたらしく、周りから「痩せたね」と言われ出します。

たまにピョコピョコ体重が増加するのが気になりますが、すぐに戻るので問題なしと判断しました。4/21辺りから停滞期に入ったと思われますが、まだ緩やかに減量しているようなので特に対策はとりませんでした。

トータルフィットネス(TotalFitness) プッシュアップバー STT020

• 出版社/メーカー: トータルフィットネス(TotalFitness)
• メディア: スポーツ用品

TANITA　タニタ　体組成計 インナースキャン５０ BC-320 (パールホワイト)

• 出版社/メーカー: TANITA　タニタ
• メディア: ヘルスケア&ケア用品

３月のダイエット記録

後半の追い上げ

前半で大幅な減量に成功し、気を抜いてしまったせいか、3/21の誕生日をピークにどんどん体重が増加しています。『これではいけない』と思い立ち、気持ちを切り替えて追い上げに成功しました。誕生日の後からは、１日１０００kcal未満に抑えるようにしています。ダイエットに一番効果があるのはやはり食事制限のようです。しかし、3/31日に体重が跳ね上がっているのはなぜでしょう？

トータルフィットネス(TotalFitness) プッシュアップバー STT020

• 出版社/メーカー: トータルフィットネス(TotalFitness)
• メディア: スポーツ用品

TANITA　タニタ　体組成計 インナースキャン５０ BC-320 (パールホワイト)

• 出版社/メーカー: TANITA　タニタ
• メディア: ヘルスケア&ケア用品