プログラミングを始める。 - "もの"を表現する(class)3。

クラスをもう少し実際に使っている形を認識しながら使ってみます。

UIKit を中心にやっていきます。まずはUIKitってどんなものかを

UIKit | Apple Developer Documentation

で確認しておきます。このフレームワークはiOS、tvOS端末、iPhone、appleTVを動かしているものとなります。

その中の"User Interface"の"View and Controls"を見ていきます。

Views and Controls | Apple Developer Documentation

このページにはiPhoneを使うときの目にする部品のクラスがたくさん説明してあります。画面構成はこのクラス中心に出来上がってることがわかると思います。このクラスを使って実際に画面を構成してみます。

UIKitはGUIで簡単に使えるようになっているので、まずはそこから始めます。

それでは、Xcodeを使って実際に画面に部品を配置していきます。クラスを意識せず、見たまま、ドラッグ&ドロップで配置していきます。

まず新規プロジェクトでstorybordにチェックを入れて作ります。

新規のプロジェクトでは以下の構成で作られます。

"Main.storybord"を選択して

赤丸の"+"を押すと、"Objects"と呼ばれる、いろんな部品が出てきます。

色々配置してみます。

これで完了。次に”ViewController.swift"にコードを書いていきます。

”ViewController.swift"と"storybord"との紐ずけ方はちょっと古いですが、

部品の配置方法、ドラッグ＆ドロップで配置したあとにコードに紐ずけしていきます。

”ViewController.swift"に最初から以下のコードがあります。

import UIKit
class ViewController: UIViewController {

   override func viewDidLoad() {
       super.viewDidLoad()
       // Do any additional setup after loading the view.
   }

}

そして、以下のように配置します。気をつけることはボタンとスライダーはアクションの設定で紐付いています。

import UIKit
class ViewController: UIViewController {
   
   
   @IBOutlet weak var label: UILabel!
   
   override func viewDidLoad() {
       super.viewDidLoad()
       // Do any additional setup after loading the view.
   }
   
   @IBAction func button(_ sender: UIButton) {
   }
   
   
   @IBAction func slider(_ sender: UISlider) {
   }
   
}

これにコードを足してラベルにボタンを押したタイミングとスライダーを動かしたタイミングに表示させます。コードを足したのが以下。

import UIKit
class ViewController: UIViewController {
   
   
   @IBOutlet weak var label: UILabel!
   
   override func viewDidLoad() {
       super.viewDidLoad()
       // Do any additional setup after loading the view.
   }
   
   @IBAction func button(_ sender: UIButton) {
       
       label.text = "push!"
   }
   
   
   @IBAction func slider(_ sender: UISlider) {
       label.text  = String(sender.value)
   }
   
}

@IBOutlet weak var label: UILabel!

まず上記のように@IBOutletでラベルが定義され、

実行した場合にはボタンを押したときのアクションが、@IBActionで定義されています。

@IBAction func button(_ sender: UIButton) {
       label.text = "push!"
}

label.text = "push!" でラベルにpushと表記されます。

同じように、実行しスライダーを動かすアクションが、@IBActionで定義され、

@IBAction func slider(_ sender: UISlider) {
       label.text  = String(sender.value)
   }

label.text = String(sender.value)でラベルに可変で0から1まで数値が入ります。

storybordではGUIで簡単に設置できるようになっていますが、実際はクラスで定義されているものです。簡単に"部品"を配置するだけでアプリの操作画面が構成できます。