SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Objective-CユーザーのためのSwift入門

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 前回までに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部品以外のオブジェクトを利用します。

次のページ
デリゲートの利用

修正履歴

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Objective-CユーザーのためのSwift入門連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8473 2015/03/05 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング