スクリーンショット_2019-12-16_5

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

おとうふ 双極性障害と お金

目的

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

画像1

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

Step 1
Xcode を起動する

画像2

Step 2
Create a new Xcode project を選ぶ

画像3

Step 3
Single View App を選ぶ

画像4

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

画像5

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

画像6

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

画像7

画像8

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

画像9

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

画像10

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

画像11

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

画像12

画像13

画像14

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

画像15

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

画像16

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

画像17

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

画像18

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

画像19

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

画像20

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

画像21

画像22

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

画像23

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

画像24

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

画像25

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

画像26

画像27

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

画像28

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

画像29

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

画像30

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

画像31

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

画像32

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

画像33

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

画像34

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

画像35

画像36

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

画像37

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

画像38

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

画像39

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

画像40

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

画像41

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

画像42

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

画像43

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

画像44

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

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

画像45

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

画像46

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

画像47

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

画像48

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

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

画像49

画像50

画像51

画像52

◾️下段用

画像53

画像54

画像55

画像56

こんな感じですね。

画像57

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

画像58

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

画像59

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

画像60

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

画像61

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

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

画像62

iOS -> Cocoa Touch Class を選んで Next

画像63

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

画像64

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

画像65

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

画像66

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();


画像67

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

画像68

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

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

画像69

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

画像70

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

}

画像71

以上で作業は完了です。

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

画像72

お疲れ様でした！

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

いいなと思ったら応援しよう！