【iPhone】Swiftでアプリ開発 | SimpleButtonApp
開発環境
iOS 12
Xcode 10
Swift 4.2
動画で確認できます
プロジェクトをつくる
XcodeでSingle View Appを選び、新しいプロジェクトをつくります。
SimpleButtonAppとでもしておいてください。
iPhoneアプリはUIKitを使用する場合は、Single View Appを使用することが多いです。
UIKitとはボタンやテキストや画像などを画面上に作成・配置できるものと思ってください。
| Product Name | プロジェクト名になります。 |
| Team | Apple IDを入力します、これがないとエラーがでます。 |
| Organization Name | 任意の名前でよいです。 |
| Organization Identifier | アプリの公開に必要な組織の識別名ですが公開するわけでなければ適当で良いです、com. 〜とするのが流行り？のようです。 |
| Bundle Identifier | Organization IdentifierとProduct Nameで自動で作成されます。 |
| Language | Swiftを選びます、Objective-Cも選べます。 |
| Use Core Data | アプリ内のデータベースを扱うためのフレームワークです、データベースを使わなければ必要ありません。 |
| include Unit Tests | 機能テスト用のファイルが作成されますが、初心者のうちは必要ありませんのでオフにしましょう。 |
| include UI Tests | UIテスト用のファイルが作成されますが、初心者のうちは必要ありませんのでオフにしましょう。 |
下の図のView as:の部分をクリックして、デバイスをiPhone Xに変更します。
画像をAssetsフォルダにコピーする
Kenney.nlから使用する画像をダウンロードします。
ダウンロードしたファイルのPNGフォルダにpngファイルがありますので、今回はそこから使用します。
dog.pngとduck.pngを下の図の枠内にドラッグしてコピーします。
ボタンとラベルを追加する
Buttonを追加します。
①右上のアイコンをクリックして、ライブラリーパネルを表示します。
Xcode 10ではXcode9までとは表示の仕方が変更されてます。
②buttonで検索して、Buttonを View Controller上にドラッグして追加します。
Buttonを追加すると、黄色い三角マークでエラーが出た場合、これはButtonが画面のレイアウトで位置が指定されていないので、デバイスの種類が変わると位置が移動して、他のオブジェクト(表示するであろうテキストやボタンなど)と重なってしまいますよと警告が出ているわけです。
これを回避するには、Buttonの位置を指定する必要があります。
以下の図のように、Buttonを選択して４つのアイコンの左から２番目をクリックすると、ポップアップでAdd New Alignment Constraintsと出ますので、下の２つの項目をチェックしてください。
Buttonが画面の中央の正確な位置に表示されます、そうすれば警告マークが消えると思います。
ラベル(Label)を追加します。
ライブラリーパネルでLabelを検索し、View Controller上に追加します。
右のサイドバーのattributes inspectorで、Textを”START VIEW”にFontをBoldに、文字サイズを38に、Alignmentをセンタリングにします。
Labelを追加すると黄色い三角の警告がでます。
これもボタンと同じく、View ontroller上の位置が設定されていないためです。
Add New Alignment Constraintsを表示して、今回はHorizontally is Containerを選択します、そうするとセンタリングされます。
次にSTART VIEWのテキストをクリックして、CTRキーを押しながら上方向にドラッグして離すとプロパティーがでますので、Top Space to Safe Areaと選択します。
これで、画面上部からの位置が決まりました。
警告が消えると思います。
ボタンに画像を配置する
Buttonに現時点でテキストが表示されていますが、これを画像に変更します。
追加したButtonを選択して、右側のattributes inspectorでButtonのテキストを削除します。
続いて、imageの項目でタブをクリックしてDogを選択すると、ButtonにDog.pngが追加されます。
２つ目の画面を作成する
Dogの画像をクリックしたら、画面が切り替わるようにします。
新しい画面用のView Controllerを追加します。
下の図のように、libraryパネルからView Controllerをストーリーボード上にドラッグして追加します。
このように、なにもまだ追加されていないView Controllerが追加されます。
ここでも、ボタンとラベルを追加します。
方法は、最初のView Controllerと同じです、今度は画像はDuckです。
それでもまだ、黄色い三角マークの警告がでると思います。
今回はなぜかというと、新たにView Controllerを追加したのですが、要するに最初の画面と次の画面との接続ができていないと警告が出ているわけです。
これを回避するには、下の図のようにDocの画像をクリックしてCTRキーを押しながら次の画面にドラッグします。
プロパティーが出ますので、Action SegueのPresent As Popoverを選択します。
これは、画面が切り替わる時のアクション(アニメーション)を設定してます。
今回は、下から次の画面が飛び出すアクションです。
２つ目のView Controllerの処理を書くファイルをつくる
ScondViewController.swiftを作ったらView Cotrollerと紐つけます。
storyboard上の２つ目のView Controllerをクリックして、Identity inspectorのCustom ClassをSecondViewControllerにします。
＠IBOutletと＠IBActionを定義する
@IBOutletを設定します。
＠IBOutlet --- View ControllerとSwiftコードのプロパティ(変数)を接続するもの。
ラベルをクリックして、CTRキーを押しながらドラッグします。
プロパティがでますので設定します。
Connection --- 変数との接続ですから、Outletのままです。
Object --- この変数がある場所(View Controller)がどこなのか。
Name --- この部分に変数の名前を入力します。
Type --- この変数のタイプ
Storage --- 今回はStrongでよいです。
StrageがStrongかWeakなのかについては、この辺りが参考になるかもしれません。
Swiftの循環参照問題におけるunownedとweakの使い分けについて
@IBActionもやり方は同じです。
@IBAction --- View ControllerとSwiftコードのアクション(関数)を接続するもの。
Duckの画像をクリックしてドラッグするとプロパティが出ます。
Nameの部分にアクション(変数)名を入れます。
他の部分は、そのままで大丈夫です。
Swiftコードを書く。
varは変数を宣言するのに使います。
var changeLabel: UILabel!のchangeLabelの部分が変数名になります。
UILabel!は、その変数のなかに入れるもののタイプ(種類)が何であるかを表します、変数名と「:」で区切ります、後についている「!」は必ずそのタイプである事を指定しているような意味です。
Swiftでは、この部分がすこし理解がムズカシイ部分ですので、最初のうちはそのようなものとおもっててください。
この辺りが参考になるかもしれません。
どこよりもわかりやすいSwiftの”！”と”？” - Qiita
SecondViewController.swift
import UIKit class SecondViewController: UIViewController { //START VIEWと紐ついた変数 @IBOutlet var changeLabel: UILabel! override func viewDidLoad() { super.viewDidLoad() } //Buttonと紐ついた関数。 @IBAction func clickDuck(_ sender: Any) { //テキストを入れ替える changeLabel.text = "Duck! Duck!" } }
UIKit | Apple Developer Documentation
UIButton - UIKit | Apple Developer Documentation
いかがだったでしょうか？。
ストーリボードとSwiftコードを紐つけてできる、かんたんなアプリケーションのつくりかたでした。
