250320 iOS프로그래밍실무 3주차

iOS의 초보 개발자가 이해할 수 있는, 최소한의 기능을 가지고 있는 무드등 앱. 스토리보드 기반으로 소스코드를 작성

 

이 앱의 기능 : 화면 색상 변경, 밝기 조절

1. 새로운 Xcode 프로젝트를 생성
2. 스토리보드 설정
Main.storyboard를 열고 다음 요소들을 추가합니다: UIView (화면 전체를 채우도록), UISlider (화면 하단에 배치), UIButton (슬라이더 옆에 배치)
Auto Layout을 사용하여 각 요소들을 적절히 배치합니다.

ViewController.swift 코드

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var colorView: UIView!
    @IBOutlet weak var brightnessSlider: UISlider!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupInitialState()
    }
    
    func setupInitialState() {
        colorView.backgroundColor = .red
        brightnessSlider.minimumValue = 0.0
        brightnessSlider.maximumValue = 1.0
        brightnessSlider.value = 1.0
    }
    
    @IBAction func brightnessChanged(_ sender: UISlider) {
        colorView.alpha = CGFloat(sender.value)
    }
    
    @IBAction func changeColorButtonTapped(_ sender: UIButton) {
        let randomColor = UIColor(
            red: .random(in: 0...1),
            green: .random(in: 0...1),
            blue: .random(in: 0...1),
            alpha: 1.0
        )
        colorView.backgroundColor = randomColor
    }
}

코드 설명

• colorView는 화면 전체를 채우는 UIView입니다. 이 뷰의 배경색을 변경하여 무드등 효과를 만듭니다.
• brightnessSlider는 밝기를 조절하는 UISlider입니다.
• setupInitialState() 함수에서 초기 상태를 설정합니다. 시작 색상은 빨간색이며, 밝기는 최대로 설정됩니다.
• brightnessChanged(_:) 함수는 슬라이더 값이 변경될 때 호출되며, 뷰의 alpha 값을 조정하여 밝기를 변경합니다.
• changeColorButtonTapped(_:) 함수는 버튼을 탭했을 때 호출되며, 랜덤한 색상을 생성하여 뷰의 배경색을 변경합니다.

연결 방법

1. Main.storyboard에서 ViewController로 드래그하여 IBOutlet 연결:
   
   • colorView를 UIView에 연결
   • brightnessSlider를 UISlider에 연결
2. 다음 IBAction 연결:
   
   • brightnessSlider의 Value Changed 이벤트를 brightnessChanged(_:) 함수에 연결
   • 버튼의 Touch Up Inside 이벤트를 changeColorButtonTapped(_:) 함수에 연결

Xcode 맛보기

View Life Cycle

• 앱은 하나 이상의 뷰로 구성되며, 각각의 뷰들은 라이프 사이클을 가지고 있음. 따라서 뷰의 라이프 사이클을 고려해서 로직을 넣고, 구성해야 함
• ViewDidLoad : 뷰 컨트롤러 클래스가 생성될 때, 가장 먼저 실행. 딱 한 번 실행되기 때문에 초기화 할 때 사용
• ViewWillAppear : 뷰가 생성되기 직전에 매번 실행이 되기 때문에 뷰가 나타나기 전에 실행해야 하는 작업들을 여기서 함
• ViewDidAppear : 뷰가 생성되고 난 뒤에 실행. 데이터를 받아서 화면에 뿌려주거나 애니메이션 등의 작업을 하는 로직을 작성ViewWillAppear에서 로직을 넣었다가 뷰에 반영이 안되는 경우가 있기 때문
• ViewWillDisappear : 뷰가 사라지기 직전에 실행
• ViewDidDisappear : 뷰가 사라지고 난 뒤에 실행
• 순환적으로 발생하기 때문에 화면 전환에 따라 발생해야 하는 로직을 적절한 곳에서 실행시켜야 함

 

App Life Cycle

• 앱은 실행 모드와 상태를 가짐
• Not Running
  앱이 아직 실행되지 않았거나, 시스템에 의해 종료된 상태
• Foreground Mode
  Active : 앱이 전경에 있고 이벤트를 받고 있음. 일반적으로 사용자와 상호작용하는 동안 앱은 이 상태에 있음
  Inactive : 앱이 전경에 있지만 이벤트를 받고 있지 않음
