iosアプリ開発の始め方第2回です。
前回はプロジェクトを立ち上げるところまで進めましたね。
前回がまだの方はこちら
今回は、
アプリの開発を進めて行きます！
さて、今回作るのは
ボタンをタップすると、画面の色が変わるアプリです！！
シンプルですが、始めにはぴったりだと思います。
まずは前回のプロジェクトを開いてください。
そして、
『Main.storyboard』を開いてください。
Contents
Interface builderを使う！！
interface builderとは見た目を作る機能のことです。
StoryBoardをぎょぎょっといじって行きます。
さて、
Main.storyboardを開くと
このような画面が出てくると思います。
UIButtonを使う！
『UIButton』とは
簡単に言うとボタンのことです！
UIButtonについてはこちらをどうぞ！
やや難しめです！
アプリについていて、
タップするとなんらかの動きがあるものの多くがUIButtonです。
ちなみに、『UI』とはUser Interfaceのことです。
つまり、
アプリに必須のパーツです！！
iosアプリの見た目の開発では
四角い画面にパーツをくっつけて行います。
まずは、
UIButtonを貼る準備をします。
①のマークをクリックしてください。
②に『button』と入力してください。
するとUIButtonが出てきます。
そしていよいよ、UIButtonをくっつけます！
ドラッグ＆ドロップで画面の真ん中あたりにいい感じに置きます。
ドラッグ＆ドロップをご存じない方はこちら！！
次に、おいたUIButtonに色をつけましょう。
色をつけると華やかになりますし、何より楽しいです！
attributes inspector
attributes inspectorとは見た目をカスタマイズすることができる機能が詰まったところです。
①配置したUIButtonをクリックして、選択状態にしましょう。
②右上のホームベースのようなマークをクリックしましょう。
③少し下にスクロールすると、Backgroundというところがあるので、そこでお好きな色を選択してください。
次に、実際コードを書いて行きます。
Assistant Editor
今まで、コードについて全く触れてきませんでしたが、
ここでようやくコードを書きます。プログラミングです！
次にやることは、
UIButtonをタップした時の動きを書くことです。
今回は画面の色を変化させます。
そのためには、
storyboard上にあるUIButtonをコードと紐付けます！
まずは右上の輪っかが二つ重なっているボタンをクリックしてください。
すると、画面が大きく変化したと思います。
このように、画面が二つに割れたはずです。（始めたばかりの方は、エディターの色は白いと思います。）
ここで、UIButtonを選択した状態で
『control + ドラッグ』
で画像と同じような位置でドロップしてください。
するとグレーの小さい画面が出てくるので、
そこを編集します。
『Connection』を outlet から action に変更してください。
『name』を button としてください。
そして最後に『connect』をクリック！
|
1 2 |
@IBAction func button(_ sender: Any) { } |
このようなものが新しく出てくれば成功です。
ここで少しコードに
触れて行きます。
現在、このようになっているかと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import UIKit class ViewController: UIViewController { 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. } @IBAction func button(_ sender: Any) { } } |
実はこのコード
さっきまでいじっていた
Main.storyboardの
画面とつながっております！！
実はこの画面、
『UIViewController』というかっこいい名前がついています。
正確には画面というより
窓枠です。
そこに『UIView』という画面がくっついているのですが、
詳しい話はまた今度。
今回はUIViewControllerについてです。
再度コードを見てください。
上の方に
|
1 |
class ViewController: UIViewController |
と記述されてますよね！
これが先ほどの窓枠とつながっている証拠です。
少し下の方に、
|
1 |
viewDidLoad |
と書かれた場所があります
。
これはアプリを起動し、画面が表示される直前に処理が行われる場所です。
ここを少し編集しましょう。
|
1 2 3 4 5 6 |
override func viewDidLoad() { super.viewDidLoad() self.view.backgroundColor = UIColor.red } |
これを足しました。
|
1 |
self.view.backgroundColor = UIColor.red |
これはViewControllerのviewのbackgroundColorをred（赤）に変える！
という処理です。
それでは、実際に見て見ましょう！
ここの再生ボタンをクリックしてください。
この再生ボタンを押すことで実際にアプリを動かすことができます。
そうすると自動で新しい画面が動き出すはずです。
このようにUIButton以外が真っ赤な画面が出てくれば成功です。
では、Main.storyboardを見てみましょう。
あれ？？
画面が白いですね。
それで問題ないんです。
コードで書いたものは、再生ボタンを押すまでUIViewControllerに反映されません。
それでは最後にスーパー写経タイム！(許してください)
先ほど、UIButtonとコードを紐付けた際に
出てきたコードの内側に4行追加してください。
|
1 2 3 4 5 6 |
@IBAction func button(_ sender: Any) { let red = arc4random() % 255 let green = arc4random() % 255 let blue = arc4random() % 255 self.view.backgroundColor = UIColor(red: CGFloat(red) / 255, green: CGFloat(green) / 255, blue: CGFloat(blue) / 255, alpha: 1.0) } |
そして、
再生ボタンを押して、
画面真ん中にあるボタンを連打して遊んでください。
画面の色は変わりましたか？
最終的なコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() self.view.backgroundColor = UIColor.red } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } @IBAction func button(_ sender: Any) { let red = arc4random() % 255 let green = arc4random() % 255 let blue = arc4random() % 255 self.view.backgroundColor = UIColor(red: CGFloat(red) / 255, green: CGFloat(green) / 255, blue: CGFloat(blue) / 255, alpha: 1.0) } } |
コメント