iOS 7 UI移行ガイド(5)〜UIの更新(2)〜バーとバーボタン

2013. 10. 02
※公式日本語ドキュメント『iOS 7 UI 移行ガイド』が公開されていますので、そちらを読むことを推奨します。



バーとバーボタン

iOS 7では、ステータスバーは透明であり、他のバー(つまりナビゲーションバー、タブバー、ツールバー、検索バー、およびスコープバー)は半透明です。
一般的なルールとして、アプリケーション内のバーの後方の領域はコンテンツで埋められることを確認します。

またバー用のカスタムな背景画像を提供しない限り、ほとんどのバーの後方はぼかして描画されます。

iOS 7では、カスタムの背景画像でステータスバーの後方を拡張する必要がある時に指定するのに役立つ、バーの位置を識別するためのbarPositionプロパティが導入されています。
UIBarPositionTopAttached値はバーが画面の最上部にあり、その背景がステータスバーの領域内で上向きに展開することを意味します。
対照的にUIBarPositionTop値はバーが(ポップオーバーの最上部など)ローカルコンテキストの最上部にあり、ステータスバーの背景を提供していないことを意味します。

デフォルトでは、全てのバーボタンが枠無しです。
詳細はバーボタンを参照してください。



ステータスバー

ステータスバーが透明なため、後方にあるビューが透けて見えます。
ステータスバーのスタイルは、時間やバッテリ充電、Wi-Fi信号などの項目を含む、そのコンテンツの外観を表します。
ステータスバーのコンテンツが暗い(UIStatusBarStyleDefault)か明るい(UIStatusBarStyleLightContent)かを指定するには、UIStatusBarStyle定数を使用します。

暗いコンテンツではUIStatusBarStyleDefaultが表示されます。
明るいコンテンツがステータスバーの後方にある場合に使用します。

status_bar_default_iphone_2x.png

status_bar_default_ipad_2x.png

明るいコンテンツではUIStatusBarStyleLightContentが表示されます。
暗いコンテンツがステータスバーの後方にある場合に使用します。

status_bar_light_iphone_2x.png

status_bar_light_ipad_2x.png


いくつかの場合、ナビゲーションバーや検索バーの背景画像はステータスバーの後方に拡張することができます。
(詳細についてはナビゲーションバー検索バーとスコープバーを参照してください。)
ステータスバーの下方にバーが存在しない場合、コンテンツビューは画面の全高を使用する必要があります。
ビューコントローラが適切にビューをレイアウトすることを保証する方法については、ビューコントローラの使用を参照してください。

iOS 7では、個々のビューコントローラからステータスバーのスタイルを制御し、アプリケーションの実行中に変更することができます。
この動作を回避してUIApplicationのstatusBarStyleメソッドを使用することによってステータスバーのスタイルを設定したい場合は、アプリケーションのInfo.plistファイルにUIViewControllerBasedStatusBarAppearanceキーを追加して値にNOを与えてください。



ナビゲーションバー

ナビゲーションバーはユーザが情報階層内を進み、必要に応じて画面のコンテンツを管理するのに役立ちます。

iOS 7

nav_bar_7_2x_2013100200134780a.png

nav_bar_ipad_7_2x.png

iOS 6

navigation_bar_6_2x_20131002001350bf2.png

nav_bar_ipad_6_2x.png

iOS 7iOS 6
バー
スタイル
明るい半透明(デフォルト)または暗い半透明。
デフォルトではtranslucentプロパティはYES。
不透明な青のグラデーション(デフォルト)
または不透明な黒。
デフォルトではtranslucentプロパティはNO。
外観下端に1ピクセルのヘアラインを表示。下端にドロップシャドウを表示。
淡彩バーボタンアイテムの淡彩にtintColorを使用。
バー背景の淡彩にbarTintColorを使用。
バー背景の淡彩にtintColorを使用。
BackボタンBackコントロールは山形印と前の画面の
タイトル。*
Backボタンは前の画面のタイトルを含む
縁有りボタン。

* デフォルトの山形印を置換するためにカスタム画像を使用したい場合は、カスタムのマスク画像も作成する必要があります。
iOS 7は、ナビゲーションの遷移中の山形印に前の画面のタイトルを表示する(または非表示にする)ためにマスクを使用します。
Backボタンとマスク画像を制御するプロパティの詳細については、『UINavigationBar Class Reference』を参照してください。

iOS 7はナビゲーションバーに検索バーを容易に追加することができます。
詳細については検索バーとスコープバーを参照してください。

