【Swift/Xcode超入門】TextFieldを使ったアプリを作ってみよう

サトリク

この講座では、文字を入力するTextFieldを使ったアプリを作っていきます!

 

動作環境

item Version
Swift 5.2.4
Xcode 11.5

バージョンの確認方法

この講座の完成イメージ

今回開発するアプリは、講座3講座4講座5で学んだ知識を使って、入力フォームに入力した文字を次の画面に表示させるというアプリです。

 

アプリ開発手順

プロジェクトを作成

STEP.1
Xcodeを起動

下のDockからXcodeを起動しましょう。

もし、Xcodeを開いている方は、command + shift + 1を押すと、次の画面を開けます。

STEP.1
プロジェクト新規作成

Xcode起動

「Create a new Xcode project」を選択

STEP.2
テンプレート選択

Single View Appを選択する画像

①Single View Appを選択

②Nextをクリック

STEP.3
プロジェクトの設定

①「Product Name」にInputFormと入力

②「Language」はSwiftを選択

③「User Interface」でStoryboardを選択

④全てチェックなし

(そのほかは任意です。)

⑤「Next」をクリック

STEP.4
プロジェクトの保存

前の講座で作ったiOSAppDevPracticeを選択しましょう。

②Createをクリック

完了
これで、プロジェクトの作成は完了です。

 

storyboard(画面レイアウト)の編集

STEP.1
TextField配置

①Main.storyboardを選択

②右上のプラスボタンをクリック

③TextFieldを中央にドラッグ&ドロップ

これで、TextFieldが配置できました。

STEP.2
TextFieldの範囲を変更

TextFieldを横に広げます。

STEP.3
Buttonを配置

①プラスボタンをクリック

②Buttonを中央にドラッグ&ドロップ

STEP.4
ボタンの文言を変更

①ボタンを選択

② (Show the Attributes inspector)をクリック

③Titleを決定に変更し、FontをSystem 25.0に変更

STEP.5
ボタンのレイアウトを変更

①ボタンの範囲を広げる

② (Show the Attributes inspector)をクリック

③Text ColorをWhite Colorに変更

④Backgroundを任意(画像は#4c84bc)の色に変更

STEP.6
ViewController配置

①プラスボタンをクリック

②ViewControllerをドラッグ&ドロップ

これで、2つ目の画面ができました。

STEP.7
Labelを配置

①プラスボタンをクリック

②Labelをドラッグ&ドロップ

STEP.8
Labelレイアウトを変更

①Labelを広げる

(Show the Attributes inspector)をクリック

③FontをSystem 25.0に変更

STEP.8
実行して確認

storyboardがiPhone11なので、シミュレーターもiPhone11に変更します。

このようにな画面になっていれば成功です。

完了

 

画面遷移

STEP.1
Segueをつなげる

決定ボタンをcontrolを押しながら、2つ目の画面にドラッグ&ドロップ

PresentModallyを選択

STEP.2
実行して確認

ボタンを押したら、次の画面に遷移することを確認しましょう。

完了

確認ができたら次に進みましょう。

 

コードと紐付け

STEP.1
コードと2分割

①左の画面バーを選択

command + option + control + enterでコード画面と2分割にする

STEP.2
TextFieldを紐付け

11行目と12行目の間に、controlを押しながら、ドラッグ&ドロップ

 

①NameにnameTextFieldと入力

②Connectをクリック

これをすることで、コード上でTextFieldに入っている値を取得できるようになります。

STEP.3
2つ目の画面のファイルを作成

2つ目の画面の処理を書くファイルを追加します。

今の状態を図解するとこんな感じです。

①Cocoa Touch Classを選択

②Nextをクリック

STEP.4
Classの名前を作成

①ClassにNextViewControllerと入力

②Nextをクリック

STEP.5
保存先を選択

Createをクリック

 

これで、このような状態になりました。

STEP.6
紐付け

次は、紐付けていきます。

①Main.storyboardを選択

②右側の画面のバーをクリック

(Show the Identity inspector)を選択

④ClassをNextViewControllerを選択

 

これで、画面とswiftファイルが紐づきました。

STEP.7
コードと2画面

①右側の画面のバーを選択

command + option + control + enterで2分割

STEP.8
Labelを紐付け

11行目と12行目の間にcontrolを押しながら、ドラッグ&ドロップ

 

①NameにgreetingLabelと入力

②Connectをクリック

 

STEP.8
SegueにIDをつける

①Main.storyboardを選択

②Segueを選択

③ (Show the Attributes inspector)をクリック

④identifierにtoNextと入力

完了

これで、画面とコードの紐付けが完了です。

次は、処理を書いていきます。

 

コーディング

STEP.1
ViewControllerを開く

ViewControllerをダブルクリック

STEP.2
ヒントを表示

まずは、TextFieldにヒントを表示させます。

14行目あたりを以下のように変更してください。

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    nameTextField.placeholder = "名前を入力してください。"
}

