iOS 7 UI移行ガイド(4)〜UIの更新(1)〜外観と動作
2013. 09. 27
※公式日本語ドキュメント『iOS 7 UI 移行ガイド』が公開されていますので、そちらを読むことを推奨します。
●外観と動作
iOS 7は、貴方のUIのレイアウトと外観のカスタマイズをする方法にいくつかの変更をもたらします。
ビューコントローラのレイアウト、淡彩、そしてフォントの変更は、アプリケーション内の全てのUIKitオブジェクトに影響を与えます。
更にGesture Recognizer APIへの拡張は、ジェスチャの相互作用により詳細な制御を与えます。
・ビューコントローラの使用
iOS 7では、ビューコントローラはフルスクリーンレイアウトを使用しています。
同時にiOS 7ではビューコントローラがビューをレイアウトする方法をより細かく制御することができます。
具体的にはフルスクリーンレイアウトの概念では、ビューコントローラがビューの各エッジのレイアウトを指定することができるように改良されました。
ビューコントローラのwantsFullScreenLayoutプロパティはiOS 7では非推奨です。
現在wantsFullScreenLayout = NOと指定している場合、iOS 7で実行した時にビューコントローラは予期しない画面の位置にコンテンツを表示する場合があります。
ビューコントローラがビューのレイアウトする方法の調整には、UIViewControllerが以下のプロパティを提供しています。
iOS 7では、ビューコントローラはビュー間のカスタムのアニメーション化された遷移をサポートすることができます。
さらにアニメーション化された遷移中にユーザとの対話をサポートするために、iOS 7のAPIを使用することもできます。
詳細は『UIViewControllerAnimatedTransitioning Protocol Reference』と『UIViewControllerInteractiveTransitioning Protocol Reference』を参照してください。
iOS 7では、ビューコントローラがアプリケーションの実行中にステータスバーのスタイルを調整する能力を提供しています。
動的にステータスバーのスタイルを変更する良い方法は、preferredStatusBarStyleを実装して、（アニメーションブロック内で）ステータスバーの外観を更新し、setNeedsStatusBarAppearanceUpdateを呼び出すことです。
・淡彩の使用
iOS 7では、淡彩はUIViewのプロパティです。
iOS 7のアプリケーションはアプリケーション全体のUI要素用に、双方向性と選択状態を示すキーカラーの定義に淡彩を頻繁に使用しています。
ビュー用に淡彩を指定すると、淡彩は自動的にビュー階層内の全てのサブビューに伝播します。
UIWindowはUIViewから継承されているため、以下ようなコードを使用してウィンドウの淡彩プロパティを設定することによって、アプリケーション全体の淡彩を指定することができます。
ウィンドウの淡彩を指定しない場合、システムのデフォルト色を使用します。
デフォルトではビューの淡彩はnilで、ビューがその親の淡彩を使用することを意味します。
また淡彩をビューに尋ねた時は、たとえ貴方が設定していない場合でも、常に色の値が返されることを意味します。
一般的には、ビューが画面外にある間にビューの淡彩を変更するのが最善です。
親の淡彩を使用してビューを元に戻すには、淡彩をnilに設定します。
アラートやアクションシートが表示された時、iOS 7は自動的に後方のビューの淡彩を薄暗くします。
この色の変化に対応するには、レンダリングでtintColorを使用しているカスタムのビューのサブクラスで適切な時にレンダリングを更新するために、tintColorDidChangeをオーバーライドする必要があります。
・フォントの使用
iOS 7はアプリケーションで見栄えの良いテキスト表示を簡単に作成するために、Dynamic Typeを導入しています。
Dynamic Typeを採用すると、以下の機能が得られます。
これらの機能を利用するには、ユーザがテキストサイズの設定を変更した時に送信された通知に応答するために準備をしておきます。
その後、貴方のUIで使用するために、新しいフォントの取得にUIFontのメソッドpreferredFontForTextStyleを使用します。
iOS 7は全てのサイズで最大限読み易くするために、このメソッドで指定されているフォントを最適化します。
テキストスタイルとアプリケーションで使用するフォントについての詳細は『Text Programming Guide for iOS』の『Text Styles』を参照してください。
・Gesture Recognizerの使用
iOS 7より前では、Gesture Recognizerが別のGesture Recognizerの失敗を必要とする場合、作成時に2つのオブジェクト間の永続的な関係の設定にrequireGestureRecognizerToFail:を使用します。
Gesture Recognizerがアプリケーション内（またはフレームワーク内）の他の場所で作成されておらず、Gesture Recognizerの設定が同じままである時、これは正常に動作します。
iOS 7では、UIGestureRecognizerDelegateは、Gesture Recognizerデリゲートオブジェクトによって実行時に指定するために障害要件を可能にする2つのメソッドを導入しています。
どちらのメソッドでも、Gesture Recognizerデリゲートは認識を試みる毎に1回呼び出され、これは障害要件を遅延決定できることを意味します。
また別のビュー階層での認識の間に障害要件を設定できることも意味します。
動的な障害要件の状況の例としては、ビューに画面端からのパンジェスチャ認識を付加するアプリケーションで有用です。
この場合、他のRecognizerが認識処理を開始した後でキャンセルを取得した時に、発生する可能性があるグラフィックの不具合を防ぐことができるので、画面端のジェスチャ認識が失敗することを要求するために、ビューのサブツリーに関連付けされている他の全ての関連するGesture Recognizerが必要な場合があります。
これを行うには、次のようなコードを使用することができます。
参考文献
・Apple／ iOS 7 UI Transition Guide
●外観と動作
iOS 7は、貴方のUIのレイアウトと外観のカスタマイズをする方法にいくつかの変更をもたらします。
ビューコントローラのレイアウト、淡彩、そしてフォントの変更は、アプリケーション内の全てのUIKitオブジェクトに影響を与えます。
更にGesture Recognizer APIへの拡張は、ジェスチャの相互作用により詳細な制御を与えます。
・ビューコントローラの使用
iOS 7では、ビューコントローラはフルスクリーンレイアウトを使用しています。
同時にiOS 7ではビューコントローラがビューをレイアウトする方法をより細かく制御することができます。
具体的にはフルスクリーンレイアウトの概念では、ビューコントローラがビューの各エッジのレイアウトを指定することができるように改良されました。
ビューコントローラのwantsFullScreenLayoutプロパティはiOS 7では非推奨です。
現在wantsFullScreenLayout = NOと指定している場合、iOS 7で実行した時にビューコントローラは予期しない画面の位置にコンテンツを表示する場合があります。
ビューコントローラがビューのレイアウトする方法の調整には、UIViewControllerが以下のプロパティを提供しています。
- edgesForExtendedLayout
edgesForExtendedLayoutプロパティは、矩形の4辺のそれぞれ指定に加え、noneやallの指定にUIExtendedEdge型を使用します。
ビューの端を拡張するには、バーの透明度に関係無くedgesForExtendedLayoutを使用してください。
デフォルトでは、このプロパティの値はUIRectEdgeAllです。 - extendedLayoutIncludesOpaqueBars
設計に不透明なバーを使用している場合、extendedLayoutIncludesOpaqueBarsプロパティをNOに設定することによってedgesForExtendedLayoutを改良します。
（extendedLayoutIncludesOpaqueBarsのデフォルト値はYESです。） - automaticallyAdjustsScrollViewInsets
スクロールビューのコンテンツの挿入が自動的に調整されるようにしたくない場合は、automaticallyAdjustsScrollViewInsetsをNOに設定します。
（automaticallyAdjustsScrollViewInsetsのデフォルト値はYESです。） - topLayoutGuide、bottomLayoutGuide
topLayoutGuideとbottomLayoutGuideプロパティは、ビューコントローラのビューで最上部または最下部のバーの端の位置を示します。
バーがビューの最上部または最下部に重なる必要がある場合は、topLayoutGuideの最下部またはbottomLayoutGuideの最上部に制約を作成することによって、バーに相対的なビューを配置するためにInterface Builderを使用することができます。
（ビューにバーが重なってはならない場合は、topLayoutGuideの最下部がビューの最上部と同じで、bottomLayoutGuideの最上部がビューの最下部と同じにします。）
要求された時、両プロパティが遅延生成されます。
iOS 7では、ビューコントローラはビュー間のカスタムのアニメーション化された遷移をサポートすることができます。
さらにアニメーション化された遷移中にユーザとの対話をサポートするために、iOS 7のAPIを使用することもできます。
詳細は『UIViewControllerAnimatedTransitioning Protocol Reference』と『UIViewControllerInteractiveTransitioning Protocol Reference』を参照してください。
iOS 7では、ビューコントローラがアプリケーションの実行中にステータスバーのスタイルを調整する能力を提供しています。
動的にステータスバーのスタイルを変更する良い方法は、preferredStatusBarStyleを実装して、（アニメーションブロック内で）ステータスバーの外観を更新し、setNeedsStatusBarAppearanceUpdateを呼び出すことです。
| 注 ビューコントローラがステータスバーのスタイルを調整することを回避したい（そして代わりにUIApplicationのstatusBarStyleメソッドを使用することによってステータスバーのスタイルを設定する）場合は、アプリケーションのInfo.plistファイルにUIViewControllerBasedStatusBarAppearanceキーを追加し、値にNOを与えます。 |
・淡彩の使用
iOS 7では、淡彩はUIViewのプロパティです。
iOS 7のアプリケーションはアプリケーション全体のUI要素用に、双方向性と選択状態を示すキーカラーの定義に淡彩を頻繁に使用しています。
ビュー用に淡彩を指定すると、淡彩は自動的にビュー階層内の全てのサブビューに伝播します。
UIWindowはUIViewから継承されているため、以下ようなコードを使用してウィンドウの淡彩プロパティを設定することによって、アプリケーション全体の淡彩を指定することができます。
window.tintColor = [UIColor purpleColor];
| Tip またInterface Builderでアプリケーションの淡彩を設定することができます。 FileインスペクタのInterface Builder Documentセクション内にあるGlobal Tintメニューで、Colorsウィンドウを開くか特定の色を選択することができます。 |
ウィンドウの淡彩を指定しない場合、システムのデフォルト色を使用します。
デフォルトではビューの淡彩はnilで、ビューがその親の淡彩を使用することを意味します。
また淡彩をビューに尋ねた時は、たとえ貴方が設定していない場合でも、常に色の値が返されることを意味します。
一般的には、ビューが画面外にある間にビューの淡彩を変更するのが最善です。
親の淡彩を使用してビューを元に戻すには、淡彩をnilに設定します。
| 重要 外観プロキシAPIを使用してのtintColorプロパティの設定は、iOS 7でサポートされていません。 |
アラートやアクションシートが表示された時、iOS 7は自動的に後方のビューの淡彩を薄暗くします。
この色の変化に対応するには、レンダリングでtintColorを使用しているカスタムのビューのサブクラスで適切な時にレンダリングを更新するために、tintColorDidChangeをオーバーライドする必要があります。
| 注 iOS 6では、tintColorはナビゲーションバー、タブバー、ツールバー、検索バー、およびスコープバーの背景を彩色します。 iOS 7でのバーの背景の彩色には、代わりにbarTintColorプロパティを使用します。 |
・フォントの使用
iOS 7はアプリケーションで見栄えの良いテキスト表示を簡単に作成するために、Dynamic Typeを導入しています。
| 最小サイズでのメッセージ | 最大の非アクセシビリティ サイズでのメッセージ | |
 |  |
