ホーム > 技術系 > Xcode

Xcodeのアーカイブ

Xcode/Swiftの勉強メモ〜ラベルが入力フィールド、ボタンで切り替わる〜

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から必要になった機能で、プライバシーを求める場合にユーザに対して文面を表示する機能で、ないと実行できません。
この場合はフォトライブラリにアクセスするので、必要になってきます。

Xcode+Swiftでじゃんけんアプリを作ってみた

最近勉強もかねて、簡単なiOSアプリを作ってみています。

今日は、練習も兼ねて簡単なじゃんけんアプリを作ってみました。

言語はSwiftでOSはiOS8.4、Xcodeのバージョンは7のベータ版です。

じゃんけんアプリの仕様

・相手のジャンケンの画像が表示されている
・相手が何の手を出した、勝ったか負けたか説明のテキストが表示される。
・こちらがジャンケンでどの手を出すかのボタンが3つ置いてあり、ボタンを押すとジャンケンが実行
・相手のジャンケンの画像が表示され、勝ったか負けたか、あいこかが表示される

アプリ作成の手順

1・Xcodeで新しいプロジェクトを作成して「Single View」で作成をする。

2・Storyboardへの配置

Storyboardに、こちらが出すグー、チョキ、パーに対応するボタンをそれぞれ画面に配置する。
相手の手を表す画像を設置するため、「UIImageview」を画面に配置する。
説明のテキストを表示するため「Label」を中央に設置する。
これらのオブジェクトをauto layoutを使って表示位置を調整する。

3・画像のアップロードと設置

グー、チョキ、パーを表す画像を表示するため、画像をそれぞれ準備してプロジェクトフォルダにアップロードする。
アップロードはドラッグ&ドロップでも行えるが、画面左下の「+」ボタンから「Add files to ~~」からアップロードしてもよい。

それぞれのジャンケンのボタンを画像化するため、ボタンのプロパティから画像を選択する。
※ 画像を選ぶと右側のプロパティ画面に画像を選ぶところがある。

相手の手を表すUIImageViewに画像を設定する。
※ 同様に右側のプロパティ画面から設置する。

4・じゃんけん処理コードの記述

Story Boadに設置したそれぞれのオブジェクトをViewControllerのコードにCtrlを押しながらドラッグしてOutlet接続を行います。

また、3種類のジャンケンボタンを右クリックすると表示されるメニューの「Touch Down」の右側にある◯をView Controllerにそれぞれドラッグしてボタンを押したときの関数を作成します。関数名は適当につけたらOKです。

以下は、私が作成した関数のサンプルです。

これで問題なければ実行できるはずです。

以下は、今回作成したアプリの画面キャプチャです。

ジャンケン画像1

ジャンケン画像2

ジャンケン画像3

Xcodeでタブ画面と画面ごとの処理を実装する

Xcodeでのアプリ開発について、まだまだ初心者ですが、勉強中です。

本日は、勉強したタブ画面の実装と、タブ画面ごとの処理の実装について書いてみます。

まず、タブ画面の作成については、下記のサイトの説明が分かりやすかったです。

第16回 タブコントローラーを表示させる|ドットインストールでiPhoneアプリ作成を勉強 | 経験知

詳しくは上記サイトを見てもらうとして、大まかな流れとしては

1・Story BoardへのTab Controllerへの埋め込み
2・追加したい画面の数だけView Controllerを追加
3・Tab ControllerとView Controllerを繋ぐ

といったところです。
これだけで、タブで画面表示が切り替わるアプリが完成します。

ただ、ここまでは簡単に出来たのですが、問題に突き当たりました。

それは、追加したView Controllerの画面への処理(ロジック)を記述できないということです。

追加したView Controllerから、もともとあったView Controllerへ定義しようと思っても…できません。

しかし、結果として、新しいViewConrllerのClassを定義してやる必要があるということが分かりました。

Xcodeの画面の左のプロジェクトのファイルが表示されているところの左下に「+」というボタンがあるので、そこをクリックすることで、新しいViewControllerのClassをプロジェクトに追加できます。

あとは、そのClassファイルと、追加したView Contorollerを紐付けてやることで、追加したClassファイルに処理を追加できることができるようになりました。

XcodeでWebviewを画面ピッタリに表示する

Xcodeで、とりあえず簡単にWebviewを使ってシンプルにウェブページを表示するだけのアプリを作ってみました。

手順
1・Single Veiwのプロジェクト作成
2・storyboadに、右下からWebviewのパーツをドラッグ&ドロップ
3・Webviewを選択し、大きさを画面ちょうどに調整
4・Webviewを選択し、右下にある四角い図形を選択し、Add Constrantsで、上が20、左右下は0に変更。Add 4 constrantsで適用

add 4 constraints

5・Webviewを選択し、右上の「Scales Page To Fit」にチェックを入れる

「Scales Page To Fit」にチェックを入れる

6・ViewControllerに必要なコードを追記

これでコンパイルして実行。

すると、ウェブページは表示されたのですが、右に謎のマージンが開いた状態に。

ここは、左メニューの「Constraints」で、設定されているConstraintsをチェックしていき、項目の中にある「Second item」を調整していくことで画面ピッタリに表示されるようになりました。


↓Story boardのConstraintsが余白に関係しているので、この中から関係ある余白の設定を調整する。


↑Relative to marginのチェックを外す

ポイントとしては、「Scale to Page To Fit」にチェックを入れることと、Constaraints追加後、左メニューに表示される各「Constraints」の設定が余白を表しているので、変な余白が入っている場合は、大抵このどこかにおかしいところがあるということです。
ここを調整していくことで画面ピッタリに表示されるようになりました。

怪しいConstraintsの設定のSecond Itemを「Superview.Leading Margin」にして、Relative Marginのチェックを外してみてください。

ホーム > 技術系 > Xcode

フィード

ページの上部に戻る