このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

1から始めるSwift言語。SwiftでiPhoneApp製作 その4 「Button」

Swift

2016.02.12

この記事は最終更新日から1年以上が経過しています。

という事で、今回も前回の

1から始めるSwift言語。SwiftでiPhoneApp製作 その3 「Image View」

の続きとなります。

Button

今回は、Buttonに関してと、

Buttonをクリックする事によって何かActionをつけるところまで書いていければと思います。

今まで、Swiftナッシングでしたが今回から書いていきましょう!

例のごとく、一番右カラム(Utility Area)の右下にUIkitのリストで「Button」と検索。

スクリーンショット 2016-02-11 21.54.02

スクリーンショット 2016-02-11 21.53.50

「Button」オブジェクトがヒットしますので、

こちらを例のごとく「View Controller」の方にドラッグアンドドロップで配置。

「Button」オブジェクトを選択し、一番右カラム(Utility Area)のButtonの項目を確認すると、

Label同様にフォント、フォントサイズ、フォントの色などの設定が行えます。

スクリーンショット 2016-02-11 21.54.17

とりあえず、今回はデフォルトのままで。

実行してみると、クリックできるボタンが配置されていますが、

まだ何もプログラムを書いていないこともあって何も起きません。

という事で、swiftファイルを確認していきましょう。

ViewController.swift

 

一番左カラム(Navigator Area)の「ViewController.swift」ファイルを選択するとコードが表示します。

 

スクリーンショット 2016-02-11 21.55.48

class ViewControllerの中に、「viewDidLoad」関数と「didReceiveMemoryWarning」関数が記述されています。

「viewDidLoad」関数は、ViewControllerが呼び出されたときに、一番最初に呼び出される関数となっていて、

「didReceiveMemoryWarning」関数は、メモリがなくなってきた際に呼び出される関数となっています。

スクリーンショット 2016-02-11 21.56.03

「didReceiveMemoryWarning」関数はとりあえず置いておいて、

「viewDidLoad」関数に記述すると実行されそうですね。

ボタンを押された際に何か実行させていきたいのですが、

まず最初に、右上のタブでこのようなタブがありますので、

スクリーンショット 2016-02-11 21.55.37

このように変更することによって、

スクリーンショット 2016-02-12 0.30.21

Storyboardの表示と、swiftファイルのソースの表示の分割された状態となりますので変更しましょう。

スクリーンショット 2016-02-11 21.56.31

画面の分割を行えたら、「Button」オブジェクトを選択。

「controlキー」を押しながら、マウスを動かすと青い線が出てきますので、

「viewDidLoad」関数上部のあたりでドラッグアンドドロップします。

すると、以下のような表示が出てきますので、

 

スクリーンショット 2016-02-11 21.56.55

「Connection」を「Action」に変更。

スクリーンショット 2016-02-11 21.57.23

変更すると、以下の様な表示になるかと思います。

スクリーンショット 2016-02-12 0.36.26

Nameにはとりあえず、「submit」と入力。

Typeはそのまま「AnyObject」。

Eventもそのまま「Touch Up Inside」。

「Touch Up Inside」はタッチ終了後のイベントとなっていまして、その他に

スクリーンショット 2016-02-11 21.57.35

などのイベントが確認できます。

UI event

それぞれ、イベントは以下の通りとなっております。

Did End On Exitテキスト編集の終わりにEnter(Return)がタップされた時
Editing Changedテキストフィールドで文字が変更されたその時
Editing Did Beginテキスト入力が始まった最初の時
Editing Did Endテキスト入力が終わった時
Primary Action Triggered:詳細がわからず。。。
Touch Cancelテキスト入力動作がキャンセルされた時(アプリが切り替わりテキスト入力が中断してしまった時)
Touch Downパーツ内をタッチした時
Touch Down Repeatパーツ内で2回以上触れた時(ダブルタップ又はそれ以上の回数)
Touch Drag Enterパーツ内から外へドラックして再び戻ってきた時
Touch Drag Exitパーツ内から外へドラックされた時
Touch Drag Insideパーツ内でドラックが行なわれた時
Touch Drag Outsideパーツ内から外へドラックが行なわれた時
Touch Up Inside:パーツ内でで画面から指を離した時
Touch Up Outside:ボタン領域[外]で画面から指を離した時
Value Changed使用者又はプログラム経由にかかわらずテキストが変更された時

となっています。

ドラッグアンドドロップすると以下の様な関数ができていますので、

とりあえず、ボタンが押された際にログを出力したいと思います。

log出力は print関数で出力できますので、

スクリーンショット 2016-02-11 21.58.00

print("押されました")

