Lesson 2.7 Introduction to UIKit
コンピュータ、アプライアンス、およびあらゆる種類のデバイスのユーザーとして、あなたはすでにユーザーインターフェイスが重要であることを知っています。iOSで独自のアプリを作成するので、ユーザーインターフェイスやUIを構築および管理するための基本的なフレームワークであるUIKitに大きく依存します。UIKitは、ユーザーに情報を表示する方法と、ユーザーインタラクションやシステムイベントにどのように応答するかを定義します。また、アニメーション、テキスト、画像を操作することもできます。基本的には、iOSデバイスでそれを見ることができれば、UIKitで構築されました。
このレッスンでは、UIKitで最も一般的に使用されるインターフェイス要素のいくつかと、詳細を調べることができる場所について学習します。
あなたが学ぶこと
・UIKitがアプリ開発の重要な部分である理由
・アプリ内の5つの一般的なビューの名前と外観
・アプリの5つのコントロールの名前と機能
・詳しく知る場所
Vocabulary
button
control
control event
date picker
image view
UIKit
label
navigation bar
scroll view
segmented control
slider
switch
tab bar
table view
text field
toolbar
p.188
UIKitフレームワークは、iOSアプリを構築および管理するために必要な重要な部分を提供します。これには、すべてのユーザーインターフェイスオブジェクトの定義、ユーザー入力に応答するイベント処理システム、およびiOSでアプリを実行できるようにするモデル全体が含まれます。
一般的なシステムビュー
UIKitで定義されているすべてのビジュアル要素の基本クラスは、UIViewまたはビューです。ビューは、画面に何でも表示するようにカスタマイズできる鮮明な長方形です。テキスト、画像、線、グラフィックはすべてUIViewのインスタンスを使用して作成されます。
UIKitは、特定のタスクを実行する数十の特別なUIViewサブクラスを定義します。たとえば、UILabelはテキストを表示し、UIImageViewは画像を表示し、UIScrollViewではスクロール可能なコンテンツを画面に表示できます。
アプリのほぼすべての画面は多くのビューで構成されており、一緒にビュー階層を構成しています。
p.189
ビューは、前のビュー階層図のように、しばしばネストされます。別のビューに含まれるビューは、子ビューと呼ばれます。1つ以上のビューを含むビューは、親ビューと呼ばれます。この例では、リスト内の各セルはテーブルビューの子ビューであり、各セルは3つのビューの親です。都市名を表示するラベル、タイムゾーンがどのように関連しているかを表示する別のラベル、時計の画像を表示する画像ビューです。
ビューを画面に表示するには、サイズと位置で構成されるフレームを与え、ビュー階層に追加する必要があります。ビュー内の領域はその境界です。ビューはデフォルトで透過的であるため、背景色のプロパティも設定する必要があります。
ビューの操作時に変更できる属性をいくつか紹介します。
次に、UIKitで定義されている最も一般的なビューのいくつかを見てみましょう。
このセクションでは、UIViewを使用して作業する一般的なビューについて説明します。さまざまなビューについて学びながら、使用するアプリとそのインターフェイスを作成するためにどのビューを使用するかを考えてください。
p.190
label
ラベルは静的テキストを使用してユーザーに情報を中継します。
imageView(UIImageView)
画像ビューには、画像またはアニメーション画像シーケンスが表示されます。画像ビューと画像自体を混同する人もいます。このように考えてください。ラベルがテキストを表示するのと同じように、画像ビューは画像を表示します。
textView(UITextView)
テキストビューを使用すると、ユーザーはアプリにコンテンツを入力できます。テキストビューは、スクロールと編集をサポートする複数の行のテキストを受け入れて表示します。通常、テキストビューを使用して、電子メールメッセージの本文など、大量のテキストを表示します。
scrollView(UIScrollView)
スクロールビューを使用すると、ユーザーはビューの境界を越えて実行されるコンテンツを見ることができます。通常、表示したい情報がデバイスの画面よりも大きい場合は、スクロールビューを使用します。
ユーザーがスクロールビューを操作すると、垂直または水平スクロールインジケーターが短時間表示され、表示するコンテンツが増えます。
p.194
Table View (UITableView)
テーブルビューは、単一のスクロール可能な行とセクションの列にデータを表示し、ユーザーは情報のグループを簡単にナビゲートできるようにします。テーブルビューは、情報の階層リストを表示および編集するための優れたフォーマットです。
たとえば、メールアプリはテーブルビューを使用してユーザーの受信トレイに電子メールメッセージを表示し、メッセージアプリはテーブルビューを使用して連絡先別に整理されたメッセージスレッドを表示します。
配置
テーブルビューは、テーブルビュー自体のルックアンドフィール、および表示する行(またはセル)のルックアンドフィールをカスタマイズできるため、興味深いです。
テーブルビューとそのカスタマイズ方法については、今後のレッスンで詳しく学習します。
UITableView開発者向けドキュメント
toolBar(UIツールバー)
ツールバーは通常、画面の下部に表示され、バーボタン項目と呼ばれる1つ以上のボタンを表示します。ユーザーはボタンまたはツールを選択して、特定のビュー内でアクションを実行できます。
配置
ツールバー自体、または表示されるバーアイテムを設定できます。各バー項目はタイトルと画像で構成されており、プログラムで有効または無効にすることができます。
Navigation Bars (UINavigationBar)
ナビゲーションバーを使用して、アプリの主要なコンテンツを整理された方法で表示します。これは、ユーザーにとって直感的であることを望んでいます。ナビゲーションバーは通常、画面の上部に表示され、画面の階層をナビゲートするためのバーボタンがあります。戻るボタン、タイトル、進むボタンが含まれる可能性が高いです。
p.196
Tab Bars (UITabBar)
タブバーを使用すると、アプリ内のさまざまなビューに簡単にアクセスできます。複数のタブバー項目を表示し、それぞれがアイコン画像とテキストで構成されています。アプリのタブバーを使用して、特定の機能やタスクによって情報を整理します。タブバーを使用する最も一般的な方法は、タブバーに表示する各シーンを表す各ビューコントローラーのプロパティを保持するタブバーコントローラーです。ユーザーがアイテムをタップすると、新しいタスクに関連する新しいビューが表示されます。
タブバーは、複数のワークフローやアクションコースを表示するアプリで頻繁に使用されます。たとえば、App Store App には別々のタブがあり、注目の App を閲覧したり、特定の App を検索したり、利用可能なアップデートを確認したりできます。
配置
ほとんどの場合、タブバーをタブバーコントローラーと組み合わせて使用するため、コントローラーに表示するシーンを追加します。各シーンのビューコントローラーには、タブバーに表示されるテキストとオプションの画像を定義するUITabBarItemプロパティがあります。タブバーコントローラーとタブバービューにシーンを追加するには、ストーリーボードのタブバーコントローラーのviewControllersプロパティにリンクします。
コントロール
前のセクションでは、ユーザーに情報を表示する一般的なビューについて学びました。ユーザー入力に応答するのはどうですか?UIKitのツール(コントロールと呼ばれる)を使用して、アプリに何をすべきかを伝えます。
コントロールは、ユーザーとアプリの間のコミュニケーションツールと考えてください。ユーザーがコントロールを操作すると、コントロールはコントロールイベントをトリガーします。異なるコントロールは、異なるコントロールイベントをトリガーします。
Interface Builderでコントロールを設定した後、特定のコントロールイベントに応答し、コードブロックを実行できるIBActionを設定します。ほとんどの場合、プライマリアクショントリガー(UIControlEventPrimaryActionTriggered)コントロールイベントを使用します。このコントロールイベントは、ボタンをタップしたとき、またはコントロールの値が変更されたときにトリガーされます。
コントロールは、ほとんどのiOSアプリに表示されるため、シンプルで簡単で、ユーザーに馴染みがあります。UIControlのさまざまなサブクラスについて学びながら、次のページで、お気に入りのアプリと、コントロールを使用してそれらと通信する方法について考えてください。
p.198
iOSデバイスのユーザーは、ボタンをタップするだけでコントロールイベントを開始できます。ボタンを設定すると、タップしたときにボタンが何をするかを伝えるタイトルまたは画像が表示されます。ボタンの外観は、タップされた状態が異なるため、タップダウンして持ち上げるとともに変化します。プライマリコントロールイベントは、ユーザーがボタンをタップした後にボタンを放すとトリガーされます。ボタンは、ユーザーが最初にボタンをタッチしたとき、ボタンを長押ししたとき、指を離す前にボタンのフレームの外に指をドラッグしてタップをキャンセルするなど、タップのさまざまな段階でコードを実行することもできます。
UIButton開発者向けドキュメント
p.197
Segmented Controls (UISegmentedControl) セグメント化されたコントロールは、複数のセグメントの水平セットです。各セグメントはディスクリートボタンとして機能し、ユーザーは限られたコンパクトなオプションセットから選択できます。この例では、App Storeから、ユーザーは有料アプリ、無料アプリ、またはトップ収益アプリの3つの選択肢でトップチャートビューを変更できます。
セグメント化されたコントロールは、コントロールの値が変更されたときにコードを実行します。この値は、コントロールのどのセグメントが選択されているかを表します。
テキストフィールドを使用すると、ユーザーはアプリに1行のテキストを入力できます。それらを使用して、少量のテキストを収集し、そのテキストに基づいて何らかのアクションを実行します。
Text Fields (UITextField)
テキストフィールドを使用すると、ユーザーはアプリに1行のテキストを入力できます。それらを使用して、少量のテキストを収集し、そのテキストに基づいて何らかのアクションを実行します。
テキストフィールドは、ユーザーがキーボードの「戻る」または「完了」キーを押すとき、またはユーザーがテキストを編集したときにコードを実行します。
Sliders (UISlider)
スライダーを使用すると、ユーザーは値をスムーズかつ段階的に調整できます。スピーカーの音量、画面の明るさ、色の値などを変更するコントロールに便利です。ユーザーは、最小値と最大値の間の連続範囲に沿って開始値から移動することで、スライダーを制御します。
スイッチは、ユーザーがスライダーの値を変更するとコードを実行します。
UISlider開発者向けドキュメント
Switches (UISwitch)
スイッチを使用すると、ユーザーはオプションのオン/オフを切り替えることができます。あなたはおそらく、設定アプリ全体でスイッチに気づき、使用したことがあるでしょう。
p.202
スライダーは、ユーザーがコントロールを切り替えるときにコードを実行します。
Date Pickers (UIDatePicker)
日付ピッカーは、日付と時刻の選択を管理するための簡単なインターフェースを提供し、ユーザーは特定の日付を迅速かつ効率的に指定できます。
p.203
スライドは、選択した日付または時刻の値が変更されるたびにコードを実行します。
UIDatePicker開発者向けドキュメント
View Controllers
UIKitは、ビューを制御し、子ビューを設定し、表示するものを制御し、ユーザーインタラクションに応答する特別なクラスを定義します。このクラスはUIViewControllerと呼ばれています。
最も一般的には、アプリ内の各画面はストーリーボード内のシーンで表され、ストーリーボード内の各シーンはUIViewControllerのサブクラスに関連付けられています。関連するUIViewControllerサブクラスは、シーンを制御するすべてのロジックを保持する.swiftファイルで定義されています。各UIViewControllerクラスには、シーンの親ビューを表すビュープロパティがあります。
最初のユニットで構築したLightプロジェクトを思い出してください。このプロジェクトには、1つのシーンを持つ単一のストーリーボードがあります。そのシーンは、ViewControllerと呼ばれるUIViewControllerサブクラスにリンクされていました。ビュープロパティを調整することでライトが切り替わった
p.204
ViewControllerの。このビュープロパティは、ストーリーボード内のシーンの親ビューと同じUIViewのインスタンスです。
画面にボタンを追加すると、ボタンはシーンのメインビューの子ビューになりました。アクションとアウトレットを配線するときは、そのシーンのビューコントローラーを定義したViewController.swiftファイルにリンクしました。
複雑なビューコントローラの作り方については、後のレッスンで学習します。しかし、今のところ、アプリに表示される各タイプの画面は、異なるタイプのビューコントローラーによって管理されていることを理解するだけで十分です。
もっと学ぶ場所
UIKitで最も一般的なビューとコントロールについて学んだばかりです。しかし、これらのUIKitツールやその他のUIKitツールの詳細については、どこに行きますか?先ほど学習したように、Appleには、あなたのような開発者がアプリを構築するためのシステムツールについてもっと学ぶのに役立つドキュメントの作成に専念する大規模なチームがあります。
このセクションの情報のほとんどは、それらのチームの1つによって書かれ、維持されたヒューマンインターフェースガイドラインと呼ばれる一連のガイドラインからのものです。UIKitについて詳しく知りたい場合は、developer.apple.comにアクセスして検索できます。
p.205
このラボの目的は、iOSで最も一般的なシステムアプリのさまざまなビューとコントロールを特定することです。シミュレーターを使用して設定、連絡先、ニュース、カレンダーを確認し、Pagesを使用して調査結果のアンケートに回答します。
ステップ1:アンケート用のPagesファイルを作成する
「1.8 UIKitサーベイ」という新しいPagesドキュメントを作成し、プロジェクトフォルダに保存します。
ラベル、画像ビュー、テキストビュー、テーブルビュー、ナビゲーションバー、タブバーの6つのビューにセクションヘッダーを追加します。
ボタン、セグメントコントロール、テキストフィールド、スライダー、スイッチの5つのコントロールのセクションヘッダーを追加します。
以下の手順で、一度に1つのアプリを実行すると、作成したばかりのセクションにスクリーンショットが追加されます。各アプリについて、すべてのビューとコントロールを見つける必要はありませんが、アンケートの各セクションに少なくとも1つのスクリーンショットが含まれていることを確認してください。
p.206 ステップ2:設定アプリを調査する
シミュレータアプリケーションを開き、[設定]をクリックします。
設定アプリをナビゲートして、少なくとも5つのビューと少なくとも3つのコントロールの例を見つけてください。
各例では、Shift-Command-4キーボードショートカットを使用してスクリーンショットを撮り、正しい見出しでスクリーンショットをドキュメントに追加します。
なじみのないビューやコントロールに遭遇した場合は、UIKitユーザーインターフェイスカタログを使用して識別し、新しいセクション見出しの下でドキュメントに追加します。
ステップ3:連絡先、ニュース、カレンダーを繰り返す
連絡先、ニュース、カレンダーの検索を繰り返します。
ステップ4:例を確認する
パートナーまたはiOS開発に精通していない人と文書を確認してください。
この記事が気に入ったらサポートをしてみませんか？