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

button

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

プロジェクトの作成

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

createnewproject

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

singleview

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

3

ボタンとラベルの設置

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

ボタンの設置

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

ラベルの設置

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

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

constrains

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

constrains2

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

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

ボタンの設定

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

ositene

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

 

ラベルの設定

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

label

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

 

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

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

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

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

メニューXcode

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

button

設定画面が出るので以下のように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.
    }


}

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

ボタンが押される前

before

ボタンが押された後

after

著者:安井 真人(やすい まさと)