UIBarPositionTopAttachedのバーの位置を使用して(またはナビゲーションコントローラ内の)ナビゲーションバー用の背景画像を作成する場合、画像がステータスバー領域を含むことを確認してください。
具体的には、64ポイントの高さを持つ背景画像を作成します。

以下の表では、iOS 7で様々な高さのサイズ変更可能なナビゲーションバーの背景画像を扱う方法を説明します。
(画像のサイズ変更モードを指定する方法については、『UIImage Class Reference』を参照してください。)

表5-1 画面上部にあるバーのサイズ変更可能な背景画像の処理

高さサイズ変更処理ステータスバーの背景の外観
44
ポイント
必要に応じて水平方向にサイズ変更
(画像は垂直方向にタイリングや伸張しません)。
UIBarPositionTopAttachedを使用している
場合は黒。
UIBarPositionTopを使用している場合、
ウィンドウの背景によって提供。
44
ポイント
未満
UIBarPositionTopAttachedを使用している場合は
64ポイントに、UIBarPositionTopを使用している
場合は44ポイントに垂直方向にサイズ変更。
必要に応じて水平方向にサイズ変更。
バーの背景によって提供。
64
ポイント
必要に応じて水平方向にサイズ変更。バーの背景によって提供。
1
ポイント
UIBarPositionTopAttachedまたはナビゲーション
コントローラを使用する場合は64ポイントに垂直
方向にサイズ変更。
UIBarPositionTopを使用する場合は44ポイントに
垂直方向にサイズ変更。
必要に応じて水平方向にサイズ変更。
バーの背景によって提供。

ナビゲーションバーの下方にカスタムのドロップシャドウを表示するために、範囲外の高さを持つ背景画像を使用しないでください。
追加される高さはナビゲーションバーの下方ではなく、ステータスバーの領域内に拡張されているので、この手法はiOS 7では動作しません。
ナビゲーションバーにドロップシャドウを追加したい場合は、カスタムの背景画像を作成し、カスタムのシャドウ画像を指定するためにshadowImageプロパティを使用してください。



検索バーとスコープバー

検索バーは検索用の入力として使用することができるユーザのテキストを受け取ります。
検索バーはその下方にスコープバーを付属させることができます。

iOS 7 iOS 6
search_bar_7_2x.png search_bar_6_2x.png

 iOS 7iOS 6
バースタイル明るい半透明(デフォルト)または暗い半透明。
デフォルトではtranslucentプロパティはYES。
不透明な青のグラデーション(デフォルト)
または不透明な黒。
デフォルトではtranslucentプロパティはNO。
検索バー
スタイル
顕著(デフォルト)または最小。
顕著な検索バーは半透明の背景と不透明の検索
フィールドを持ちます。
最小の検索バーは背景が無く、半透明の検索
フィールドを持ちます。
-
外観下端に1ピクセルのヘアラインを表示。下端にドロップシャドウを表示。
淡彩前面要素の淡彩にtintColorを使用。
バー背景の淡彩にbarTintColorを使用。
バー背景の淡彩にtintColorを使用。

UIBarPositionTopAttachedのバーの位置を使用して検索バーの背景画像を作成する場合、画像の高さがステータスバーの高さを含むことを確認してください。
サイズ変更可能な背景画像を作成する場合、iOS 7で様々なサイズの画像をサイズ変更する方法の詳細について表5-1を参照してください。

iOS 7では 、UISearchDisplayControllerはdisplaysSearchBarInNavigationBarプロパティを含み、iPhoneのCalendarのものと同様にナビゲーションバー内に検索バーを置くために使用することができます。

search_in_nav_7_2x.png

スコープバーではユーザが検索範囲を定義することができます。


スコープバーは単独で表示することはできず、検索バーに付属させる必要があります。

iOS 7 iOS 6
scope_bar_2x.png scope_bar_6_2x.png

 iOS 7iOS 6
バースタイル明るい半透明(デフォルト)または暗い半透明。
デフォルトではtranslucentプロパティはYES。
不透明な青のグラデーション(デフォルト)
または不透明な黒。
デフォルトではtranslucentプロパティはNO。
外観下端に1ピクセルのヘアラインを表示。下端にドロップシャドウを表示。
淡彩スコープボタンのコンテンツの淡彩にtintColorを
使用。
バー背景の淡彩にbarTintColorを使用。
バー背景の淡彩にtintColorを使用。



タブバー

タブバーは人々に異なるサブタスクやビュー、そしてモード間で切り替えができる能力を与えます。

iOS 7

clock_tab_bar_7_2x.png

tab_bar_ipad_7_2x.png

iOS 6

tab_bar_6_2x.png

tab_bar_ipad_6_2x.png


