[swift] 스택 뷰에서의 미디어 재생 기능 추가하기

스택 뷰(Stack View)는 iOS 앱에서 인터페이스 구성 요소를 그룹화하고 쉽게 배치할 수 있는 유용한 도구입니다. 이번에는 스택 뷰에 미디어 재생 기능을 추가하는 방법에 대해 알아보겠습니다.

1. AVPlayer 사용하기

AVPlayer 클래스는 iOS에서 미디어 재생을 위한 강력한 기능을 제공합니다. 먼저 AVPlayer를 사용하기 위해 프로젝트에 AVFoundation 프레임워크를 추가해야 합니다.

1.1 프로젝트에 AVFoundation 추가하기

프로젝트 네비게이터에서 프로젝트 파일을 선택한 후, “Build Phases” 탭을 선택하십시오. 거기에서 “Link Binary With Libraries” 섹션을 찾아 “+” 버튼을 클릭합니다.

Build Phases

“AVFoundation.framework”을 검색하여 추가하십시오. 완료되면 “AVFoundation.framework”이 “Frameworks and Libraries” 섹션에 나타날 것입니다.

1.2 스택 뷰 구현하기

스택 뷰를 구현하기 전에, AVPlayer, AVPlayerLayer, AVPlayerViewController를 import 해야 합니다. 다음으로, ViewController 클래스에서 스택 뷰와 AVPlayer를 초기화하는 코드를 작성합니다.

import UIKit
import AVKit

class ViewController: UIViewController {
    var player: AVPlayer!
    var playerLayer: AVPlayerLayer!
    var playerViewController: AVPlayerViewController!
    
    @IBOutlet weak var stackView: UIStackView!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // AVPlayer 초기화
        guard let videoURL = Bundle.main.url(forResource: "sample", withExtension: "mp4") else {
            print("동영상 파일을 찾을 수 없습니다.")
            return
        }
        player = AVPlayer(url: videoURL)

        // AVPlayerLayer 초기화
        playerLayer = AVPlayerLayer(player: player)
        playerLayer.videoGravity = .resizeAspectFill
        playerLayer.frame = stackView.bounds
        
        // AVPlayerViewController 초기화
        playerViewController = AVPlayerViewController()
        playerViewController.player = player
        
        // 스택 뷰에 AVPlayerLayer와 AVPlayerViewController 추가
        stackView.layer.addSublayer(playerLayer)
        addChildViewController(playerViewController)
        stackView.addSubview(playerViewController.view)
        playerViewController.view.frame = stackView.bounds
        playerViewController.didMove(toParentViewController: self)
    }
    
    // 플레이어 재생/정지 버튼 액션
    @IBAction func playButtonTapped(_ sender: UIButton) {
        if player.rate == 0 {
            player.play()
            sender.setTitle("Pause", for: .normal)
        } else {
            player.pause()
            sender.setTitle("Play", for: .normal)
        }
    }
}

1.3 스토리보드에서 스택 뷰 추가하기

스토리보드에 버튼을 추가하고, 버튼의 액션을 playButtonTapped(_:) 메서드에 연결합니다. 그리고 스토리보드 내에서 스택 뷰를 추가하고 stackView IBOutlet을 해당 스택 뷰와 연결해야 합니다.

2. 미디어 파일 추가하기

위의 예제 코드에서 “sample.mp4”라는 이름의 동영상 파일을 사용하기 때문에, 프로젝트에 해당 파일을 추가해야 합니다. 프로젝트 네비게이터에서 파일을 추가하고, “Copy items if needed” 옵션을 선택하십시오.

3. 동영상 재생하기

이제 앱을 실행하고 스택 뷰에 추가한 버튼을 탭하면 동영상이 재생됩니다. 버튼의 타이틀은 재생 상태에 따라 변경됩니다.

앱 화면 예시

이제 스택 뷰에서 미디어 재생 기능을 추가하는 방법에 대해 알아봤습니다. AVPlayer를 사용하여 동영상 뿐만 아니라 오디오 파일도 재생할 수 있으며, AVPlayerLayer를 사용하여 원하는 위치와 크기에 미디어 재생 영역을 지정할 수 있습니다.

참고: