Start Developing iOS Apps Today(4)~ユーザインターフェイスの設計

2014. 02. 10
●ユーザインターフェイスの設計

ビューはユーザインターフェイスを構築するための構成要素です。
明快かつ洗練され、有用な方法でコンテンツを表示するために、どのようにビューを使用するかを理解することが重要です。
効果的にアプリのコンテンツを披露する優れたユーザインターフェイスを作成することは、成功するアプリを構築するために不可欠です。
この章では、インターフェイスを定義するためにストーリーボードでのビューの作成・管理について学びます。

ModelViewController_v_2x.png



●ビュー階層

ビューは自身を画面上に表示してユーザの入力に応答するだけではなく、他のビューのコンテナとして機能します。
その結果、アプリのビューはビュー階層と呼ばれる階層構造に配置されます。
ビュー階層は、他のビューに関してビューのレイアウトを定義します。
その階層内では、ビュー内に封入されたビューのインスタンスをサブビューと呼び、ビューを封入する親ビューをスーパービューと呼びます。
ビューのインスタンスは複数のサブビューを持つことができますが、スーパービューは1つのみ持つことができます。

ビュー階層の最上位はウィンドウオブジェクトです。
ウィンドウはUIWindowクラスのインスタンスによって表され、画面上に表示するためのビューオブジェクトを追加することができる基本的なコンテナとして機能します。
ウィンドウ自体はコンテンツを表示しません。
コンテンツを表示するには、ウィンドウに(サブビューの階層で)コンテンツビューを追加します。

コンテンツビューとそのサブビューをユーザに見えるようにするには、コンテンツビューをウィンドウのビュー階層に挿入する必要があります。
ストーリーボードを使用する場合、この配置は自動的に設定されます。
アプリケーションオブジェクトはストーリーボードを読み込み、適切なビューコントローラクラスのインスタンスを作成し、各ビューコントローラのコンテンツビュー階層をアンアーカイブして、ウィンドウへ初期ビューコントローラのコンテンツビューを追加します。
次の章でビューコントローラの管理について詳細を学びますが、今はストーリーボード内に単一のビューコントローラの階層を作成することに焦点を当てます。



●ビューを使用したインターフェイスの構築

アプリを設計する時、目的に応じて使用するビューの種類を知っておくことが重要です。
例えばユーザからテキスト入力を収集するために使用するビューの種類はテキストフィールドなどで、ラベルなどの静的テキストの表示に使用するものとは異なります。
描画用にUIKitのビューを使用するアプリは、すぐに基本的なインターフェイスを組み立てることができるので作成は容易です。
UIKitのビューオブジェクトは、UIViewクラスのインスタンスまたはサブクラスの一つです。
UIKitフレームワークは、データの表示や整理に役立つ多くの種類のビューを提供します。

各ビューは独自の特定の機能を持っていますが、UIKitのビューは7つの一般的なカテゴリに分類されています。

カテゴリ目的
views_content_2x.png
コンテンツ
画像やテキストなど、特定の種類のコンテンツ
を表示
イメージビュー、ラベル
views_collections_2x.png
コレクション
ビューのコレクションやグループを表示コレクションビュー、テーブルビュー
views_controls_2x.png
コントロール
アクションの実行や情報の表示ボタン、スライダ、スイッチ
views_bars_2x.png
バー
ナビゲートやアクションの実行ツールバー、ナビゲーションバー、タブバー
views_input_2x.png
入力
ユーザ入力テキストを受信検索バー、テキストビュー
views_containers_2x.png
コンテナ
他のビューのコンテナとして機能ビュー、スクロールビュー
モーダルユーザが何らかのアクションを実行できる
ように、アプリの通常のフローに割り込む
アクションシート、アラートビュー

Interface Builderを使用してグラフィカルにビューを組み立てることができます。
Interface Builderは、標準のビューやコントロール、そして貴方のインターフェイスを構築するのに必要な他のオブジェクトのライブラリを提供します。
ライブラリからこれらのオブジェクトをドラッグした後に、それらをキャンバス上にドロップし、貴方の望む方法でそれらを配置します。
次に、ストーリーボードでそれらを保存する前に、それらのオブジェクトを構成するためにインスペクタを使用します。
コードを記述すること無く、ビルドしてアプリを実行することで即座に結果を確認することができます。

UIKitフレームワークは多くの種類のコンテンツを表示するための標準ビューを提供していますが、UIView(またはその子孫)をサブクラス化することによって独自のカスタムビューを定義することができます。
カスタムビューは、貴方が描画やイベント処理タスクの全てを処理するUIViewのサブクラスです。
このチュートリアルではカスタムビューを使用していませんが、iOS Viewプログラミングガイドの「カスタムビューの定義(p.60)」でカスタムビューの実装について詳細を学ぶことができます。



