Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

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

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

目次

対象読者

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

10インチ用画面

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

レイアウトファイル追加

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

 [New]>[Android resource file]

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

図1 リソースファイルの追加画面
図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
図2 追加されたactivity_menu_list.xml

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

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

図3 ファイルシステムで見たresフォルダ内
図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が適用された画面
図4 xlargeのレイアウトxmlが適用された画面

画面構成

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

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

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

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


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

著者プロフィール

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

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

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

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

バックナンバー

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

もっと読む

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