【Swift/Xcode超入門】ボタンを使った簡単なアプリを作成してみよう

サトリク

ボタンを使った簡単なアプリを作成してみましょう!

 

動作環境

item Version
Swift 5.2.4
Xcode 11.5

バージョンの確認方法

この講座の完成イメージ

今回開発するアプリは、Buttonを押したら、上部のLabelHelloWorldになるというアプリです。

 

アプリ開発手順

プロジェクトを作成

前回のプロジェクトでもいいですが、プロジェクト作成に慣れるために、もう一度新しいプロジェクトを作成します。

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」にSampleBtnAppと入力

②「Language」はSwiftを選択

③「User Interface」でStoryboardを選択

④全てチェックなし

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

⑤「Next」をクリック

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

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

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

 

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

まずは、アプリの見た目の部分を作っていきましょう。

STEP.1
Main.storyboardを選択

左側のメニューから、「Main.storyboard」を選択

STEP.2
Labelを配置

①右上のプラスボタンか、command + shift + Lを押して、Objectsウィンドウを表示

Labelをドラッグ&ドロップ

STEP.3
Buttonを配置

①右上のプラスボタンか、command + shift + Lを押して、Objectsウィンドウを表示

Buttonをドラッグ&ドロップ

Buttonというのはその名の通り、押したら何かしらのアクションが起こすことができます。

STEP.4
Labelの範囲を拡大

選択しやすいように、Labelの範囲を広げておきましょう。

STEP.5
LabelのFontサイズを変更

Labelを選択

②「Font」をsystem 30.0にし、「Alignment」を中央揃えにする

STEP.6
Buttonの範囲を拡大

選択しやすいように、Buttonの範囲を広げておきましょう。

STEP.7
ButtonのFontサイズを変更

Buttonを選択

②「Font」をSystem 30.0に変更

STEP.8
Labelの位置を設定

Labelを選択

を選択

③上:100、左:0、右:0に設定し、赤色の線にする

Add 3 Consrraintsをクリック

ここでは、Labelの位置を的確に決めます。今回は、Labelの上の空間が100で、左右が0で固定します。

これをすることによって、iPhoneの様々なサイズに対応できます。

STEP.8
Buttonの位置を設定

Buttonを選択

を選択

③「Horizontally in Constraints」と「Vertically in Constraints」にチェックを入れ、

 「Add 2 Constraints」をクリック

この二つにチェックをいれることによって、画面の上下左右中央揃えになります。

STEP.9
実行

ストーリーボードがiPhone11のレイアウトなので、iPhone11の実機で実行しましょう。

左上のiPhone SE(2nd generation)というところをiPhone11に変更しましょう。

左上の再生ボタンかcommand + rで実行しましょう。

このようになれば成功です。ボタンを押しても何もおきません。

完了

ストーリーボード(画面レイアウト)の編集はこれで終わりです。

 

Swiftファイルと紐付け

画面は通常、storyboardファイルと、Swiftファイルの2つのファイルで構成されます。

・storyboardファイルは、レイアウトを作成するために使います。

・swiftファイルは、機能を作成するために使います。

先ほど、Storyboardでレイアウトを作ったので、そのレイアウトとSwiftファイルを紐づける作業をします。

STEP.1
画面を2分割

Main.storyboardを表示している状態で、command + control + option + enterで画面を2分割しましょう。

これで、storyboardファイルと、Swiftファイルが一緒に表示されました。

STEP.2
Labelの紐付け

Labelを選択し、controlを押しながら、11行目と12行目の間にドラッグ&ドロップしましょう。

Nameにlabelと入力し、「Connect」をクリック

これで、Labelの紐付けが完了しました。

STEP.3
Buttonの紐付け

次は同じように、Buttonも紐付けしていきましょう。

Buttonを選択し、controlを押しながら、18行目と19行目の間にドラッグ&ドロップしましょう。

NameにbtnActionと入力し、「Connect」をクリック

これで、Buttonの紐付けも完了しました。

完了

 

コーディング

Buttonを押した時に、Labelの文字列がHelloWorld!になるという処理を書いていきましょう。

18行目あたりに、以下のように1行を追加してみてください。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var label: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func btn(_ sender: Any) {
        //追加
        label.text = "HelloWorld!"
    }
}

追加したlabel.text = "HelloWorld!"というのは、

「labelにHelloWorld!という文字を代入する」という命令文です。

実行して確認

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

おそらく、ボタンを押すと、LabelがHelloWorld!に切り替わりと思います。

まとめ

HelloWorld!を表示できましたでしょうか?

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

次の講座では、2つの画面を使ったアプリを作成していきたいと思います。

 

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


もっとみる