Xcode 全パーツ特徴まとめ アプリ開発勉強1

スクリーンショット 2019-06-03 11.51.35.png:「Label」

サイズ変更可能なの静止テキスト。

スクリーンショット 2019-06-03 11.51.51.png:「Button」

タップボタン。タップされた時にそのオブジェクトのアクションを起こす。

スクリーンショット 2019-06-03 11.52.04.png:「Segmented Control」

それぞれ個別のボタンとして機能する。

スクリーンショット 2019-06-03 11.52.12.png:「Text Field」

タップしたときに文字を入力できる。

スクリーンショット 2019-06-03 11.52.21.png:「Slider」

スライダーの表示、値の範囲。

スクリーンショット 2019-06-03 11.52.28.png:「Swirch」

スイッチ。コントロールのタップして値を切り替える。

スクリーンショット 2019-06-03 13.15.42.png:「Activity Indicator View」

不明な期間のタスクまたはプロセスの進行状況に関するフィードバックを提出する。ロード中に使うクルクル

スクリーンショット 2019-06-03 13.15.57.png:「Progress View」

進行状況の表示時間の経過に伴うタスクの進行状況を表示する。

スクリーンショット 2019-06-03 13.16.07.png:「Page Control」

複数画面にまたがるページの現在の位置を表示し、移動をサポートしてくれる部品。

スクリーンショット 2019-06-03 13.16.18.png:「Stepper」

プラスボタン(+)とマイナスボタン(-)で値の増減を管理するボタンである。

スクリーンショット 2019-06-03 13.16.25.png:「Horizontal Stack View」

横(水平方向)に並んだサブビューを持たせ、管理します。

スクリーンショット 2019-06-03 13.16.32.png:「Vertical Stack View」

