コンパイラかく語りき

import { Fun } from 'programming'

Swift実践入門1 レッスン3

引き続き、Swiftの練習です。

chuckwebtips.hatenablog.com

 

前回はラベルに関する操作を行いました。今回はUIボタンと呼ばれるパーツを操作します。

 

いつもどおり、下記のURLからプロジェクトをダウンロードします。

WordCollage - Teaching App Development with Swift - Swift Education

 

f:id:chuck0523:20160514105655p:plain

小話

まず、iOS開発まわりのちょっとした話があります。以下、箇条書きで。

 

上記の話は、3つ目のリンクでダウンロードできるプレゼンテーションに記載されています。

 

ボタンの設置

では、ここからはストーリーボードを操作していきます。

まずはボタンの追加です。

XCodeの右下のオブジェクトライブラリより、Buttonを選択。

f:id:chuck0523:20160514110814p:plain

 

ストーリーボードのエディタエリアにドラッグして設置します。

f:id:chuck0523:20160514110959p:plain

ボタンが設置されました。

 

ボタンの装飾

ボタンに対して、装飾をして、コンストレイントを追加しました。

f:id:chuck0523:20160514111257p:plain

シミュレータ上にきちんと反映されています。

 

ちなみに、現時点ではボタンをタッチしても何も起こりません。

 

ボタンの機能

ボタンに機能をつけます。

まずは、Alt+Command+Enterを押して、AssistantEditorを立ち上げます。

f:id:chuck0523:20160514111847p:plain

エディタが立ち上がりました。(左から2列目)

 

ドキュメントアウトラインに追加したボタンがあるので、それをcontrolキーを押しながら、エディタへとドラッグします。

すると、以下のように線が引かれます。

f:id:chuck0523:20160514112300p:plain

 

ドラッグを終えると、以下のダイアログが表示されます。

f:id:chuck0523:20160514112436p:plain

 

以下のように変更して、connectボタンをクリック。

f:id:chuck0523:20160514112520p:plain

 

すると、以下の関数が作成されました。

f:id:chuck0523:20160514112513p:plain

@IBActionというものが、コンポーネントとコードを結びつけています。

なので、この記述を削除してしまうと、結びつけが消失します。

 

関数の中身を記述します。

f:id:chuck0523:20160514112815p:plain

すごいですね。Web開発のCSSで言うところのbackground-color: blackですね。

 

ちなみに、shift+command+0でSwiftのドキュメントが開きます。

UIColor.blackColorはこんな感じですね。

f:id:chuck0523:20160514113128p:plain

 

確認

では、シミュレータで確認します。

f:id:chuck0523:20160514113726p:plain

change backgroundをクリック。

 

f:id:chuck0523:20160514113744p:plain

背景が黒に変わりました!

 

というわけで、UIボタンの使い方を軽く学びました。今日はここまで!

 

おまけ

最後の確認で、シミュレータが落ちることがありました。具体的には、ActionではなくOutletでコネクションを作成してしまい、それを消してなかったためでした。

 

以下の方法で解決。

ios.steppers-hi.net