Swift ButtonとViewの配置 オートレイアウト iPhoneアプリ開発入門

目的

Xcode Swift で Mainstoryboad View内に、ボタン(Button)とViewを配置して、ボタンには画像を表示し、View内に図形を描画する。

開発環境
macOS Catalina 10.5.1
Xcode 11.2.2
Swift 5.1.2
iOS 13.2.3

Step 1
Xcode を起動する

Step 2
Create a new Xcode project を選ぶ

Step 3
Single View App を選ぶ

Step 4
プロジェクト名（任意）を入力する。
Language は Swift、User Interface は Storyboard を選ぶ。※ここ重要

Step 5
プロジェクトのディレクトリを指定する。※任意
Create する

Step 6
Main.storyboard を選択して、Main.storyboard を表示する。

Step 7
ショートカットキー command + shift + L で、Objects のライブラリを表示する。

 Story 8
Objects のライブラリから Button を選択し、Main.storyboard のとりあえず左上のあたりに Drag & Drop。

Step 9
配置した Button を選択して、Show Attribute inspector を表示する。

Step 10
Button が見やすくなるように、
1. Font を System 20.0
2. Text Color を White Color
3. Background を System Blue Color 
にする。

Step 11
Add New Constraints (スターウォーズみないたやつ)を選択して、
上と左の隙間をそれぞれ 0 に、
Height はとりあえず 80.0 にして、
Add 3 Constraints。

Button の 上と左の隙間が 0 、高さが 80.0 に指定された。

Step 12
Button を選択して、ショートカットキー command + c でコピーし、
command + v で貼り付け。
Button を５つ、適当に並べる。

Step 13
５つの Button のうち、中央の３つの Button を選択する。

Step 14
Add New Constraints で、
1. 上
2. 左
をそれぞれ、0 にして
Add 6 Constraints

４つの Button の 隙間がなくなる。

Step 15
一番右の Button を選択して、Add New Constraints。
上、左、右 をそれぞれ 0 にして、
Add 3 Constraints

Step 16
５つのボタン全てを選択して、Add New Constraints で、

５つの Button の Height が揃い、５つの Button が画面の等分割に並んだ。

Step 17
ショートカットキー command + shift + L で Object ライブラリを開き、
View (※ただの 『View』、結構下の方にある。)を選択し、Main.Storyboard にDrag & Drop。

Step 18
View が見やすくなるように、Background を Light Gray Color にする。
※しなくても良いが

Step 19
View を選択して、Add New Constraints で、
上、左、右 をそれぞれ 0 にして、
Add 3 Constraints。

Step 20
左上の Button を command + C でコピーして、
画面、左下あたりに command + V で貼り付ける。

Step 21
左下の Button を command + C でコピーして、
画面下に貼り付けて、Button を４つ、適当に並べる。

Step 22
左下の Button を選択して、Add New Constraints で、
上、左、下 をそれぞれ 0 にして、
Add 3 Constraints 。

左下の Button の 左と下の隙間がなくなり、
View の高さが割り付けられ、隙間がなくなる。

Step 23
下の真ん中の ２つの Button を選択して、Add New Constraints で、
上、左、下 をそれぞれ 0 にして、
Add 6 Constraints 。

画面下の３つのボタンの上、左、下の隙間がなくなる。

Step 24
右下の Button を選択し、Add New Constraints で、
上、左、下、右、それぞれを 0 にして、
Add 4 Constraints 。

Step 25
下の４つのボタンを選択して、Add New Constraints で、
Equal Widths にチェックをいれて、
Add 3 Constraints 。

下の４つの Button が等間隔に並ぶ。

Step 26
とりあえず、ここまでで、Build and Run .
上と下の Button が等間隔で並んでいれば OK .
こんな感じ　↓

Step 27
ここから、Button に画像をつけていきます。
まずは、右上のボタンとして、『終了』というボタン画像を使います。
この Button 用の『終了』画像を、デスクトップにでも置いてください。

Xcode の右側、プロジェクト名 button_view のフォルダの上で右クリック。

