変種オセロのUIを作ってみた。（その12）

昨日はボタンの描画を実装した。

しかし、レイアウトに問題があることが発覚したので、今日はその解決を。

レイアウトのリデザイン

とりあえず、今まではどの画面サイズについても、縦方向の構成はどれも同じでいいやと思っていたけれど、画面サイズでこうも余白に差が出てしまうのでは、デザインを考え直さないといけない。

余白を埋める方法を考えると、いくつか方法が考えられる。

画像のサイズを変える。
- ボードのサイズを変える。
- ボタンのサイズを変える。
要素を追加する。
- ボタンの配置を変える。（縦に配置する、など）
- 棋譜を表示する。
- ヘッダーを表示する。

ただ、画像のサイズを変えるのは、あまりやりたくないところ。
というのも、いろんなサイズの画像を用意しないといけなくなって、非常に面倒だから。
アプリのファイルサイズが大きくなるのも、あまりよくないし。
それに、横方向の限界があるので、それに従って縦方向にも限界が出てくる。

それと、要素を追加するとしても、棋譜を表示するというのは微妙。
というのも、将棋や囲碁といったメジャーなゲームであれば、棋譜の読み方というのも統一されているわけだけれど、今作っているのは変種オセロであって、内部的に棋譜のようなものは持っているけれど、それを外部に公開しているわけではないから。
棋譜を表示するなら、その棋譜を読めるように棋譜の仕様を外部に公開しないといけないわけだけど、そこまでやるのはちょっとやりすぎな感じがある。

ということで、今回は次の2つで対応することにした。

縦方向の余白が大きい場合、ヘッダーを表示する。
- ヘッダーを表示する場合、"Config"、"Exit"ボタンは、ヘッダー内に表示する。
  （ただし、今のところ設定するものはないので、"Config"は表示しない）
縦方向の余白が大きい場合、ボタンを縦に並べる。
- ボタンを縦に並べる場合、ユーザの情報を表示するエリアの縦のサイズも大きくする。

サイズの詳細

上記の方針で、機種ごとの各要素の縦方向のサイズを決めていく。

まず、各エリアを下の図のように分割。

+------------+
| ヘッダー    |
+------------+
| 相手情報    |
+------------+
| ボード      |
|            |
+------------+
| 自分情報    |
+------------+

そして、各エリアの縦サイズ（ポイント）を、以下のようにする。
（※SKSceneの縦サイズは、iPhoneの場合、画面サイズの2倍になっていることに注意）

機種	SKScene	ヘッダー	相手情報（+余白）	ボード	自分情報（+余白）
iPhone 4S	960	なし	80（+20）	760	80（+20）
iPad	1024	100	80（+2）	760	80（+2）
iPhone 5s	1136	100	140（+28）	760	80（+28）
iPhone 6	1334	140	140（+77）	760	140（+77）
iPhone 6 Plus	1472	140	140（+146）	760	140（+146）