ITblog

XcodeとSwiftでアプリ開発1 – ボタン押すとラベルのテキストが切り替わるアプリ

2015年07月12日

XcodeとSwiftでアプリ開発をする場合のメモについてです。

実際にXcodeで簡単なアプリを作るところからの勉強です。

ボタンを押してラベルを切り替えるアプリ

画面の中央にテキストがあって、ボタンを押すことでラベルの表示内容を切り替えるアプリです。

Xcodeで新規プロジェクト作成

Xcodeで新規プロジェクトを作成します。
「Single View Application」で作成します。

左側のファイルの中から「Main.storyboard」を選択します。

表示される正方形の画面が、実際に表示される画面のモデルです。
ここに色々なパーツを追加していきます。

まずは右下にあるパーツの中から「Label」を選択して画面にドラッグ&ドロップします。

同様に「button」を選択して画面にドラッグ&ドロップします。
表示位置を調整する機能もあります。

次に、「View Controller.swift」を開きます。

これが、コードの部分です。
ここに、プログラムを実行するときに必要なクラスやメソッドを追加していきます。

Xcodeでは、ここに直接ガリガリコードを書かなくても、このソースコードナイに先ほどのstoryboardからパーツをドラッグすることで必要なコードを追記できます。

まずは、先ほど作成したボタンとラベルとView Controllerのソードコード内にドラッグします。名前は適当に決めればOKです。

これで、先ほどのボタンとラベルを表す変数を定義できました。

次に、ボタンを押したときにラベルの表示を切り替えるメソッドを追加します。

storyboardで、ボタンを右クリックし、「Touch Down」の右側にある◯を先ほどのコードにドラッグします。
関数名は適当につけます。

あとは、ボタンを押した(Touch Down)時の処理をこの関数内に書くだけです。

例えば以下のように書きます。

label.text = “Hello World”

これでボタンを押したときに、ラベルを「Hello World」に変更するアプリが完成しました。

実行するとシミュレーターが立ち上がりますので、ボタンをクリックすると、ラベルが「Hello World」に切り替われば問題なく動作しています。

今日のポイント

Xcodeでのアプリ開発は、パーツの画面への設置にStoryboardを使う。
実行処理の記述にView Controllerを使う。
Storyboardからパーツをドラッグすることでコードの記述が最低限で済む。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です