SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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


  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

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

対象読者

  • 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である理由は後述します。

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

次のページ
10インチ用処理

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Android Studio 2で始めるアプリ開発入門連載記事一覧

もっと読む

この記事の著者

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook<個人紹介>WINGSプロジェクト所属のテクニカルライター。Web系製作会社のシステム部門、SI会社を経てフリーランスとして独立。屋号はSarva(サルヴァ)。HAL大阪の非常勤講師を兼務。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9639 2018/05/23 15:36

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング