Androidアプリのフラグメント（2） ～一つのAndroidアプリでタブレットとスマホに対応～

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

　Androidアプリを開発するにはAndroid Studioを使います。そのAndroid Studioのメジャーアップデートであるバージョン2.0が正式公開されました。本連載では、最新のAndroid Studio 2系を使い、Androidアプリ開発の基本を解説していきます。前回はフラグメントの組込み方を扱いました。今回はその続きとして、フラグメントの真骨頂であるひとつのアプリでスマホとタブレットの両方に対応できる仕組みを解説します。

本連載の書籍化について（2018年5月追記）

　本連載は、加筆・再構成およびAndroid Studio 3対応を行い、書籍化しています。最新情報については、こちらもぜひ併せてご参照ください。

• 『基礎＆応用力をしっかり育成！ Androidアプリ開発の教科書』

対象読者

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

10インチ用画面

　では、早速、10インチタブレットで画面分割できるように前回のアプリを改造していきましょう。

レイアウトファイル追加

　前回解説したとおり、フラグメントのアクティビティへの組込みはレイアウトxmlファイルに記述します。このレイアウトxmlファイルを画面サイズごとに用意できる仕組みがAndroidでは標準で備わっているので、それを利用します。Fileメニューから

　［New］>［Android resource file］

　を選択してください。以下のようなウィザード画面が表示されます。

図1　リソースファイルの追加画面

　以下の情報を入力し、「Finish」をクリックしてください。

• File Name: activity_menu_list.xml
• Resource type: Layout
• Root element: LinearLayout
• Source Set: main
• Directory name: layout-xlarge

　すると、ファイルが作られ、プロジェクトツールウィンドウのresフォルダが以下のようになるはずです。

図2　追加されたactivity_menu_list.xml

　activity_menu_list.xmlがフォルダのようなアイコンに変わり、さらにその中に2ファイル格納されています。先ほど追加したファイルはactivity_menu_list.xmlとは別に、「activity_menu_list.xml(xlarge)」という表記になっています。

　Android Studioのプロジェクトツールウィンドウではわかりにくいのですが、これをファイルシステムで見ると仕組みがはっきりします。

図3　ファイルシステムで見たresフォルダ内

　layoutフォルダとは別にlayout-xlargeというフォルダが作られています。先ほど作成したactivity_menu_list.xmlはこのフォルダの中に格納されています。どのフォルダに格納するかを指定しているのがリソースファイル追加画面の「Directory name」です。

layout-##

　このフォルダの意味するところですが、これは、xlargeサイズ画面（10インチ画面）用のレイアウトxmlファイル用フォルダ、という意味です。

　Androidでは、layoutフォルダに修飾子を付けることで、どの画面用のレイアウトxmlファイルかを指定することができ、OS側で画面サイズに応じて自動的に切り替えてくれる仕組みが整っています。主な修飾子を以下に記載します。

• layout-land: 横向き表示用
• layout-large: 7インチ画面用
• layout-xlarge: 10インチ画面用

　なお、Android Studioでは同一ファイルのフォルダ違いは意識しなくて済むように、「activity_menu_list.xml(xlarge)」のような表記になっているのです。

xml記述

　さて、activity_menu_list.xml(xlarge)に10インチ画面用のレイアウトを記述していきます。以下の内容を記述してください。

リスト1　activity_menu_list.xml(xlarge)

<?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:baselineAligned="false"
        android:orientation="horizontal" >

  <fragment
    android:id="@+id/fragmentMenuList"
    android:name="com.websarva.wings.android.fragmentsample.MenuListFragment"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="0.4" />

  <FrameLayout
    android:id="@+id/menuThanksFrame"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_marginLeft="50dp"
    android:layout_weight="0.6"
    android:background="?android:attr/detailsElementBackground" />

</LinearLayout>

　この時点で、10インチのAVDでこのアプリを起動してみてください。以下のような画面になっていると思います。

図4　xlargeのレイアウトxmlが適用された画面

画面構成

　10インチの画面構成を図解すると以下のようになります。

図5　10インチ画面での構成

　左側40%にidを「fragmentMenuList」としてフラグメントが配置されています。残り右側60%にidを「menuThanksFrame」としてFrameLayoutが配置されています。ここがFrameLayoutである理由は後述します。

　右側は単なるレイアウト部品ですので何も動作しませんが、左側はフラグメントが配置されているので、独立して処理されます。実際、左側のリストのみでスクロールが可能な状態となっています。