ボタンとラベルを使ってみる
2011年3月10日:iOS
ボタンやラベルはアプリケーションの基本となる動作です。ここでは、ボタンやラベルの使い方を学ぶために、ボタンを押したらラベルの表示が変わるiOSアプリケーションを作ります。
プロジェクトの作成
Xcodeを起動させて「Create a new Xcode project」を選択します。
iOSにおけるSingle View Applicationを選択します。
プロジェクト名と言語を選びプロジェクトを保存します。ここでは言語としてSwiftを使用します。
ボタンとラベルの設置
ボタンとラベルを設置します。そのためにMain.storyboardを開きボタンとラベルを設置します。まずはツールボックスからButtonをドラッグ&ドロップでViewへ設置します。
同様にしてLabelもViewへ設置します。
ボタンとラベルの位置を固定する
ボタンとラベルの位置を左上に固定します。ボタンとラベルを左上に設置します。そして、ボタンの左上の距離を0になるように固定します。
同様にラベルの左上の距離を以下のように設定します。
これで、画面が変わっても左上に位置が固定されます。
ボタンとラベルのプロパティを設定する
ボタンの設定
ボタンのプロパティを設定するために、ボタンを選択します。すると次のような設定ができるようになります。
ここでは、表示を「押してね」にしています。この場合、表示がうまくいかないので、ボタンの幅を広くしておきます。細かい設定の意味は以下の通りです。
ラベルの設定
同様にラベルをドラッグ&ドロップでコードにつなげ、以下のように設定します。
これでラベルの表示が「…」となります。あと、ラベルの幅を広くしておきましょう。細かい設定の意味は以下の通りです。
ボタンを押した際の動作設定
ボタンを押した際にラベル表示が「ボタンが押された」と表示されるようにプログラミングします。
ボタンとラベルをコードにつなげる
まず、ViewController.swiftにあるViewControllerクラスへボタンを押した際の動作を書く必要があります。そのために左上にある丸が2つ重なったボタン
より画面を2表示にします。そして、コントロールを押しながらドラッグ&ドロップでボタン動作のメソッドを追加します。
設定画面が出るので以下のように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さんをフォロー