func submit(sender: AnyObject) {

内に記述。

では、早速実行。

ボタンをタップすると、ログが出力されているのが確認できます。

スクリーンショット 2016-02-11 21.58.20

いいですね。

ちなみにswiftは関数など行末に「;」が無くても良い言語となっております。

では、続けてラベルの文字を変更させましょう。

Labelの文字を変更

入力した文字を表示させる「Label」と文字を入力する「TextField」を「View Controller」に配置します。

スクリーンショット 2016-02-11 22.41.32

スクリーンショット 2016-02-11 22.42.53

今回は数値のみを扱いたいので、「Number Pad」を選択します。

スクリーンショット 2016-02-11 22.45.18

以下の様な感じで配置。

スクリーンショット 2016-02-11 22.44.44

また、タブを以下の様に変更し、UIkitをswiftファイルの方にドラッグできる様にします。

スクリーンショット 2016-02-12 0.30.21

それぞれ、「Label」はresultLabel、「TextField」はnumberTextとNameに入力。

submitイベントが起きると、

resultLabel.text = numberText.text

でで、入力された数値を表示させます。

スクリーンショット 2016-02-11 22.44.36

早速、実行。

スクリーンショット 2016-02-11 22.45.36

数値を入力後、ボタン押下。

スクリーンショット 2016-02-11 22.45.49

変更されたのが確認できます!

さらに数値を掛け算して表示しましょう。

普通に掛け算を行おうとすると、

スクリーンショット 2016-02-11 22.48.18

エラーとなります。

入力された文字は型はstring型で、それを数値型の処理を行おうとしてエラーが発生しております。

このようにswiftは型推論を行い、エラーがあるとコンパイルができないようになっております。

それでは、数値型に変換したいと思います。

Int関数で数値型に変換しようとすると、

スクリーンショット 2016-02-11 22.48.39

まだ、エラー表示します。

numberText.textの後に”!”で強制的アンラップを行います。

この記述で、swiftに「値があるから心配しないで行ってくれよ」と宣言している形となります。

(オプショナル(出たー)の概念が出てきますので、一旦今回はこれで)

スクリーンショット 2016-02-11 22.48.48

これで大丈夫かと思いきや、まだエラーとなりますので、int()の後にも”!”付与します。

スクリーンショット 2016-02-11 22.48.59

エラーは無くなりました。

resultLabel.textに表示させたいので以下の様に文字列に埋め込み表示させます。

スクリーンショット 2016-02-11 22.49.05

文字列「””」内に埋め込む際は「\()」バックスラッシュ記述で埋め込むことが可能です。

Rubyでいう「#{}」ですね。

それでは、実行してみます。

スクリーンショット 2016-02-11 22.50.08

うまくいきましたね。

しかし、何も入力を行わず、ボタンをクリックすると、エラーが発生してアプリが落ちてしまいます。

スクリーンショット 2016-02-11 22.50.20

これでは使い物になりませんので、これを直していきたいと思います。

次回から、swiftの仕様について書いていければと思います。

Comment

Related Article

1から始めるSwift言語。SwiftでiPhoneApp製作 その7 基本的なデータ型、Optional型、値型と参照型(ClassとStruct)

2016.02.19

1から始めるSwift言語。SwiftでiPhoneApp製作 その6 PlaygroundでSwift記述

2016.02.15

1から始めるSwift言語。SwiftでiPhoneApp製作 その5 AutoLayout Constraints

2016.02.14

1から始めるSwift言語。SwiftでiPhoneApp製作 その4 「Button」

2016.02.12

1から始めるSwift言語。SwiftでiPhoneApp製作 その3 「Image View」

2016.02.12

1から始めるSwift言語。SwiftでiPhoneApp製作 その2 「Label」「TextField」

2016.02.11

1から始めるSwift言語。SwiftでiPhoneApp製作 その1

2016.02.11

CATEGORY LIST

LATEST NEWS

Rust - Actix Web mongo ユーザー登録 JWT認証

Rust

2024.03.24

Rust - Actix Web JWT 認証認可 APIの作成

Rust

2024.02.25

Rust - Actix Web × JSON 静的ファイルをAPIで返却

Rust

2024.01.19

Rust - Actix Web × MongoDB環境をサクッと起動

Rust

2024.01.18

5分で学ぶ RustでWave Function Collapse (波動関数崩壊アルゴリズム)

Rust

2024.01.15

LLaMAモデル GGMLフォーマット(llama.cpp)をRustフレームワーク Leptosを用いて M1MacMiniでサクッと動かす。

Rust

2024.01.11

2024年 狙っているモバイルノートPC

tool

2024.01.07

MacOS XcodeにSDL2を追加

tool

2023.12.26

php 7.4にアップデート

PHP

2023.12.24

5分で覚える Flutter Flameで作る Wave Function Collapse - 波動関数崩壊アルゴリズム

AI・Bot・algorithm

2023.12.20

Flutter - Flameでゲーム作成 (キャラクターの移動)

Flutter

2023.07.23

Flutterで作る ChatGPT Prompt Manager

Flutter

2023.07.12

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US