この1行で、nameTextFieldのプレースフォルダーに「名前を入力してください。」と表示させています。

STEP.3
実行

実行すると、このようにTextFieldにヒントが表示されます。

STEP.4
NextViewControllerを開く

NextViewControllerをダブルクリック

STEP.5
変数の宣言

13行目あたりに、以下の1行を追加しましょう。

var nameData = ""

前の画面から受け取った値を入れる箱を用意するようなイメージです。

STEP.6
ViewControllerを開く

もう一度、ViewControllerを開きます。

STEP.7
Segueで値渡し

20行目あたりに以下のコードを追加しましょう。

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    if segue.identifier == "toNext" {
        let nextView = segue.destination as! NextViewController
        nextView.nameData = nameTextField.text!
    }
}

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {は、Segueの実行時に呼ばれます。

if segue.identifier == "toNext" {は、segueのIDがtoNextだった場合呼ばれます。

let nextView = segue.destination as! NextViewController2つ目の画面のViewControllerを取得します。

nextView.nameData = nameTextField.text!2つ目の画面のnameDataに入力された値を渡します。

STEP.8
NextViewControllerを選択

もう一度NextViewControllerを開きます。

STEP.8
Labelに代入

15行目あたりを以下のように変更しましょう。

override func viewDidLoad() {
    super.viewDidLoad()
    greetingLabel.text = "\(nameData)さんこんにちは!"
}

これで、2つ目の画面に配置したLabelに1つ目の画面で入力した名前を表示させます。

STEP.9
確認

ViewController.swift

//
//  ViewController.swift
//  InputForm
//
//  Created by RikutoSato on 2020/07/04.
//  Copyright © 2020 RikutoSato. All rights reserved.
//

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var nameTextField: UITextField!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        nameTextField.placeholder = "名前を入力してください。"
    }

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "toNext" {
            let nextView = segue.destination as! NextViewController
            nextView.nameData = nameTextField.text!
        }
    }
}

 

NextViewController.swift

//
//  NextViewController.swift
//  InputForm
//
//  Created by RikutoSato on 2020/07/04.
//  Copyright © 2020 RikutoSato. All rights reserved.
//

import UIKit

class NextViewController: UIViewController {
    @IBOutlet weak var greetingLabel: UILabel!
    var nameData = ""
    
    override func viewDidLoad() {
        super.viewDidLoad()
        greetingLabel.text = "\(nameData)さんこんにちは!"
    }
}
完了

 

実行して確認

実行して確認してみましょう。

このようになっていれば完成です!

まとめ

うまくできましたでしょうか?

わからない部分があれば、TwitterのDMか、コメントで質問して貰えばすぐ返します。(コメントはレス遅いかも)

次の講座では、BMIを計算するアプリを作っていきます!

 

ゼロから学ぶiPhoneアプリ開発入門


もっとみる