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


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

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

![image.gif](https://qiita-image-store.s3.amazonaws.com/0/39324/ccf2c1f3-1cb0-1dbf-f270-0d76b5a700c4.gif "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ペインの画面構成にしました。

![スクリーンショット](https://qiita-image-store.s3.amazonaws.com/0/39324/404fe5bf-ded9-5d2a-8bb6-fe4e2e30d116.png "スクリーンショット")

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

# やったこと#2 レイアウトの作成
スマホ／タブレット縦向き用に以下のレイアウトを用意していたとします。

```xml: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ペイン用のレイアウトを用意します。


```xml: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）内で以下のようなイベント処理を行っていたとします。

```java:MainActivity.java(MainFragment.java)
...

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

...

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

...
```

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

```java: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）に渡す引数は割愛しています）

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



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

* 異なるスクリーンサイズをサポートする
http://developer.android.com/guide/practices/screens_support.html

* 異なるスクリーンサイズに対応する設計のベストプラクティス
http://developer.android.com/training/multiscreen/index.html

* タブレットとスマートフォンをサポートするベストプラクティス
http://developer.android.com/guide/practices/tablets-and-handsets.html

* Fragment でダイナミックな UI を作る
http://developer.android.com/training/basics/fragments/index.html

* 画面回転時の対応
http://developer.android.com/guide/topics/resources/runtime-changes.html