Dynamic Typeを採用すると、以下の機能が得られます。
- 全てのフォントサイズで文字間隔と行高を自動調整。
- Body、Footnote、またはHeadlineなど、テキストの意味合いの異なるテキストのブロック用に異なるテキストスタイルを指定する機能。
- Settingsで指定されているテキストサイズをユーザが変更した時に適切に応答するテキスト。
これらの機能を利用するには、ユーザがテキストサイズの設定を変更した時に送信された通知に応答するために準備をしておきます。
その後、貴方のUIで使用するために、新しいフォントの取得にUIFontのメソッドpreferredFontForTextStyleを使用します。
iOS 7は全てのサイズで最大限読み易くするために、このメソッドで指定されているフォントを最適化します。
テキストスタイルとアプリケーションで使用するフォントについての詳細は『Text Programming Guide for iOS』の『Text Styles』を参照してください。
・Gesture Recognizerの使用
iOS 7より前では、Gesture Recognizerが別のGesture Recognizerの失敗を必要とする場合、作成時に2つのオブジェクト間の永続的な関係の設定にrequireGestureRecognizerToFail:を使用します。
Gesture Recognizerがアプリケーション内（またはフレームワーク内）の他の場所で作成されておらず、Gesture Recognizerの設定が同じままである時、これは正常に動作します。
iOS 7では、UIGestureRecognizerDelegateは、Gesture Recognizerデリゲートオブジェクトによって実行時に指定するために障害要件を可能にする2つのメソッドを導入しています。
- gestureRecognizer:gestureRecognizer shouldRequireFailureOfGestureRecognizer:otherGestureRecognizer
- gestureRecognizer:gestureRecognizer shouldBeRequiredToFailByGestureRecognizer:otherGestureRecognizer
| 注 iOS 7ではクラス全体の障害要件を定義する能力を与えるために、（UIGestureRecognizer Class Referenceで説明されている）UIGestureRecognizerSubclassで類似したメソッドを導入しています。 |
どちらのメソッドでも、Gesture Recognizerデリゲートは認識を試みる毎に1回呼び出され、これは障害要件を遅延決定できることを意味します。
また別のビュー階層での認識の間に障害要件を設定できることも意味します。
動的な障害要件の状況の例としては、ビューに画面端からのパンジェスチャ認識を付加するアプリケーションで有用です。
この場合、他のRecognizerが認識処理を開始した後でキャンセルを取得した時に、発生する可能性があるグラフィックの不具合を防ぐことができるので、画面端のジェスチャ認識が失敗することを要求するために、ビューのサブツリーに関連付けされている他の全ての関連するGesture Recognizerが必要な場合があります。
これを行うには、次のようなコードを使用することができます。
UIScreenEdgePanGestureRecognizer *myScreenEdgePanGestureRecognizer;
...
myScreenEdgePanGestureRecognizer = [[UIScreenEdgePanGestureRecognizer alloc] initWithTarget:self action:@selector(handleScreenEdgePan:)];
myScreenEdgePanGestureRecognizer.delegate = self;
// Gesture Recognizerを設定し、ビューに添付します。
...
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldBeRequiredToFailByGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
BOOL result = NO;
if ((gestureRecognizer == myScreenEdgePanGestureRecognizer) && [[otherGestureRecognizer view] isDescendantOfView:[gestureRecognizer view]]) {
result = YES;
}
return result;
}
...
myScreenEdgePanGestureRecognizer = [[UIScreenEdgePanGestureRecognizer alloc] initWithTarget:self action:@selector(handleScreenEdgePan:)];
myScreenEdgePanGestureRecognizer.delegate = self;
// Gesture Recognizerを設定し、ビューに添付します。
...
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldBeRequiredToFailByGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
BOOL result = NO;
if ((gestureRecognizer == myScreenEdgePanGestureRecognizer) && [[otherGestureRecognizer view] isDescendantOfView:[gestureRecognizer view]]) {
result = YES;
}
return result;
}
参考文献
・Apple／ iOS 7 UI Transition Guide
RSS feed
Designed by