本連載の書籍化について（2018年5月追記）
本連載は、加筆・再構成およびAndroid Studio 3対応を行い、書籍化しています。最新情報については、こちらもぜひ併せてご参照ください。
対象読者
- Androidアプリ開発未経験な方
- Java言語は一通り習得済みである方
10インチ用画面
では、早速、10インチタブレットで画面分割できるように前回のアプリを改造していきましょう。
レイアウトファイル追加
前回解説したとおり、フラグメントのアクティビティへの組込みはレイアウトxmlファイルに記述します。このレイアウトxmlファイルを画面サイズごとに用意できる仕組みがAndroidでは標準で備わっているので、それを利用します。Fileメニューから
［New］>［Android resource file］
を選択してください。以下のようなウィザード画面が表示されます。
以下の情報を入力し、「Finish」をクリックしてください。
- File Name: activity_menu_list.xml
- Resource type: Layout
- Root element: LinearLayout
- Source Set: main
- Directory name: layout-xlarge
すると、ファイルが作られ、プロジェクトツールウィンドウのresフォルダが以下のようになるはずです。
activity_menu_list.xmlがフォルダのようなアイコンに変わり、さらにその中に2ファイル格納されています。先ほど追加したファイルはactivity_menu_list.xmlとは別に、「activity_menu_list.xml(xlarge)」という表記になっています。
Android Studioのプロジェクトツールウィンドウではわかりにくいのですが、これをファイルシステムで見ると仕組みがはっきりします。
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インチ画面用のレイアウトを記述していきます。以下の内容を記述してください。
<?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でこのアプリを起動してみてください。以下のような画面になっていると思います。
画面構成
10インチの画面構成を図解すると以下のようになります。
左側40%にidを「fragmentMenuList」としてフラグメントが配置されています。残り右側60%にidを「menuThanksFrame」としてFrameLayoutが配置されています。ここがFrameLayoutである理由は後述します。
右側は単なるレイアウト部品ですので何も動作しませんが、左側はフラグメントが配置されているので、独立して処理されます。実際、左側のリストのみでスクロールが可能な状態となっています。