iOS 7では、iPadのタブバーは56ポイントの高さを持っています。

 iOS 7iOS 6
バー
スタイル
UITabBarはbarStyleプロパティを含んでいます。
明るい半透明(デフォルト)または暗い半透明。
デフォルトではtranslucentプロパティはYES。
不透明な黒のグラデーション(デフォルト)。
iOS 6では、タブバーはbarStyleやtranslucent
プロパティを含んでいません。
外観提供されている場合、カスタムの選択インジケー
タ画像を使用します。
選択インジケータ画像がタブアイコンの後方に
描画されます。
アイテム
の位置
タブのレイアウトの変更にはitemPositioningを
使用。
デフォルトでのタブは、iPhoneではタブバーの
幅を満たし、iPadではタブは中央に配されます。
中央に配されたアイテムのバーでは、タブの
レイアウトのカスタマイズにitemWidthと
itemSpacingを使用することができます。
iOS 6では、タブバーはitemPositioning、
itemWidth、またはitemSpacingプロパティを
含んでいません。
淡彩選択されたタブバー項目の淡彩にtintColorを使用。
バー背景の淡彩にbarTintColorを使用。
バー背景の淡彩にtintColorを使用。

タブバー項目用にカスタムのアイコンを作成する場合、項目が選択された状態を表す2つ目のアイコンの指定に、UITabBarItemのselectedImageプロパティを使用する必要があります。
カスタムアイコンの選択されたバージョンを提供しない場合、同じアイコンが両方の状態で使用されます。
カスタムのタブバーアイコンを作成する上でのいくつかの設計指針として、バーボタンアイコンを参照してください。



ツールバー

ツールバーには、現在の画面またはビュー内のオブジェクトに関連するアクションを実行するためのコントロールが含まれています。

iOS 7

mail_toolbar_7_2x.png

toolbar_ipad_7_2x.png

iOS 6

toolbar_6_2x.png

toolbar_ipad_6_2x.png

 iOS 7iOS 6
バー
スタイル
明るい半透明(デフォルト)または暗い半透明。
デフォルトではtranslucentプロパティはYES。
不透明な青のグラデーション(デフォルト)
または不透明な黒。
デフォルトではtranslucentプロパティはNO。
外観上端に1ピクセルのヘアラインを表示。上端にドロップシャドウを表示。
淡彩バーボタン項目の淡彩にtintColorを使用。
バー背景の淡彩にbarTintColorを使用。
バー背景の淡彩にtintColorを使用。
関連情報UIToolbarPosition定数は廃止され、代わりに
UIBarPosition定数を使用。

サイズ変更可能な背景画像を作成する場合、iOS 7で様々なサイズの画像をサイズ変更する方法の詳細について表5-1を参照してください。



バーボタン

iOS 6では、バーボタンは縁有りまたは縁無しのいずれかです。
iOS 7では、全てのバーボタンが縁無しです。

iOS 7でのナビゲーションバーのボタン iOS 6でのナビゲーションバーのボタン
borderless_bar_buttons_7_2x.png bordered_bar_buttons_6_2x.png

明確にするため、iOS 7のアプリケーションでは時々アイコンの代わりにバーボタン内にタイトルを使用します。
例えば、iOS 7のCalendarはカスタムのアイコンの代わりにInboxを使用しています。

iOS 7 iOS 6
text_titles_in_toolbar_7_2x.png glyphs_in_toolbar_6_2x.png

iOSの以前のバージョンでは、カスタムのバーボタンアートは自動的にテンプレート画像として扱われていました。
(テンプレート画像は最終的な画像を作成するためのマスクとして使用されます。)
iOS 7では、カスタムアートをテンプレート画像として扱う必要があるのか、または完全にレンダリングされたものかを指定するために、次のUIImageのプロパティを使用することができます。

  • UIImageRenderingModeAlwaysTemplate。
    画像はテンプレート画像として扱います。

  • UIImageRenderingModeAlwaysOriginal.
    画像はレンダリングされたものとして扱います。

画像の処理を指定しなかった(または特定の状況での処理を回避した)場合、画像は格納されているビューによって定義されたデフォルトの取り扱いを受け取ります。
例えば、デフォルトではバーはテンプレート処理を使用するのに対し、スライダはデフォルトでは完全にレンダリングされたものとして扱われて使用します。


テンプレート画像は、その親の淡彩を取得します。
(iOS 7での淡彩の詳細については、淡彩の使用を参照してください。)
バーボタン項目で淡彩を受け取りたくない場合は、画像のUIImageRenderingModeAlwaysOriginalプロパティを設定してください。