縦(垂直方向に並んだサブビューを持たせ、管理します。

スクリーンショット 2019-06-03 14.15.19.png:「Table View」

配列などで格納されたデータをリストとして画面に表示したい場合に使います。セルを使用するには、UITableViewCellを使用。

スクリーンショット 2019-06-03 14.15.26.png:「Table View Cell」

Table Viewを選択するとそのCellの画像が画面に表示される。

スクリーンショット 2019-06-03 14.15.33.png:「Image View」

単一の画像、または画像配列で表示されたアニメーションのを表示する。

スクリーンショット 2019-06-03 14.15.42.png:「Collection View」

画像をマス目に配置する。

スクリーンショット 2019-06-03 14.15.47.png:「Collection View Cell」

Collection Viewと一緒に使うセル。

スクリーンショット 2019-06-03 14.15.58.png:「Collection Reusable View」

セクションを表示するための部品。

スクリーンショット 2019-06-03 15.26.57.png:「Text View」

ホイールを回してデータを選択する部品である。

スクリーンショット 2019-06-03 15.27.34.png:「Scroll View」

自分より大きい部品をスクロールして見ることができるビューである。

スクロールはフリック操作で行う。

スクリーンショット 2019-06-04 9.38.48.png:「Date Picker」

ホイールを回して時刻や日付を設定するための部品である。

iOSの時間設定にも使われている。

スクリーンショット 2019-06-04 9.39.16.png:「Picker View」

リストから項目を選択する。

スクリーンショット 2019-06-04 9.39.23.png:「Visual Effect View with Blur」

中の部品が曇りガラスのようになる入れ物である。ブラーエフェクトは1枚の曇りガラスを置くイメージ。

スクリーンショット 2019-06-04 9.39.30.png:「Visual Effect View with Blur and Vibrancy」

バイブレンシーエフェクトは、中に入れた部品すべてが曇りガラスのようになる。

スクリーンショット 2019-06-04 9.31.22.png:「Map Kit View」

地図を表示するために使う。

スクリーンショット 2019-06-04 9.31.29.png:「MetalKit View」

画像処理やデータ並列演算などを効率的に行うためのフレームワークです。

スクリーンショット 2019-06-04 9.31.38.png:「GLKit View」

OpenGL ES対応のデフォルト実装を提供。3Dのものなど

スクリーンショット 2019-06-04 9.31.46.png:「SceneKit View」

3Dゲームを手軽に作れるフレームワーク。

スクリーンショット 2019-06-04 9.31.54.png:「SpriteKit View」

2Dゲーム用フレームワークである。

スクリーンショット 2019-06-04 13.42.46.png:「ARKit SceneKit View」

ARでで3Dモデルを読込み&表示。

スクリーンショット 2019-06-04 13.43.12.png:「ARKit SpriteKit View」

ARで2Dモデルを読込み&表示。

スクリーンショット 2019-06-04 13.43.29.png:「Web View (deprecated)」

指定したURLのWebページを読み込んで表示するUIパーツです。

スクリーンショット 2019-06-04 13.43.37.png:「WebKit View」

Webコンテンツをアプリに埋め込むことができます。

スクリーンショット 2019-06-04 13.43.47.png:「View」

Viewを管理・操作(表示・非表示・配置・アニメーションなど)をする役割をもつ。

スクリーンショット 2019-06-04 13.43.58.png:「Container View」

Viewの中にさらにviewを入れ込む事のできる。

スクリーンショット 2019-06-04 14.23.06.png:「Navigation Bar」

画面タイトルやページ移動のボタンを表示するために使われる入れ物である。例えば、iOSの設定画面の上部に表示されていて、ボタンを押せば前のページに戻ることができる。

スクリーンショット 2019-06-04 14.23.17.png:「Navigation Item」

Navigation Bar(以下、ナビゲーションバー)に表示するタイトルやボタンを管理する部品である。

スクリーンショット 2019-06-04 14.23.28.png:「Toolbar」

補助的な機能を持ったボタン(UIToolbarButtonItems)を配置するために使われるパーツです。

スクリーンショット 2019-06-04 14.23.38.png:「Bar Button Item」

ナビゲーションバーやツールバーの中に並べるボタンやスペースの部品のことである。

スクリーンショット 2019-06-04 14.23.47.png:「Tab Bar」

画面を切り替えるボタンを並べるためのバーである。

ツールバーでも似たようなことができるが、タブバーを使うと選択中のボタンの色を変えたり、ボタンの角にバッチを表示したりを作り込みせずに実装できるのが嬉しい。

スクリーンショット 2019-06-04 14.23.53.png:「Tab Bar Item」

Tab Bar(以下、タブバー)に配置するボタンやタイトルを持つ部品のことである。

Tab Bar Controllerを使う場合、1つのビューコントローラーにつき1つのタブバーアイテムが割り当たる。

スクリーンショット 2019-06-04 14.46.42.png:「Search Bar」

検索文字列を入力するために使われるテキストフィールドである。UITextFieldでも同じようなことができるが、サーチバーを使うとブックマークボタンや絞り込み検索を行うためのスコープバーなど、検索の補助機能が使えるので便利。

iOSの設定画面にサーチバーがあり、設定項目を検索できるようになっている。

スクリーンショット 2019-06-04 14.46.55.png:「Search Bar and Search Display Controller」

テキスト入力用のテキストフィールド、検索ボタン、ブックマークボタン、およびキャンセルボタンが用意されている。ストーリーボードでViewに挿入すると検索ディスプレイコントローラーへの適切な接続を自動的にしてくれる

スクリーンショット 2019-06-04 14.47.01.png:「Fixed Space Bar Button Item」

アイテム間の空きを調節する。

スクリーンショット 2019-06-04 14.47.09.png:「Flexible Space Bar Button Item」

両サイドにアイテムを配置することができる。

スクリーンショット 2019-06-04 14.47.20.png:「View Controller」

ViewControllerの追加できる。複数の画面。

スクリーンショット 2019-06-04 14.47.26.png:「Storyboard Reference」

Stroryboardを分割することができる機能。Storyboard全体の可視性向上

5つのタブを把握する度に、いちいち縮小表示しなくて済む。

また画面数が増えた場合においても、可視性が維持できる。

スクリーンショット 2019-06-05 15.31.13.png:「Navigation Controller」

ページ上部にナビゲーションバーを表示し、複数画面を階層的に行ったり来たりできるようにする部品である。

スクリーンショット 2019-06-05 15.31.23.png:「Table View Controller」

UICollectionView(以下、コレクションビュー)を管理するコントローラーである。

部品の配置はTable View Controllerに似ていて、ビューコントローラーは直下にViewが配置されているのに対し、コレクションビューコントローラーは直下にCollection View(以下、コレクションビュー)が配置されているのが特徴である。

そのため、コレクションビューコントローラーを使うと画面いっぱいにコレクションビューが表示される。

スクリーンショット 2019-06-05 15.31.31.png:「Collection View Controller」

コレクションビューの管理を専門とするView Controller。

スクリーンショット 2019-06-05 15.31.38.png:「Tab Bar Controller」

複数画面と接続し、UITabBar(以下、タブバー)に並べられたボタンで画面の切り替えを行う部品である。

画面の追加削除が楽にできる。

スクリーンショット 2019-06-05 15.31.44.png:「Split View Controller」

画面を左(以下、マスター部)と右(以下、ディテール部)に分割し、マスター部の項目を選択するとディテール部に詳細が表示されるような仕組みを提供するコントローラーである。

スクリーンショット 2019-06-05 15.31.51.png:「Page View Controller」

めくる、または、ドラッグで画面を遷移させるコントローラーである。

セグエでも似たようなことができるが。ページビューコントローラーを使うと、セグエの定義やスワイプ検知を実装せずに簡単にビューコントローラーの切り替えを実装できるので便利。

アプリのマニュアルなど、外部データが不要な画面を連続して表示する場合などに活用できる。

スクリーンショット 2019-06-05 16.24.49.png:「GLKit View Controller」

GLKit Viewを管理するコントローラー。

スクリーンショット 2019-06-05 16.24.58.png:「AVKit Player View Controller」

音声や映像を再生することができます。

スクリーンショット 2019-06-05 16.25.08.png:「Object」

nterface Builderで直接利用できないオブジェクトとコントローラ用のテンプレートを提供します。

スクリーンショット 2019-06-05 16.25.16.png:「Tap Gesture Recognizer」

タップしたときに対応する処理を設定する。

スクリーンショット 2019-06-05 16.25.23.png:「Pinch Gesture Recognizer」

部品を2つの指で摘んで外側に広げたとき、または、内側に狭めたときを検知する部品。

スクリーンショット 2019-06-05 16.25.40.png:「Rotation Gesture Recognizer」

部品をタッチしている2つの指の座標を結ぶ直線が回転したことを検知する部品。

スクリーンショット 2019-06-06 16.36.44.png:「Rotation Gesture Recognizer」

スワイプを検知する部品である。スワイプとは、画面に触れた指を上下左右いずれかの方向に素早く動かす動作のことをいう。

スクリーンショット 2019-06-06 16.36.59.png:「Pan Gesture Recognizer」

ドラッグ&ドロップを検知する部品である。

スワイプリコグナイザーは素早く指を動かさなければ検知されないが、パンリコグナイザーはゆっくり指を動かしても検知され、元の位置からの移動量を正確に把握することができる。

スクリーンショット 2019-06-06 16.37.09.png:「Screen Edge Pan Gesture Recognizer」

画面端のドラッグを検知する部品である。

iOSの画面端から内側に向かってスワイプしたときにニョキッと現れる通知センターやコントロールセンターもスクリーンエッジリコグナイザーが使われている。

スクリーンショット 2019-06-06 16.37.21.png:「Long Press Gesture Recognizer」

長押しを検知する部品である。似ている部品のTap Gesture Recognizer(以下、タップリコグナイザー)は指が画面に触れただけで検知されるので誤タップが起きやすい。

一方、ロングプレスリコグナイザーは検知までに一定時間が必要なので誤タップが起きにくい。ゆえに、誤タップしそうな状況を回避するために利用させることが多い。

スクリーンショット 2019-06-06 16.37.39.png:「Custom Gesture Recognizer」

組み込みのUIKitジェスチャーレコグナイザーが希望する動作を提供しない場合は、カスタムジェスチャーレコグナイザーを定義できます。UIKitは、タップ、長押し、パン、スワイプ、回転、およびピンチのタッチシーケンスを処理するための高度に設定可能なジェスチャ認識機能を定義します。他のタッチシーケンスの場合、またはボタンを押す操作を含むジェスチャを処理する場合は、カスタムジェスチャ認識機能を定義できます。

参考文献

はじはじアプリ体験

https://hajihaji-lemon.com/smartphone/

AppleDeveloper

https://developer.apple.com/