*

[Swift]Swiftチュートリアル。ボタンを真ん中に配置して処理を記述する方法。

公開日: : 最終更新日:2015/02/23 Swift

前回(SwiftData設定)の続き。

Swift入門まとめページはこちら→Swiftまとめページ

記事の概要

  1. ボタン等のGUIパーツの配置の仕方
  2. 画面の大きさが違っても配置箇所が真ん中になるようにする
  3. ボタンを押したらなにかしらの動きをつける

というわけで早速

MasterDetailをやめます

MasterDetailはよくわかりません。
初心者が読むには自動生成されたコードが読むのが面倒難しいです。
というわけでSingle View Applicationで作り直します。
wannabenote

SwiftDataを扱う前に、とりあえず基礎的なボタンを置いたりしてみます。
SwiftDataの設定は前回を参照してください。

初期画面

再生ボタンで実行すればわかりますが何もありません。
wannabenote
とりあえず何をするにしてもトリガーがないと!

ボタンの配置とセンタリング

というわけでボタンを配置してみましょう。
ついでに結果を表示するテキストラベルも置いていきます。

まずはプロジェクトの左ペインから Main.storyboard を選択します。
wannabenote

次に部品を表示するため、右下の ○ + □ マークをクリックします。
wannabenote
クリックするとカラフルな何かが出てきますね。

“Button”と書かれた部分をstoryboard上のView Controllerにドラッグ&ドロップします。
これで配置できます。
wannabenote

同様にLabelというパーツもドラッグして配置します。
実行するとこんな感じで、ButtonとLabelが表示されています。
Swift

一応ボタンをクリックすると反応するので、上手くボタンとして機能はしているのがわかります。
しかしながら、場所がかなりずれています。
ウィンドウの大きさによって真ん中に配置するようにしなくてはまともにできそうもありません。
というわけで設定しましょう。

真ん中に設定するには、設定したいアイテムをクリックして、右下の整列マークをクリックします。
そして「Horizontal Center in Container」にチェックを入れて、「Add Constraint」をクリック。
wannabenote

するとストーリーボードの画面上がこんな感じに表示されます。
wannabenote

これで実行してみましょう。
wannabenote
設定したボタンだけ真ん中に配置されました。
Labelも同様にすれば、真ん中に表示されるように配置できます。

ボタンの処理を追加する

配置が終わったら実際に動かしてみます。
適当にLabelのテキストでもいつもの”Hello World”に変えてみます。

その前に下準備です。
storyboardを使うと、ソースにパーツをドラッグ&ドロップすることが増えます。
というわけで、storyboardとソースを同時に表示できるように設定します。
といっても、簡単で、右上のこのマークをクリックするだけです。
wannabenote
元に戻すならその左のアイコンをクリックしてください。

アウトレットの追加

次に”Label”をフィールド部分にCtrlキーを押しながら、ドラッグ&ドロップします。(右クリックでドラッグ&ドロップでもいいですよ)
Swift

すると吹き出しが出てくるので”Name”を決めて、”Connect”をクリックします。
今回は”uiLabel1″という名前にしてみました。
swift

ソースにuiLabelが追加されてこんな感じになります。

import UIKit

class ViewController: UIViewController {

	@IBOutlet weak var uiLabel: UILabel!
	override func viewDidLoad() {
		super.viewDidLoad()
		// Do any additional setup after loading the view, typically from a nib.
	}

	override func didReceiveMemoryWarning() {
		super.didReceiveMemoryWarning()
		// Dispose of any resources that can be recreated.
	}


}

これでパーツをソース上で扱うことが出来るようになりました。
デザインとプログラムをつなげるこれを”アウトレット”って言うようです。

アクションの追加

やっと動きをつけるところまできました。
今度はボタンも先ほどの手順と同様にドラッグ&ドロップします。

先ほどは”Connection”が”Outlet”でしたが、今度は”Action”にします。
Nameは”showHello”にでもしておきましょうか。
swift

すると、今度は空のメソッドが追加されました。
swift

ここに処理を書くことで動きをつけることが出来ます。
では実際に処理を書いておきましょう。
クリックしたらLabelの文字が変更されるように以下のように書き加えます。

import UIKit

class ViewController: UIViewController {

	@IBOutlet weak var uiLabel1: UILabel!
	
	@IBAction func showHello(sender: AnyObject) {
		uiLabel1.text = "Hello World!!1!!1!"
	}
	
	override func viewDidLoad() {
		super.viewDidLoad()
		// Do any additional setup after loading the view, typically from a nib.
	}

	override func didReceiveMemoryWarning() {
		super.didReceiveMemoryWarning()
		// Dispose of any resources that can be recreated.
	}
}

簡単ですね。
uiLabel1というオブジェクトのプロパティに直接文字列を入れているだけです。
実行してみましょう。

ButtonをクリックするとLabelのテキストが変わりました。
swift

以上でボタンを設置して、アウトレット、アクションの追加までが出来るようになりました。
ここらへんの使い方があまり情報がないので、かなり苦労した記憶があります。

ad

関連記事

swift

[Swift]Swiftチュートリアル。UITableViewControllerを設定する。

データが取得できるようになったので、今度はデータを複数表示してみます。 Swift入門まとめペ

記事を読む

swift

[Swift]TableViewControllerにナビゲーションバーを追加する方法 その2

前回のTableViewControllerにナビゲーションバーを追加する方法の続きです。 S

記事を読む

swift

[Swift]Swiftチュートリアル。SwiftDataでCreate Tableする方法。

前回、ボタンを配置できたので、いよいよデータベースを扱いましょう。 Swift入門まとめページ

記事を読む

swift

[Swift]Swiftチュートリアル。SwiftDataでInsertを発行する方法。

CreateTableを前回出来るようになったので、今度はデータを挿入してみましょう。 Swi

記事を読む

swift

[Swift]Swiftチュートリアル。SwiftDataで取得したデータをTableViewにデータを出力する。

いよいよSwiftDataからデータを取得してTableDataViewに出力してみます。 S

記事を読む

swift

[Swift]Swiftチュートリアル。SwiftDataでデータをselectする方法。

データの挿入が出来たので、データを取得してみましょう。 Swift入門まとめページはこちら→S

記事を読む

swift

[Swift]Swiftチュートリアル。コントローラを複数綺麗に並べる。その2。

前回、Swiftで真ん中にコントロールを配置した続き。 Swift入門まとめページはこちら→S

記事を読む

swift

[Swift]TableViewControllerにナビゲーションバーを追加する方法

画面遷移するのに大切なナビゲーションバーのお話。 Swift入門まとめページはこちら→Swif

記事を読む

swift

[Swift]Swiftチュートリアル。コントロールを複数綺麗に並べる。

ちょっと趣向を変えて、コントロールの並べ方です。 綺麗にコントロールを並べるにはコツがいります

記事を読む

wannabenote

[swift]Swiftでデータを扱うアプリを作りたい。sqliteのラッパーSwiftDataを初期設定。

Swift入門まとめページはこちら→Swiftまとめページ 息抜きに 基本飽き性なので、ある

記事を読む

ad

Message

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

ad

  •  Auther;わなび

     「オープン系得意だよね? 俺のPCの調子悪いんだけど」という無茶振りから解き放たれゲームエンジニアに。
    C#とかUnityを扱います。
    Twitterフォロー大歓迎です。
    githubアカウント→wannabenote
  • follow us in feedly
PAGE TOP ↑