LoginSignup
47
45

More than 5 years have passed since last update.

マルチペイン対応のタブレット開発でやったこと・感想まとめ

Posted at

はじめに

本稿では、マルチペインのタブレット開発でやったことの簡単な解説、感想などをまとめます。今後、マルチペインのタブレット開発を検討している方の参考になれば幸いです。

実際に操作してみたい方はこちらからどうぞ。マルチペインはタブレット横向きの場合のみ有効です。
https://play.google.com/store/apps/details?id=com.wantedly.android.visit&hl=ja

image.gif

やってみた感想

Android Developers の公式動画で「Fragmentなどを使えば〜意外と簡単にできます」と触れていますが、実際にやってみた結果「意外と簡単」でした。逆に「簡単」に対応できないのであれば、そもそもの設計が良くないかもしれません。
https://www.youtube.com/watch?v=x_gxZd9kLv4#t=7m00s

開発者の方が気になる(であろう)コストについてですが、今回の開発期間(コーディング・テスト)は1週間程度であり、今後タブレット対応に伴うメンテナンスの負担が増えることもほとんどありません。この点はアプリや設計方法にもよると思うのでご参考までに。

今回のタブレット向け開発を経て、想像していたより遥かに簡単にできたこともあり、今後自分が関わるアプリは全てタブレット対応のものを作りたいと思うようになりました。

開発前提

こちらにも記載のある通り Fragment を使った設計が行われていること
http://developer.android.com/guide/practices/tablets-and-handsets.html#Guidelines

やったこと#1 レイアウトの設計

今回開発したアプリでは、リストおよびその詳細画面が多数を占めていたので2ペインの画面構成にしました。

スクリーンショット

また、レイアウトを効率的に利用するため、上の図のような画面構成としました。尚、今回の開発のターゲットは③の対応です。②の対応は以下エントリをご確認ください。簡単に対応できます。
http://qiita.com/suzukihr/items/1a3204e6c713cf870f8d

やったこと#2 レイアウトの作成

スマホ/タブレット縦向き用に以下のレイアウトを用意していたとします。

activity_main.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

res/layout-sw600dp-land/ フォルダ* を作成し、シングルペインのレイアウトに置き換わる、2ペイン用のレイアウトを用意します。

activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:baselineAligned="false"
    android:divider="?android:attr/dividerHorizontal"
    android:orientation="horizontal"
    android:showDividers="middle">

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <FrameLayout
        android:id="@+id/container_right"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="2" />

</LinearLayout>

* 詳細は下記リンクを参照
http://developer.android.com/design/style/metrics-grids.html
http://developer.android.com/guide/practices/screens_support.html

やったこと#3 イベント処理の実装

MainActivity は MainFragment を、DetailActivity は DetailFragment を表示するものとし、タブレット対応前は MainActivity(もしくは MainFragment)内で以下のようなイベント処理を行っていたとします。

MainActivity.java(MainFragment.java)
...

    // MainActivity の場合
    setContentView(R.layout.activity_main);

...

    Intent intent = new Intent(this, DetailActivity.class);
    startActivity(intent);

...

以下のように変更します。右側に View があれば、そこに Fragment を replace(もしくは add) するような形です。イベント処理は MainActivity 内で実行します。

MainActivity.java
...

    setContentView(R.layout.activity_main);

...

    if (findViewById(R.id.container_right) != null) {
        getSupportFragmentManager().beginTransaction()
            .replace(R.id.container_right, new DetailFragment())
            .commit();
    } else {
        Intent intent = new Intent(this, DetailActivity.class);
        startActivity(intent);
    }

...

2ペイン対応の基本的な処理は以上です。(簡易的な解説のため、DetailActivity(DetailFragment)に渡す引数は割愛しています)

その他、画面回転時の処理なども行いましたがここでは割愛します(以下のドキュメントを参照いただければと思います)。

読んでおきたいドキュメント

タブレット開発を行う上で参考になりそうなオフィシャルドキュメントのリンクです。

47
45
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
47
45