[iOS][Android] 画面を 4 分割するビューを作成する

2016.06.17

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

画面を 4 分割させます

なんで?って聞かれると答えに困るのですが、なんとなく思いついたのでやってみます。

iOS

iOS は意外と簡単です。
Autolayout がいい感じにやってくれます。

まず、4 つのビューをこのように配置します。

split_view_1

続いてそれぞれのビューに制約をつけていきます。
Constant は全て 0 です。

ビュー A

  • Leading Space
    • Superview に対して
  • Top Space
    • Superview に対して
  • Tailing Space
    • ビュー B に対して
  • Bottom Space
    • ビュー C に対して

ビュー B

  • Top Space
    • Superview に対して
  • Tailing Space
    • Superview に対して
  • Bottom Space
    • ビュー D に対して

ビュー C

  • Leading Space
    • Superview に対して
  • Tailing Space
    • ビュー D に対して
  • Bottom Space
    • Superview に対して

ビュー D

  • Tailing Space
    • Superview に対して
  • Bottom Space
    • Superview に対して

ビュー A, B, C, D

  • Equal Widths
  • Equal Heights

これで完成です。
簡単ですね。

Portrait

split_view_2

Landscape

split_view_3

Android

こちらは少々手間がかかります。
同じようなビューは RelativeLayout を利用することで実現できます。

サンプルコード

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <Space
        android:id="@+id/vertical_separator"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        />

    <Space
        android:id="@+id/horizontal_separator"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_centerVertical="true"
        />

    <!-- View A -->
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignBottom="@id/horizontal_separator"
        android:layout_alignEnd="@id/vertical_separator"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:background="#ff0000"
        />

    <!-- View B -->
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignBottom="@id/horizontal_separator"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:layout_alignStart="@id/vertical_separator"
        android:background="#00ff00"
        />

    <!-- View C -->
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignEnd="@id/vertical_separator"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_alignTop="@id/horizontal_separator"
        android:background="#0000ff"
        />

    <!-- View D -->
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignStart="@id/vertical_separator"
        android:layout_alignTop="@id/horizontal_separator"
        android:background="#000000"
        />

</RelativeLayout>

この作りのキモは横方向中央と縦方向中央に配置した、目に見えない セパレータ です。
これらを配置することによって、それぞれのビューの開始位置や終了位置をセパレータに合わせることができます。

split_view_4

Portrait

split_view_5

Landscape

split_view_6

以上、小ネタでした。

ミレニアム・ファルコン製作日記 #22

22 号 表紙

mfd_22_1

パーツ

mfd_22_2

mfd_22_3

mfd_22_4

成果

mfd_22_5

今回の作業は以下の 1 つでした。

  • クッションパッドを接着する

前回の続きです。
前回は通路の側面にクッションパッドを接着しました。
今回は反対側の側面に 8 つのパッドを貼り付けています。
作業に関するコメントは特に無し。

スター・ウォーズ 反乱者たち シーズン 2

現在「スター・ウォーズ 反乱者たち シーズン 2」が ディズニーXD で放送されています。
前回の予告を見た感じ、次回の 6/19(日) に放送される #17 忍び寄る闇 は激アツの展開でした。
要チェックです!

スター・ウォーズ 反乱者たち シーズン 2

なお、#17 を見る前には「スター・ウォーズ/クローン・ウォーズ」を以下の順で見ておくことをオススメします。
40 時間くらいかかりますが。

それではまた次回。

May the Force be with you!