Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

Objecive-CユーザーのためのSwift入門 第5回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/03/05 14:00

 本連載では、Objective-Cの基本的なプログラムが出来る読者を対象に、Swiftを使ってアプリを開発する際の基本的な事柄を解説します。Objective-CもSwiftもC言語を母体としたプログラム言語なので両者に共通する概念は非常に多いです。Objective-CとSwiftとの最低限度の違いを踏まえつつ、Swiftでのアプリ開発にシフトして行けるような内容をサンプルを交えながら解説します。今回は、アプリの画面にUI部品を配置する方法/それらの操作時の処理について説明します。

目次

はじめに

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

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

対象読者

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

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

UI部品の利用

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

UI部品を配置する

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

リスト1 画面へボタンを配置する例(ViewController.swift抜粋)
// 位置とサイズを指定してボタンを初期化
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部品で発生したイベントに対して任意の処理を指定するメソッドで、その書式は次のとおりです。

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

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

UIControlEventの種類
名前 概要
UIControlEventTouchDown タッチダウン
UIControlEventTouchDownRepeat 複数回のタッチダウン
UIControlEventTouchUpInside コントロール内でのタッチアップ
UIControlEventTouchUpOutside コントロール外でのタッチアップ
UIControlEventTouchDownRepeat 複数回のタッチダウン
UIControlEventTouchDragInside UI上でのドラッグ
UIControlEventTouchDragOutside UIの内から外へのドラッグ
UIControlEventDragEnter UIの外から内へのドラッグ
UIControlEventValueChanged 値が変化した
UIControlEventEditingDidBegin 編集開始
UIControlEventEditingChanged 編集中
UIControlEventEditingDidEnd 編集終了
UIControlEventEditingDidEndOnExit 編集終了後フォーカスオフ時
UIControlEventAllEditingEvents 編集開始時
UIControlEventAllTouchEvents タッチすべて
UIControlEventAllEvents 上記すべて

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

リスト2 ボタンを押した際の処理の例(_:action:forControlEvents:)
// ボタンを押した際に 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部品以外のオブジェクトを利用します。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

修正履歴

  • 2015/02/19 22:10 リスト5内の"\(count)" を "\(count)" に変更

著者プロフィール

  • WINGSプロジェクト 片渕 彼富(カタフチ カノトミ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:Objective-CユーザーのためのSwift入門
All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5