2017年10月16日月曜日

iPhoneX対応

Flaskのアプリ達をiPhoneXの対応を着々と進めています。

iPhoneX向けレイアウトの条件


iPhoneX向けのレイアウトになる条件は、

  • XCode9(iOS11)でビルドしたアプリ
  • LaunchScreenがiPhoneXの対象になっている

ことらしい。
なので、XCode8(iOS10)でビルドしたアプリは、多分SafeArea部分が黒く塗りつぶされる...ハズ。
試せないので想像と期待ですが。

LaunchScreenは、Storyboardと画像Assetのどちらかを使うかを選べます。
Storyboardを使っていた場合は、対象になります。
画像Assetの場合は、iPhoneX用の画像を用意したら対象になります。


対応時に引っかかった所


Insets

画面の縦や横のサイズが変わってもピッタリとレイアウトされるようにコードからコンポーネントのサイズを変更したりしていた所の修正がいくつか必要だった。
手抜きでUIScreen.main.boundsの端末サイズから計算してたとことか、bottomLayoutGuideの量を考慮し忘れとかなど。

Insetsについては、Qiitaに記事を書いてみました。
iOS11のInsetsとLayout
誰かの助けになれば幸いデス。

Status Bar

Status Barを表示していなかったアプリも、iPhoneXだと表示したくなる。
だって、その領域が絶対にあるんですもの...!

なので、Status Bar有りに変えたアプリがいくつかあります。
ただ、やっぱり、iPhone8だと無しにしたい...というものもあって、切り分けたものもあります。
綺麗に切り分ける方法はないっぽいので、SafeArea.topがコレ以上だったら...というハードコーディングした。気持ち悪いけども、まぁしょうがないかなと。


画面下部にピッタリ置いたボタン


手が届きやすいので、画面下部にボタンをよく配置していたのですが、iPhoneXだと下にスペースができちゃうので、イマイチになってしまう。


この場合、ボタンの形状から考え直さないとなんともならなくて、左右にスペース開けて浮いた感じにしてみたり、角丸にしてみたり...とデザインの変更も。

そもそもの話として、iPhoneXは縦長なので画面下部が押しにくそうなのが悩ましい。
ぷにコンみたいなのが正解なのか。もう、ボタン無しUIへと時代は変わっていくのか...?!


Pushアニメーション時のズレ

NavigationBarが不透明だったり、Under Top Barのチェックをしていない時、UITableViewがズレてしまうという、よく話されている問題。
https://stackoverflow.com/questions/45573829/
バグであって、修正されると信じたいなぁ。このために回避のコードを入れたくない。

もう一つ、Pushアニメーション時に、TabBarが上に動いてしまうという問題がiPhoneXのみであって、これはBug Reportを書いた。

Push時のアニメーション関連は、まだ不安定な感じ。




iPhoneX対応は、制約を正しいGuideにコツコツとつなぎ直していく単純作業かと思いきや、デザイン合わないからどうしよう.... という悩みがでてくる。
iPhoneXはマイノリティだから とは思うものの、iPhoneXをメイン端末として使いたい私としては、えこひいき的に考えてしまう(笑)


あとは無事に実機をゲットできればよいのですがーー。




• • •