이 프로젝트는 복제했기 때문에 appimage, appicon 이 다 저장되어 있습니다.
따라서 main.storyboard에서 사용자 인터페이스 구축을 시작할 수 있습니다.

주사위 앱 만들기

1. 앱 이미지 만들기

배경설정

aspect fit - 이미지가 크기에 맞게 채워집니다.
scale to fill - 이미지가 화면에 맞게 채워집니다.
aspect fill - 특정한 이미지가 화면에 채워집니다.

app image, icon이 저장되어 있기 때문에 스토리보드에서 구축하면 됩니다.
---이미지 복사는 option키를 눌러 드래그 해주면 복사가 됩니다.

2. 코드

코드 작성은 viewcontroller.swift 파일에서 합니다.

_ViewController.swift - 코드 파일
Main.storyboard - 디자인 파일

2-1. Assistant

adjust editor options file -> assistant 를 선택하면

왼쪽에는 디자인 파일이 오른쪽에는 컴패니언 코드파일이 나오게 됩니다.

main.storyboard는 interface builder 라고도 한다

2-2. IB콘센트 만들기

화면에는 나오지 않았지만 왼쪽 다이스를 컨트롤+클릭하여 12행 드래그해서 집어넣을수있다.

--오류 코드의 이유을 알고싶으면 화면아래에 있는 디버깅오류(reason: 부터)를 보면 알 수 있다.

2-3. 코드작성 해보기

>(파란색 부분)본질적인 코드 줄

모든 프로그래밍 언어에서 볼 수 있는 서식은 다음과 같다

override func viewDidLoad() {
code goes here
}

스토리보드에 있는 Dice1 의 이미지를 바꾸려한다.

코드작성
diceImageView1.image = image.literal 를 사용한다.
who.what = value
who는 누구를, what은 무엇을 value는 무엇으로
who = diceImageView, what = image value = image.literal

실습

첫 번째 주사위가 디자인에 1로 표시되어 있지만 실제로 앱이 시작되면 주사위는 6으로 바뀐다

IBOutlet 코드를 사용하여 이미지를 설정할 수 있다

앱을 실행한후 Roll 버튼을 누르면 다이스의 이미지가 바뀌게 코드를 작성해보자

먼저 다른 종류의 링크를 만든다.

28행에 roll 버튼을 컨트롤 클릭하여 드래그해서 가져온다.
이 코드는 IBOutlet이 아닌 인터페이스 빌더 액션인 IBAction이다.
그 다음 롤버튼을 누르면 다이스 1,2의 이미지가 바뀌게 설정하는 코드를 작성한다.

1.IBOutlets 오른쪽에서 왼쪽으로 이동한다.
2.코드가 사용자 인터페이스에서 무언가를 변경하기를 원한다.
3.IBAction 은 왼쪽에서 오른쪽으로 이동하지만 사용자 인터페이스와의 상호작용으로 인해 코드에서 어떤 일이 발생한다.

롤 버튼을 누를때마다 이미지가 변경

-배열이라는 것을 사용
-배열은 단순히 정렬 된 항목 시퀀스
-컴퓨터는 0부터 센다

var leftDiceNumber = 1      //변수와 값을 생성
var rightDiceNumber = 5     
diceImageview1.image = [][leftDiceNumber]//다이스 이미지 1을 6개의 주사위 이미지로 변경, leftdiceNumber = 1
leftDiceNumber = leftdicenumber + 1 // 하나 실행할때마다 1씩 더해준다.

주사위 이미지를 무작위화 하는 방법

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var diceImageView1: UIImageView!
@IBOutlet weak var diceImageView2: UIImageView!


@IBAction func rollButtonPressed(_ sender: UIButton) {
    
    let diceArray = [ #imageLiteral(resourceName: "DiceOne"), #imageLiteral(resourceName: "DiceTwo"), #imageLiteral(resourceName: "DiceThree"), #imageLiteral(resourceName: "DiceFour"), #imageLiteral(resourceName: "DiceFive"), #imageLiteral(resourceName: "DiceSix") ] 

//diceArray 라는 변수를 만들어 코드 쉽게 만들기
diceImageView1.image = diceArray.randomElement()// randomElement() ->배열을 살펴보고 내부에 얼마나 많은 항목이 있는지 확인한 다음 임의의 요소 제공
diceImageView2.image = diceArray[Int.random(in: 0...5)]//int.random(in:0...5)] -> 0에서 5까지 임의적으로 랜덤하게

}

}