iOS 7のリリースでアプリ開発が劇的に変わりそうですね。先月iOS 7ヤフーのアプリ開発チームが開催した勉強会では、250席があっという間に埋まるほど大盛況だったそうです。
そこで、iOS 7エンジニア勉強会・運営チームを代表して、西磨翁さんから「既存のアプリをiOS 7に対応させるポイント」をわかりやすく執筆していただきました。
iOS 7に関する勉強会をヤフーが開催！
10/7にiOS 7に関する勉強会をヤフー本社にて開催させていただきました。
＜引用＞
iOS 7勉強会 全セッションの資料と動画を公開します！ #ios7yahoo
勉強会では「既存アプリのiOS 7対応」というタイトルのセッションで、既存アプリをiOS 7対応する際の注意点、気をつけるポイントなどを説明しました。
しかし勉強会では、iOS4.3をサポートしている関係でstoryboardの説明を行うことができませんでした。
初めてiOSアプリを開発する場合、storyboardを利用した方が視覚的にも直感的にも理解しやすいです。またiOS 7がサポートされたXCode5からは新規プロジェクト作成時にstoryboardの利用がデフォルトとなり、storyboardの利用が推奨されていることがわかります。
今回は、既存のアプリをiOS 7に対応させる際の洗礼とも言えるレイアウト崩れの対処方法について、勉強会でお話できなかったstoryboardを利用しての対応方法について説明したいと思います。
なお、対象のOSはstoryboardが利用できるiOS 5～7です
iOS 7とiOS 6以前とのコンテンツ領域の違い
まずはiOS 7とiOS 6以前とで、コンテンツ領域の違いがあることを知っておく必要があります。
画面例を見ながら説明します。ステータスバー＋ナビゲーションバーを実装した画面を表示してみましょう。
以下はiOS 6の画面です。
これをiOS 7で表示してみます。
ステータスバー、ナビゲーションバーの裏に三角形の画像が潜り込んでいるのがわかります。
なぜでしょうか？
それはiOS 7とiOS 6以前でのコンテンツ領域の違いがあります。
iOS 6以前ではステータスバー、ナビゲーションバーとコンテンツは別領域となっていました。
しかしiOS 7からはステータスバー、ナビゲーションバーの領域全てがコンテンツ領域として拡張されています。
このため、iOS 6で正しく表示されていたアプリをiOS 7で表示すると、開発者の意図しない領域へコンテンツが拡張されてしまいます。
これを防ぐ方法を紹介します。
なお、iOS 6とiOS 7のレイアウトの確認はアプリを実行しなくても確認することが可能です。
storyboard右側のView asにて「iOS7.0 and Later」、 「iOS6.1 and Earlier」を選択することでそれぞれのOSVer.でのレイアウトを確認することが可能です。この方法であれば、アプリを実行することなく、storyboard上でレイアウトの確認を行うことができるおすすめの方法です。
1）コンテンツ領域の拡張をやめさせる
iOS 7からはstoryboardにExtend Edgesの設定項目が追加されています。
こちらのUnder Top Barsのチェックをオフにすることで上部のコンテンツ領域の拡張をやめさせることが可能です。以下実際に実行した結果画面です。
ただしく三角形が表示されることが確認できました。
ただし、この手法にはデメリットもあります。
iOS 7での特徴的なUIである、ナビゲーションバーの曇りガラスの表現が失われてしまうのです。
2）iOS 6/7 Detailsを使用する
iOS 7からはstoryboardにiOS 6/7 Deltasの設定項目が追加されています。これはiOS 7の座標位置を基準にiOS 6で加算するpxを指定するものです。
「iOS7.0 and Later」を選択した状態でiOS 7のレイアウトを調整します。コンテンツ領域をステータスバー（20px）+ナビゲーションバー（44px）の合計64px分だけ下に配置します。
この状態でiOS 6でアプリを起動した場合、以下のように64px分下にずれた状態で表示されます。そこで……
⊿Yに-64、⊿Heightに64を設定します。これで、iOS6でアプリを起動した場合は、Y方向へ-64px移動、高さを64px加算した状態で起動されます。
実際に起動すると以下のように正しく表示されることが確認できます。
3）UITableViewControllerでAdjust Scroll View Insetsを指定する
UITableViewControllerでAdjust Scroll View Insetsを設定していない場合です。
Adjust Scroll View Insetsをオンにしてみましょう。
正常に表示されましたね！
さらにiOS 6以上であればさらにAutoLayoutを使用した方法もあります。
いかがでしたでしょうか？
初めてのiOS 7対応でレイアウト崩れの洗礼を浴びた際の参考にしていただけたらと思います。
Yahoo! JAPAN Tech BlogではiOS 7勉強会に関する様々な資料を公開しています。ぜひご覧ください。
今後もiOS 7アプリ開発に関する情報を発信します
西さん、わかりやすい解説ありがとうございました！
ヤフーには「ある分野に突出したスキルを持っているその分野の第一人者」であり、「経験と実績」を持つエンジニアを認定する「黒帯制度」という称賛制度があるのですが、実は西さん、その「黒帯」エンジニアなんです。こうした技術情報や開発事例を惜しみなく発信してくれるのは、うれしいことですね。
寄稿者プロフィール 西 磨翁（にし まお）
ヤフー株式会社のiOSエンジニア。ヤフーの「黒帯制度」における「黒帯iOSアプリ」の認定を受け、社内のiOSアプリ開発者育成や開発支援活動を行っている。Twitter: @mao_nishi
※本記事は「CodeIQ MAGAZINE」掲載の記事を転載しております。
8,568通り、あなたはどのタイプ？
グッドポイント診断で、あなたの隠れた強みを診断してみましょう。
診断結果は8,568通り。あなたはどのタイプ？
あなたの新しい可能性が見つかるかも
リクナビNEXTにログインすると、あなたの志向に合った特別な求人一覧を見ることができます。
予想外の求人が、あなたの世界を広げるかもしれません。
