SwiftでアプリのUIと画面の操作を実装する

はじめに

　前回までにiOSアプリ開発における画面の位置関係とコンテンツの配置について説明しました。連載第5回では、アプリの画面にUI部品を配置する方法／それらの操作時の処理について説明します。

　対象読者をObjective-Cが分かる方としている関係上、Objective-C自体の言語仕様やXcodeの使い方については解説を割愛する場合があることをご了承ください。同様にSwift自体の説明も必ずしも十分でない場合があります。そのような場合は末尾の参考文献等を参照してください。

対象読者

　本記事は、次の方を対象にしています。

• Objective-Cの基本的なプログラムが出来る方
• Xcodeを使える方

UI部品の利用

　iOSアプリでは、ボタンや入力欄といった何らかの操作を行うためのUIは、各部品単位でクラスが用意されています。クラス内には、該当するUIの動作時やデータのセット後の動きを制御するメソッドも用意されており、開発者自身がこのような機能を作る必要はありません。

UI部品を配置する

　UI部品もUIViewクラスを継承していますので、基本的に初期化処理を行った後にaddSubviewメソッドでオブジェクトを画面に配置します。画面にボタンを配置する処理は次のようになります。

// 位置とサイズを指定してボタンを初期化
var button : UIButton = UIButton(frame:CGRectMake(100, 200, 80, 30))
// 通常時のタイトルと色を指定
button.setTitle(" button ", forState: .Normal)
button.setTitleColor(UIColor.grayColor(), forState: .Normal)
// ボタンを角丸に
button.layer.cornerRadius = 10
// ボーダーの線の太さを指定
button.layer.borderWidth = 1
// 画面に配置
self.view.addSubview(button)

　実行結果は次の通りです。

ボタンの配置

操作時の処理を指定する

　UI部品の操作時の処理を指定する際には、主に次の2つが利用されます。

• 1）addTarget(_:action:forControlEvents:)メソッドで、UI部品で発生したイベントに対して処理を行う
• 2）デリゲートのメソッドをオーバーライドして処理を行う

　1）はUI部品が継承しているUIControllerクラスのメソッドを利用した処理です。2）のdelegateに関しては、UI部品ごとに利用できるdelegateクラスが異なり、実装の仕方も異なります。

　ここでは、1）について説明します。2）は次節のサンプルで説明します。

　1）のaddTarget(_:action:forControlEvents:)メソッドとは、UI部品で発生したイベントに対して任意の処理を指定するメソッドで、その書式は次のとおりです。

UI部品オブジェクト.addTarget(アクションのターゲット, action:セレクタ, forControlEvents:イベント)

　UI部品で発生するイベントには次のものがあります。

　上記のイベントに対して処理を指定することで、UI部品の操作に応じた処理を行うことができます。具体的なサンプルは次の通りです。

// ボタンを押した際に onPush メソッドを実行
button.addTarget(self, action: "onPush:", forControlEvents:.TouchUpInside)
...中略...
    // ボタンを押した際の処理
    func onPush(sender:UIButton)
    {
        // アニメーションを開始  1秒かけて最初はゆるやかに最後は一定の動きに
        UIView.animateWithDuration(
            1.0,
            delay: 0.0,
            options: UIViewAnimationOptions.CurveEaseIn,
            animations: {
                // ビューの位置、サイズの拡大、背景色の変更、透明度の変化を指定する
                self.SampleView.frame = CGRectMake(200, 300, 50, 40);
                self.SampleView.transform = CGAffineTransformScale(self.SampleView.transform, 1.5, 1.5);
                self.SampleView.backgroundColor = UIColor.redColor()
                self.SampleView.alpha = 0.5;
            },
            completion:{
                // 処理の完了時にはアラートを出す
                (value: Bool) in
                var alert : UIAlertView = UIAlertView()
                alert.title = "info"
                alert.message = "アニメーション終了"
                alert.addButtonWithTitle("OK")
                alert.show()
            }
        );
    }

　実行結果は次の通りです。

ボタンを押した際の処理

　セレクタで指定されたメソッドには、引数としてUI部品のオブジェクトが渡ります。セレクタにそれ以外の情報を渡したい場合は、グローバル変数やセッション等のUI部品以外のオブジェクトを利用します。