参考文献

Apple/ iOS 7 UI Transition Guide

0 CommentsPosted in 資料






QuietControl 30 wireless headphones
Calendar
09 | 2013/10 | 11
Sun Mon Tue Wed Thu Fri Sat
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Recent Articles
iTunes


Swift
Categories
Tips
Profile

水月杏香

Author:水月杏香
永遠の初心者プログラマ。

Wish List
WACOM


ARC
Technical Q&A
情報プロパティリストキー
Start Developing iOS Apps Today
BOSE

QuietControl 30 wireless headphones
Reference
NSApplicationDelegateプロトコル
NSArrayクラス
NSAutoreleasePoolクラス
NSBundleクラス
NSBundle UIKit追加分
NSCalendarクラス
NSCoderクラス
NSCodingプロトコル
NSCopyingプロトコル
NSDataクラス
NSDateクラス
NSDateFormatterクラス
NSDictionaryクラス
NSEntityDescriptionクラス
NSEnumeratorクラス
NSErrorクラス
NSExceptionクラス
NSFetchRequestクラス
NSFileHandleクラス
NSFileManagerクラス
NSIndexPathクラス
NSIndexPath UIKit追加分
NSKeyedArchiverクラス
NSKeyedUnarchiverクラス
NSKeyValueCodingプロトコル
NSLocaleクラス
NSManagedObjectクラス
NSManagedObjectContextクラス
NSManagedObjectModelクラス
NSMutableArrayクラス
NSMutableCopyingプロトコル
NSMutableDictionaryクラス
NSMutableSetクラス
NSNotificationクラス
NSNotificationCenterクラス
NSNullクラス
NSNumberクラス
NSObjectクラス
NSObject UIKit追加分
NSObjectプロトコル
NSPersistentStoreクラス
NSPersistentStoreCoordinatorクラス
NSPredicateクラス
NSPropertyListSerializationクラス
NSRunLoopクラス
NSSetクラス
NSStringクラス
NSString UIKit追加分
NSTimerクラス
NSTimeZoneクラス
NSURLクラス
NSURLProtectionSpaceクラス
NSURLRequestクラス
NSUserDefaultsクラス
NSValueクラス

UIActionSheetクラス
UIActionSheetDelegateプロトコル
UIActivityIndicatorViewクラス
UIAlertViewクラス
UIAlertViewDelegateプロトコル
UIApplicationクラス
UIApplicationDelegateプロトコル
UIBarButtonItemクラス
UIBarItemクラス
UIButtonクラス
UIColorクラス
UIControlクラス
UIDatePickerクラス
UIDeviceクラス
UIEventクラス
UIFontクラス
UIGestureRecognizerクラス
UIImageクラス
UIImageViewクラス
UIKit Function
UILabelクラス
UINavigationControllerクラス
UINavigationItemクラス
UIPickerViewクラス
UIPickerViewDataSourceプロトコル
UIPickerViewDelegateプロトコル
UIPinchGestureRecognizerクラス
UIResponderクラス
UIScreenクラス
UIScrollViewクラス
UISearchBarクラス
UISearchBarDelegateプロトコル
UISegmentedControlクラス
UISliderクラス
UISwipeGestureRecognizerクラス
UISwitchクラス
UITableViewクラス
UITableViewCellクラス
UITableViewControllerクラス
UITableViewDataSourceプロトコル
UITableViewDelegateプロトコル
UITapGestureRecognizerクラス
UITextFieldクラス
UITextFieldDelegateプロトコル
UITextInputTraitsプロトコル
UITextViewクラス
UITextViewDelegateプロトコル
UIToolbarクラス
UITouchクラス
UIViewクラス
UIViewControllerクラス
UIWebViewクラス
UIWebViewDelegateプロトコル
UIWindowクラス

AVAudioPlayerクラス
AVAudioPlayerDelegateプロトコル

CADisplayLinkクラス
CAEAGLLayerクラス
CALayerクラス

CGAffineTransform
CGBitmapContext
CGColor
CGColorSpace
CGContext
CGGeometry
CGImage
CGPath

EAGLContextクラス
EAGLDrawableプロトコル

Foundation Constants
Foundation Data Types
Foundation Functions

MPMediaItemクラス
MPMediaItemArtworkクラス
MPMediaPlaylistクラス
MPMediaPropertyPredicateクラス
MPMediaQueryクラス
MPMusicPlayerControllerクラス

Randomization Services

System Sound Services
Amazon


OpenGL ES
SQLite
Monthly Archives
Recent Comments
Recent TrackBacks
RSS Link
Visitors
QR Code
QR