Todo

• Add slider
• Add 'HIT Button'
• Receive value changed events from the slider
• Add 'Reset Button'
• Add labels presenting information
• Generate the random number
• Compare the random number with input number
• Show alerts
• Implement 'reset' feature
• Add 'Credit' view

#1

todo

• Add slider
• Add 'HIT Button'
• Receive value changed events from the slider
• Add 'Reset Button'

command + shift + "l" or 우측 상단 '+' 버튼 클릭 (UI라이브러리 열기)

slider

ViewController.swift 파일에 코드 추가

// class ViewController: UIViewController {
    
//    override func viewDidLoad() {
//        super.viewDidLoad()
//        // Do any additional setup after loading the view.
//    }
    
    @IBAction func sliderValueChanged(_ sender: UISlider){
        print(sender.value)
    }
// }

//스토리 보드에서 valuechanged 연결

HIT button

ViewController.swift 파일에 코드 추가

//class ViewController: UIViewController {
    
    @IBOutlet weak var slider: UISlider! // UISlider 의 변수를 받아올 변수 설정

//    override func viewDidLoad() {
//        super.viewDidLoad()
//        // Do any additional setup after loading the view.
//    }
    
//    @IBAction func sliderValueChanged(_ sender: UISlider){
//        print(sender.value)
//    }

    @IBAction func touchUpHitButton (_ sender: UIButton){
        print(slider.value)   // UISlider에서 받아온 변수 출력(사용)
    }
//}
// 스토리 보드 controllView 의 인스펙터 창에서 touchDown or touchUp 연결
// Outlet은 값을 가져올 slider에 연결

reset button

todo

• Implement IBAction function
• Name: touchUpResetButton(_ sender:UIButton)
• Body: prints string - "touch up reset button"
• Add a button on the top-right side of the view
• Set button title : RESET
• Connect Touch up inside event of button to touchUpResetButton function

ViewController.swift 파일에 코드 추가

//class ViewController: UIViewController {
    
//    @IBOutlet weak var slider: UISlider! // UISlider 의 변수를 받아올 변수 설정

//    override func viewDidLoad() {
//        super.viewDidLoad()
//        // Do any additional setup after loading the view.
//    }
    
//    @IBAction func sliderValueChanged(_ sender: UISlider){
//        print(sender.value)
//    }

//    @IBAction func touchUpHitButton (_ sender: UIButton){
//        print(slider.value)   // UISlider에서 받아온 변수 출력(사용)
//    }

    @IBAction func touchUpResetButton(_ sender: UIButton){
        slider.value = 15
        print("touch up reset button")
    }

// }

스토리 보드 controllView 의 인스펙터 창에서 touchDown or touchUp 연결

만약 변수명 or 함수명을 잘 못 작성해서 수정해야 할 경우에는, 우클릭 rename으로 연결된 모든 곳에서 변수명을 수정하는 것이 모든 코드를 뜯어 봐야 하는 번거로움을 줄일수 있다.

#2

todo

• Add labels presenting information

• Adding Labels
• Challenge - Changing label's font
• Importing Assets
• Styling UI
• Challenge - Auto Layout
• Limitation of Storyboard
• Wrapping up

Adding Labels

Label 을 추가하고 인스펙터 창에서 font를 상황에 맞게 수정할수 있다.
볼드체는 headline
일반 폰트는 body 등...

Asset Types

• App Icon

• Color set

• Data set

  • Sounds, Docs, Videos

• Image set

• Launch image

• Sticker

• Watch complication

• ...

  인스펙터

  minTrack : 슬라이더의 좌측 컬러
  maxTrack : 슬라이더의 우측 컬러

  image : 추가할 이미지
  tint : 이미지 컬러

  configuration : font , point size
  font: system, title1, title2, ...

  Auto Layout

  a layout engine
  that helps lay out
  user interface (UI)
  based on the constraints(제약: margin , padding 과 비슷한것 같다.) you specify

  image file

  스토리보드에서 설정할수 없는 이미지 를 코드로 설정함

 
// class ViewController: UIViewController {
    
//    @IBOutlet weak var slider: UISlider!

//    override func viewDidLoad() {
//        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        slider.setThumbImage(#imageLiteral(resourceName: "slider_thumb"), for: .normal)
    }
    /* .normal : 항상 */
    
// ....

}

#3

todo

• Generate the random number

• comments
• Doing Something : Functions
• Challenge - Implementing Function
• Values : Variables
• Declaring variables
• Challenge - Declaring variables
• Random numbers
• Restarting the Game
• Wrapping Up

comments (주석)

• Note for code
• Ignored at runtime

// Single- Line Comments

/* 
Multi-
Line
Comments
*/

function (함수)

• viewDidLoad : React.js의 componentDidMount 같이 동작하는 것 같다.

viewDidLoad(){ 
 // 앱이 실행 될때 실행 처음 실행 되는 부분
}

• class 안에서 작동하는 함수를 method라고 한다.

class 클래스명{
	func 함수명(){}
}

Implementing Function

• in ViewController.swift file
  • in ViewController class
    • Function name:reset
    • Parameters : No parameters
    • Code in function
      • print("reset!")
• Call 'reset' function in...
  • viewDidLoad function
  • touchUpResetButton function

Variables & Constants

• Contains value temporary
• Variables : Mutable ( 변경가능)
• Constants : Immutable (변경불가)

Declare

var randomValue : Int = 0
let hitValue : Int = 0

random number

var randomNumber : Int = Int.random(0...30) 
// 0이상 30이하의 정수를 생성 (30포함)

A...B // A이상 B이하
A..<B // A이상 B 미만
...B // B 이하
A... // A 이상
...<B // B미만

reset game

• 선택한 값
• 최소값
• 최대값
• 카운트
• 슬라이더 값(위치)

#4

todo

• Compare the random number with input number
• Show alerts
• Implement 'reset' feature

slider의 value는 float 타입이다.

alert

func showAlert (message: String){
        let alert = UIAlertController(title:nil,message:message, preferredStyle: .alert)
        let okAction = UIAlertAction(title: "OK", style: .default) { (action) in
            self.reset()
        }
        alert.addAction(okAction)  // 
        present(alert, animated: true, completion: nil)
    }

#5

화면전환 (스택 생성)

라이브러리에서 ViewController를 추가한다
화면에 필요한 내용을 구성한다.
스토리보드에서 화면은 scene 이라고 한다.

추가한 ViewController에 연결할 코드 파일을 추가한다.
(file -> cocoa touch class -> 이름을 설정하고, UIViewController를 선택한다.)

• file name : CreditViewController

identity inspector 창에서 생성한 CreditViewController 파일과 연결한다.

앞 화면과 뒤 화면을 연결할때는 첫 화면의 버튼에서 controll key를 누르고 드래그 해서 뒤 화면에서 놓으면 연결 끝!

---

화면전환 ( 스택 제거)

주의

생성한 화면에서 뒤로 가기 버튼을 누를때 앞에서 진행한 화면전환 방식을 이용하면 앞화면과 같은 화면이 생성되고 앞화면의 전환 버튼을 누르면 뒤화면이 다시 생성된다. 화면이 계속 쌓이게 된다. 진행 중이던 내용을 유지하면서 화면을 올리고 올린화면이 필요 없다면 제거 하는 방식을 사용하는게 좋다

다음 함수를 CreditViewController 에 추가하고 버튼과 연결한다.

@IBAction func touchUpDismissButton(_ sender: UIButton){
        dismiss(animated: true, completion: nil)
    }

출처 : 유튜브 "yagom"