ボタンとラベルを使ってみる

　ボタンやラベルはアプリケーションの基本となる動作です。ここでは、ボタンやラベルの使い方を学ぶために、ボタンを押したらラベルの表示が変わるiOSアプリケーションを作ります。

プロジェクトの作成

　Xcodeを起動させて「Create a new Xcode project」を選択します。

iOSにおけるSingle View Applicationを選択します。

プロジェクト名と言語を選びプロジェクトを保存します。ここでは言語としてSwiftを使用します。

ボタンとラベルの設置

　ボタンとラベルを設置します。そのためにMain.storyboardを開きボタンとラベルを設置します。まずはツールボックスからButtonをドラッグ＆ドロップでViewへ設置します。

同様にしてLabelもViewへ設置します。

ボタンとラベルの位置を固定する

ボタンとラベルの位置を左上に固定します。ボタンとラベルを左上に設置します。そして、ボタンの左上の距離を0になるように固定します。

同様にラベルの左上の距離を以下のように設定します。

これで、画面が変わっても左上に位置が固定されます。

ボタンとラベルのプロパティを設定する

ボタンの設定

ボタンのプロパティを設定するために、ボタンを選択します。すると次のような設定ができるようになります。

ここでは、表示を「押してね」にしています。この場合、表示がうまくいかないので、ボタンの幅を広くしておきます。細かい設定の意味は以下の通りです。

ラベルの設定

同様にラベルをドラッグ＆ドロップでコードにつなげ、以下のように設定します。

これでラベルの表示が「…」となります。あと、ラベルの幅を広くしておきましょう。細かい設定の意味は以下の通りです。

ボタンを押した際の動作設定

ボタンを押した際にラベル表示が「ボタンが押された」と表示されるようにプログラミングします。

ボタンとラベルをコードにつなげる

まず、ViewController.swiftにあるViewControllerクラスへボタンを押した際の動作を書く必要があります。そのために左上にある丸が２つ重なったボタン

より画面を２表示にします。そして、コントロールを押しながらドラッグ＆ドロップでボタン動作のメソッドを追加します。

設定画面が出るので以下のようにActionにしてNameをButtonClickedとして設定します。

すると、ButtonClickedというメソッドが追加されます。

    @IBAction func ButtonClicked(sender: AnyObject) {
    }

この部分にボタンを押した際の動作を設定します。

　さらに、ラベルを操作できるようにするために同様にしてコント―ロルを押しながらドラッグ＆ドロップでラベルを追加します。ここではNameをlabelとします。

すると、labelというプロパティが設定されます。

    @IBOutlet var label: UILabel!

このプロパティをいじることで、ラベルの文字を変更することができます。

ボタンの動作を記述する

ボタンの動作メソッドButtonClickedを以下のように記述します。

class ViewController: UIViewController {

    @IBAction func ButtonClicked(sender: AnyObject) {
        label.text="ボタンが押された"
    }
    @IBOutlet var label: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

これにより、ボタンをおされるとラベルの文字が「」とかわります。実行すると以下のようになります。

ボタンが押される前

ボタンが押された後

著者：安井 真人(やすい　まさと)
@yasui_masatoさんをフォロー