So-net無料ブログ作成

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

はじめに

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

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

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

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

Androidプロジェクトの作成

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

simple_transition_01.png

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

simple_transition_02.png

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

simple_transition_03.png

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

simple_transition_04.png

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

MainActivityの編集

MainActivity.java

自動生成されたアクティビティーですが、フラグメントを利用する場合は、FragmentActivityを継承する必要があります。extendsActivityから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

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

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

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

DetailActivityの作成

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

simple_transition_05.png

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

simple_transition_06.png

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

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

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

DetailFragment.java

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

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

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

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

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

MainActivity.java(最終形)

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

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

MainFragment.java(最終形)

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

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

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

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

動作を確認してみる

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

simple_transition_07.png

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

simple_transition_08.png

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

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

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

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

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

nice!(0)  コメント(0)  トラックバック(0) 

nice! 0

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

※ブログオーナーが承認したコメントのみ表示されます。

トラックバック 0

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。