LoginSignup
39
40

More than 5 years have passed since last update.

5分で完了!iOS6/7ステータスバー対策

Posted at

はじめに

ステータスバーらしさを出すミニマムな対応であれば5分で可能です。
storyboardとResolve Auto Layout issuesの機能を使用し
コードは1行も書いていません。

storyboard

webViewを上部から20pxあけて配置しています

AutoLayoutの有効化

スクリーンショット 2014-03-05 16.23.38.png

スクリーンショット 2014-03-05 16.23.56.png

有効化で増えた項目

  • Top Layout Guide
  • Bottom Layout Guide

Top Layout GuideとViewをつなぐ

topConweb.png

縦に固定20pxの制約をつけます

スクリーンショット 2014-03-05 19.06.02.png

問題があるようで丸に矢印のアイコンが表示されます

このアイコンをクリックすると次の画面に遷移
スクリーンショット 2014-03-05 16.35.34.png

問題の解決

問題の解決方法を提示するメッセージが表示されています
スクリーンショット 2014-03-05 16.35.55.png

Resolve Auto Layout issues

エラーの内容をみたけど、対応がわからない。手っ取り早く作りたい。

そんな時に

スクリーンショット 2014-03-05 16.36.58.png

シミュレータで確認

※加工した部分はFacebookの記述です。

iOS7

ステータスバーのピンクはControllerのViewの背景色です。
20px分空いている。
iOS7.png

iOS6

ステータスバーは黒で、ControllerのView背景色は見えません。
ios6.png

大まかなレイアウトとしては想定通りです。

参考URL

Xcodeでの操作はこちらの記事を元に実行して確認できました
http://blog.grio.com/2013/10/upgrading-your-iphone-app-to-ios-7-the-new-status-bar.html

makoto_kwさんの記事にある「AutoLayoutでStatsuBarに対する余白を変更する」がだいぶ参考になりました。
http://qiita.com/makoto_kw/items/d7ed59aff27fb95c9fde

さいごに

個人的には未経験だったAutoLayoutのことはじめと
statusbarの切り替えでコード使わずに出来ないか探してみたら、とても簡単にでした。
制作的には、このあとiOS6ではステータスバーの色を変更したりコードで書き換える処理は必要になります。

応用するためにはロジックの理屈が分かる学習が必要で
今回はステータスバーで悩まない!レベルに持っていくための記事です。

またよろしくお願いします。

39
40
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
39
40