続いて、Add File to "button_view"... を選んで、

画像の保存場所（※今回はデスクトップ）から、画像ファイルを選んで、Add .

プロジェクト "button_view" のフォルダに、今回追加した画像ファイルが表示される。

Step 28
プロジェクトフォルダ "button_view" に画像をいれていくと、画像ファイルが増えるとプロジェクト内が見にくくなるので、画像ファイルの保存場所を変更します

Assets.xcassets という青いフォルダを選択すると、
その右側の画面に、□ AppIcon と表示されるので、

画像ファイル exit.jpg を Drag して、□ AppIcon のところで、Drop する。
（これで、Assets.xcassets 内に、画像のコピーが置かれる）

Step 29
プロジェクトフォルダ "exit.jpg" は不要なので、exit.jpg の上で、右クリックして、Delete で削除。

Delete の方法の確認画面が表示されるので、"Remove Feference" を選択。

これで、プロジェクトフォルダ から 画像ファイル "exit.jpg" が削除されます。

Step 30
先ほどの『終了』の exit.jpg の場合と同じように、他の画像ファイルもasset.x フォルダに配置します。
こちらの８枚画像をサンプルとして使ってみてください。
◾️上段用

◾️下段用

こんな感じですね。

Step 31
ここから、各 Button に各 画像ファイルを指定していきます。
Main.storyboard で まず、右上の Button を選択します。

Attributes Inspecter で、
Image のところをドロップダウンして、今回は "exit" を選びます。

Button に画像ファイルが適用されます。

Step 32
同じ要領で、他の８つの Button に画像ファイルを適用していきます。
こんな感じになります。

Step 33
中央に配置した View に図形を描画する手順を、以下に説明します。

プロジェクトフォルダ "button-view" を右クリックして、
New File... を選択する。

iOS -> Cocoa Touch Class を選んで Next

Class : TestDraw （※任意）
Subclass of : UIView
Language : Swift
で Next .

ディレクトリ（※任意）を指定して Create .

プロジェクトフォルダ内に、TestDraw.swift ファイルが生成される。

Step 34
TestDraw.swift 、func draw() 内に以下のコードを記入する。

let screenWidth = rect.size.width
let screenHeight = rect.size.height

// 四角形 -------------------------------------
// UIBezierPath のインスタンス生成
let line = UIBezierPath();
// 起点
line.move(to: CGPoint(x: 20, y: 20));
// 帰着点
line.addLine(to: CGPoint(x: 20, y: screenHeight - 20));
line.addLine(to: CGPoint(x: screenWidth - 20, y: screenHeight - 20));
line.addLine(to: CGPoint(x: screenWidth - 20, y: 20));
line.addLine(to: CGPoint(x: 20, y: 20));
// ラインを結ぶ
line.close()
// 色の設定
UIColor.black.setStroke()
// ライン幅
line.lineWidth = 4
// 描画
line.stroke();

Step 35
Main.storyboard と ViewController.swift の２画面にする。

Step 36
Main.storyboard の View の上で右クリックでDrag して、
ViewController.swift 内の
class ViewController: UIViewController {
と関連づける。

Connection : Outlet （※デフォルト）
Name : myView （※任意）
 Type : UIView （※たぶんデフォルト）
Storage : Wiak（※デフォルト）
で Connect .

View が myView として関連づけられた。

Step 37
 ViewController.swift 内
class ViewController 内に
override func viewDidaperd 関数を追加する。

override func viewDidAppear(_ animated: Bool) {

// Screen Size の取得
let screenWidth = myView.bounds.width
let screenHeight = myView.bounds.height

let testDraw = TestDraw(frame: CGRect(x: 0, y: 0,
width: screenWidth, height: screenHeight))
myView.addSubview(testDraw)

// 不透明にしない（透明）
testDraw.isOpaque = false
// 背景色
myView.backgroundColor = UIColor.white

}

以上で作業は完了です。

Step 38
Build & Run をして、このような画面が表示されたら、完成です。

お疲れ様でした！

もしも分かりにくい点がありましたら、コメントして頂けると嬉しいです。