• Background Mode
  Running : 앱이 백그라운드에 있지만 여전히 코드를 실행. 사용자가 다른 앱으로전환하거나 홈 화면으로 돌아갔을 때 앱은 일시적으로 이 상태에 머물게 됨
  Suspend : 앱이 백그라운드에 있지만 코드를 실행하지 않음. 시스템은 앱을 이 상태로 자동으로 전환하며 필요에 따라 메모리를 회수하기 위해 앱을 종료시킬 수 있음.
• Not Running -> Active
  앱을 터치해서 실행이 되는 상태
• Active -> Inactive -> Running
  앱을 활성화에서 비활성화 상태로 만든 뒤, 백그라운드에서도 계속 실행중인 상태
• Active -> Inactive -> Suspend
  앱을 활성화에서 비활성화 상태로 만든 뒤, 백그라운드에서도 정지되어 있는 상태
• Running -> Active
  백그라운드에서 실행 중인 앱이 다시 포어그라운드에서 활성화되는 상태

부모 또는 수퍼뷰(superview)/자식 또는 서브뷰(subview)

• 서브뷰들은 언제나 부모 뷰의 틀 안에서 보여짐
• 버튼은 부모 뷰의 위에서 표시됨
• 서브뷰의 크기 변화는(디바이스가 회전하여 뷰의 크기가 변화하는 경우) 부모 뷰와의 관계에 의해 정의됨
• 수퍼뷰는 서브뷰의 위치 및 크기를 바꿀 수 있음

컨테이너 뷰(Container View)

• 여러 개의 뷰 컨트롤러를 포함하고, 그 사이를 전환하는 역할
• UINavigationController
  뷰 컨트롤러 간의 계층적 네비게이션을 관리
  리스트에서 항목을 선택하면 상세 화면으로 이동하거나, 여러 단계를 거쳐 정보를 입력하는 등의 작업에 사용
• UITabBarController
  뷰 컨트롤러 간의 평행 네비게이션을 관리
  앱의 주요 기능을 각각의 탭으로 나누고 사용자가 원하는 탭을 선택하여 해당 기능을 이용할 수 있게 하는 데 사용
• UISplitViewController
  마스터-디테일 인터페이스를 관리
  iPad와 같은 큰 화면에서 사용되며, 한 화면에 두 개의 관련된 뷰 컨트롤러를 동시에 표시하는 데 사용
• 컨트롤
  컨트롤들은 정보를 표시하고 사용자에게 반응도 하는 뷰들을 포함
  UIControl 클래스(UIView의 서브뷰)의 자식으로 버튼, 슬라이더, TextField 등
• 디스플레이 뷰
  디스플레이 뷰는 시각적인 반응을 제공한다는 점에서는 컨트롤과 비슷하지만 사용자 상호작용에 반응하지 않음
  UILabel, UIImageView

1초마다 한번씩 색이 바뀌는 무드등 소스

바로 전 소스에 배경음악을 추가하여 구상한 소스

import UIKit

import AVFoundation  // 오디오를 다루기 위한 프레임워크 추가

class ViewController: UIViewController {
  
  var colorChangeTimer: Timer?
  var audioPlayer: AVAudioPlayer!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    // 배경 음악 재생 설정
    if let soundURL = Bundle.main.url(forResource: "bgm", withExtension: "mp3") {
      do {
        audioPlayer = try AVAudioPlayer(contentsOf: soundURL)
        audioPlayer.play()
      } catch {
        print("음악 파일 로드 또는 재생 중 에러 발생: \(error)")
      }
    }
    
    // 1초마다 반복되는 타이머 생성
    colorChangeTimer = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { timer in
      // 랜덤한 빨간색, 초록색, 파란색 값을 생성
      let red = CGFloat(arc4random_uniform(256)) / 255.0
      let green = CGFloat(arc4random_uniform(256)) / 255.0
      let blue = CGFloat(arc4random_uniform(256)) / 255.0
      self.view.backgroundColor = UIColor(red: red, green: green, blue: blue, alpha: 1.0)
    }
  }
  
  override func viewDidDisappear(_ animated: Bool) {
    super.viewDidDisappear(animated)
    
    // ViewController가 사라질 때 타이머를 중지하고 nil로 설정하여 메모리 누수를 방지
    colorChangeTimer?.invalidate()
    colorChangeTimer = nil
    
    // 음악 재생 중지
    audioPlayer.stop()
  }
}

iOS 앱개발중 요소들을 가운데에 정렬하기 위하여 사용하는 방법

iOS에서 Autolayout을 구현하는 4가지 방법과 그 장단점

Constraint 설정 툴 : Align, Pin, Resolve, Stack

 

 

참고자료 : 한성현 교수님 수업자료