●ビューのレイアウトにストーリーボードを使用

グラフィカルな環境でのビュー階層のレイアウトにはストーリーボードを使用します。
ストーリーボードは、ビューと連携しインターフェイスを構築する視覚的な方法を直接提供します。

最初のチュートリアルで見たように、ストーリーボードはシーンで構成され、各シーンは関連付けされたビュー階層を持っています。
シーンのビュー階層に自動的に追加するには、オブジェクトライブラリの外にビューをドラッグしてストーリーボードのシーンに配置します。
階層内のビューの位置は、それを置く場所によって決定されます。
シーンにビューを追加した後に、サイズ変更や操作、設定、キャンバス上での移動をすることができます。

またキャンバスはインターフェイス内のオブジェクトのアウトラインビューも表示します。
アウトラインビューはキャンバスの左側に表示され、ストーリーボード内のオブジェクトを階層表示で見ることができます。

outline_view_2x.png

ストーリーボードのシーンでグラフィカルに作成するビュー階層は、実際にはObjective-Cオブジェクトが"収縮包装された"セットです。
実行時には、これらの収縮包装されたオブジェクトはアンアーカイブされています。
つまりユーティリティ領域で様々なインスペクタを使用して視覚的に設定したプロパティで構成された、関連するクラスのインスタンスの階層です。



●ビューの設定にインスペクタを使用

ストーリーボードのビューを操作する時、インスペクタペインが不可欠なツールです。
インスペクタペインはオブジェクトライブラリの上のユーティリティ領域に表示されます。

inspector_pane_2x.png

各インスペクタは、インターフェイスの要素のための重要な構成オプションを提供します。
オブジェクトを選択した時、例えばストーリーボード内のビューの場合、そのオブジェクトの様々なプロパティをカスタマイズするためにインスペクタをそれぞれ使用することができます。

  • inspector_file_2x.png  ファイル。
    ストーリーボードについての一般的な情報を指定できます。

  • inspector_quick_help_2x.png  クイックヘルプ。
    オブジェクトについての有用なドキュメントを提供します。

  • inspector_identity_2x.png  アイデンティティ。
    オブジェクトのカスタムクラスを指定し、そのアクセシビリティ属性を定義できます。

  • inspector_attributes_2x_2014012909354809c.png  属性。
    オブジェクトの表示属性をカスタマイズできます。

  • inspector_size_2x.png  サイズ。
    オブジェクトのサイズと自動レイアウト属性を指定できます。

  • inspector_connections_2x.png  コネクション。
    インターフェイスとソースコード間の接続を作成できます。

最初のチュートリアルでは、属性インスペクタで作業を始めました。
ストーリーボード内のビューや他のオブジェクトを設定するために、チュートリアルの残りの部分でこれらのインスペクタを引き続き使用します。
特にビューの設定に属性インスペクタ、ビューコントローラの設定にアイデンティティインスペクタ、そしてビューとビューコントローラ間の接続の作成にコネクションインスペクタを使用します。



●ビューの配置に自動レイアウトを使用

ストーリーボードでビューの配置を始める際には、様々な状況を検討する必要があります。
iOSアプリは色々な画面サイズや向き、言語で、多くの様々なデバイスで実行されます。
静的インターフェイスを設計する代わりに、動的かつ画面サイズやデバイスの向き、ローカリゼーション、およびメトリクスの変更に対してシームレスに対応を貴方は望むでしょう。

汎用性の高いインターフェイスを作成するビューを使用し易くするため、Xcodeは自動レイアウトと呼ばれるツールを提供しています。
自動レイアウトは、アプリのユーザインターフェイスにビュー間の関係を表現するためのシステムです。
自動レイアウトは個々のビューまたはビューのセット間での制約の条件で、これらの関係を定義することができます。

自動レイアウトのメニューはキャンバスの右下の領域に常駐しており、4つのセグメントがあります。
キャンバス上のビューに様々な種類の制約を追加して、レイアウトの問題を解決し、サイズ変更動作による制約の決定するために、このメニューを使用します。

al_menu_2x.png

作業 簡潔に 自動レイアウト 2つ目のチュートリアル 追加 サポート ランドスケープモード ToDoListアプリにランドスケープモードのサポートを追加するために、2つ目のチュートリアルでは自動レイアウトで簡単な作業を行います。



参考文献

Apple/Start Developing iOS Apps Today

0 CommentsPosted in 資料





bose_soundlink_revolve
0 Comments
Leave a comment
管理者にだけ表示を許可する
Top
0 Trackbacks
Top
Calendar
03 | 2017/04 | 05
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 - - - - - -
Recent Articles
iTunes


Swift
Categories
Tips
Profile

水月杏香

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

Wish List
WACOM


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

bose_soundlink_revolve
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