Xcode/Swiftの勉強メモ〜ラベルが入力フィールド、ボタンで切り替わる〜
2018年11月14日
Xcode/Swiftでアプリを作成する勉強メモです。
作るアプリの仕様
テキストラベル、入力テキストフィールド、ボタン
この3つのパーツがあって
・ テキストフィールドに文字を入力することで、テキストラベルが入力した文字列に変更される。
・ ボタンを押すと、テキストラベルがデフォルトのテキストに切り替わる
というシンプルな仕様です。
実装の流れ
ストーリーボードにそれぞれのパーツを設置する
ストーリーボードを選択すると、画面にパーツが設置できるので、テキストフィールド、ラベル、ボタンをそれぞれ設置します。
設置するには、View→Libraries→Show Libraryで一覧が表示される他、ストーリーボード右上のLibraryのメニューアイコンからも表示されます。
ラベル、フィールド、ボタンのパーツをそれぞれ設置して位置や大きさを調整します。
ViewConrtollerにプログラムを記述する
ストーリーボードはUI的な部分になりますが、ViewControllerはプログラムの実装部分になります。
ViewConrtollerクラスにUIパーツを結びつける
ViewConrtollerクラスの内部に、ストーリーボードのUIパーツをControl+ドラッグして、アウトレットを作成します。
画面を分割して、片方にストーリーボードを表示し、片方にコードを表示することで片方からドラッグしてコードとUIを連結することが可能です。
それぞれ以下のように名称をつけます
ラベル：mealNameLabel
テキストフィールド：nameTextField
ボタン：UIで設置してメソッド名SetDefaultLabelText
メソッドSetDefaultLabelText内には、以下のコードを追加します。
mealNameLabel.text = “Default Text”
この時点でコンパイルしてテストして見ると、ボタンを押すとラベルの名称が「Default Text」に切り替わるプログラムが実行されます。
テキスト入力部分を実装
それでは、テキストを入力することで、ラベルが切り替わる部分を実装します。
まずは、
class ViewController: UIViewController {
となっているのを
class ViewController: UIViewController, UITextFieldDelegate {
と、 , UITextFieldDelegate を追加します。
これは、クラスがコンパイラに UITextFieldDelegate でもあると伝えています。
次に、 viewDidLoad() メソッドに、
nameTextField.delegate = self
を追加します。
これは、ロードされたときに、テキストフィールドが自身のdelegateであるとしています。
textFieldShouldReturn、textFieldDidEndEditingメソッドを実装
UITextFieldDelegateには8つのメソッドが用意されていますが、そのうちの2つをここでは使用します。
textFieldShouldReturn は、 テキストフィールドが改行された場合に自動的に実行されるメソッドです。
ここでは以下の記述を追加します。
textField.resignFirstResponder()
return true
これは、テキストフィールドを入力してリターンキーを押したときに、ファーストレスポンダを終了するということで、具体的には入力キーボードを閉じます。
この処理を入れないと、リターンキーを押してもキーボードが閉じず入力を終えることができません。
textFieldDidEndEditing は、テキストフィールドの編集が終わったときに呼び出されるメソッドです。
ここでは
mealNameLabel.text = textField.text
を追加します。
これは、ラベルにテキストの入力を反映させる処理になります。
以上を実装すると、仕様を満たしたアプリが完成します。
delegateとは何か
このサンプルで、UITextFieldDelegateというのがでてきたのですが、その概念がよく分かりませんでした。
調べてみたところ、deleateとは委譲とか代理人という意味で、まず ViewContrllerクラスに、UITextFieldDelegateクラスを継承することでUITextFieldDelegateで定義されているメソッドが利用可能になるのですが、それだけではtextfieldで利用可能にならず、
nameTextField.delegate = self
のような宣言が viewDidLoadで必要になるということだったのですが、このあたりは分かるような分からないようなかんじでした。
表示された画像をタップすることでスマホから画像をアップロードできるアプリ
まずは、ストーリーボードに、オブジェクトライブラリから、「imag view」を選択して配置する。
左ナビのメニューから「Assets.xcassets」を選択し、「+」ボタンを選択して「New Image Set」を選択し、画像をドラッグドロップでアップロードする。
ストーリーボーそに戻って配置したimage viewを選択し、Attributeインスペクタメニューから「image」の項目を、先程アップした画像を選択する。これでデフォルトの画像が設定される。
次にタップジェスチャを設定する。
オブジェクトライブラリから「tap gesture」を選択し、image viewの上にドラッグアンドドロップする。
上のメニューにタップジェスチャアイコンができ、image viewオブジェクトとタップジェスチャが紐付けられる。
次に、ViewControllerにimage viewをコントロールドラッグし、アウトレットとして接続する。
タップジェスチャアイコンをVIewControllerにドラッグドロップし、タイプを「UITapGestureRecognizer」に設定する。
メソッドの中に実行する内容を追加する。
内容としては、キーボードを隠し、フォトライブラリの画面に画面遷移を行うというもの
ViewContorollerに UIImagePickerControllerDelegate, UINavigationControllerDelegate をスーパークラスとして追加
準備されている関数として、imagePickerControllerDidCancel、imagePickerControllerを追加。
関数は準備されているもので、内容が空になっているので、実行内容をそれぞれ追加する。
関数はスーパークラス「UIImagePickerControllerDelegate」の中にそれぞれ定義されている。
imagePickerControllerDidCancel
ユーザがフォトライブラリをキャンセルしたときに自動的に実行される。
ユーザがフォトライブラリでキャンセルしたときにフォトライブラリを消すというもの
imagePickerController
ユーザがフォトライブラリで画像を選択したときに自動的に実行される。
ユーザが選択したオリジナル画像をimage viewに設定し、フォトライブラリを消す
最後に、左メニューから「info.plist」を選択し、一番下の項目に「+」を選択し、「Privacy-Photo Library Usage」を選択し、Valueとして「Allows you to add ptors to your meals」とコメントを追加。
これは、iOS10から必要になった機能で、プライバシーを求める場合にユーザに対して文面を表示する機能で、ないと実行できません。
この場合はフォトライブラリにアクセスするので、必要になってきます。