[tvOS][SwiftUI] 기본 샘플 앱 설명

그림 1. 메인 화면

 

그림 2. 상세 화면

 

그림 3. 동영상 플레이 화면

 

그림 1. 그림 2. 그림 3.은 결과 화면이다.

아래 참조 사이트에 해당 프로젝트를 다운로드 받을 수 있다.

 

// RickTVApp.swift
// 1
@main
// 2
struct RickTVApp: App {
  // 3
  var body: some Scene {
    // 4
    WindowGroup {
      ContentView()
    }
  }
}

 

@main은 앱 시작 지점이다.

첫 시작은 App를 상속 받아야만 한다.

 

// ContentView.swift

@ObservedObject var dataProvider = DataProvider()

 

@ObservedObject는 앱 데이터 변경 사항을 수신할 수 있다. 만약 연관된 뷰에 대해서만 변경 사항을 받고 싶은 경우는 @State를 쓴다.

 

// VideoThumbnailView.swift

Image(video.thumbnailName)
  // 1
  .resizable()
  // 2
  .renderingMode(.original)
  // 3
  .aspectRatio(contentMode: .fill)
  // 4
  .frame(width: 450, height: 255)
  // 5
  .clipped()
  // 6
  .cornerRadius(10)
  // 7
  .shadow(radius: 5)
  
  // 8
VStack(alignment: .leading) {
  // 9
  Text(video.title)
    .foregroundColor(.primary)
    .font(.headline)
    .bold()
  // 10
  Text(video.description.isEmpty ? 
    "No description provided for this video." : 
    video.description)
    .font(.subheadline)
    .foregroundColor(.secondary)
    .multilineTextAlignment(.leading)
    .lineLimit(2)
    .frame(height: 80)
}

위 코드에 대한 소스 설명

1. 이미지를 크기 조정
2. 이미지를 원래 형식으로 사용
3. 뷰의 프레임을 채우도록 확장
4. 이미지의 너비와 높이를 미리 정해진 크기로 설정
5. 이미지 보기 프레임을 벗어나지 않도록 하는 데 사용
6. 모서리 반경을 10으로 설정
7. 그림자 추가
8. 수직 스택
9. Text 색상 및 글꼴
10. Text 라인 수와 높이 설정

 

// CategoryListView.swift

LazyVStack(alignment: .leading) {}

 

LazyVStack은 스크롤 발생 시 화면 끝부분에 스크롤바가 생성된다. 데이터가 많을 경우 스크롤에 따라서 데이터를 로드한다.

 

// PlainNavigationLinkButtonStyle.swift

// 1
@Environment (\.isFocused) var focus: Bool

// 2
.scaleEffect(focused ? 1.1 : 1)

// 3
.focusable(true)

 

1. 버튼 스타일의 포커스 기능 활성
2. 버튼이 선택 되었을때 사이즈를 1.1로 늘림
3. 선택 기능을 사용

 

// VideoDetailView.swift

// 1
if !categoryWithCurrentVideoRemoved.videos.isEmpty {
}

// 2
CategoryRow(
  category: categoryWithCurrentVideoRemoved,
  customTitle: "Related Videos")

 

1. 현재 비디오 카테고리 내에 현재 표시된 비디오 이외의 비디오가 있는지 확인
2. 표시할 다른 동영상이 있는 경우 해당 카테고리와 Related Videos에 CategoryRow 이라는 사용자 정의 제목을 표시하고 추가

 

// PlayerView.swift

// 1
@State private var player: AVQueuePlayer?
@State private var videoLooper: AVPlayerLooper?

// 2
VideoPlayer(player: player)

// 3
if player == nil {
  // 4
  let templateItem = AVPlayerItem(
    url: Bundle.main.url(forResource: "rick", withExtension: "mp4")!)
  // 5
  player = AVQueuePlayer(playerItem: templateItem)
  // 6
  videoLooper = AVPlayerLooper(player: player!, templateItem: templateItem)
}

// 7
if player?.isPlaying == false { player?.play() }

// 8
.edgesIgnoringSafeArea(.all)

 

1. 개발자가 비디오를 재생할 수 있는 Apple 프레임워크
2. 비디오 플레이 생성
3. 플레이어가 생성되었는지 확인
4. 플레이어가 없으면 AVPlayerItem재생하려는 실제 비디오를 참조하는 이 항목을 사용하는 새 플레이어 항목을 만듬
5. 다음으로 재생할 항목 대기열을 만듬
6. 마지막으로 비디오가 끝날 때 반복되는 비디오를 처리
7. 비디오 재생
8. 안전 영역 을 무시 하고 비디오가 전체 화면으로 재생

 

<참조>

https://www.kodeco.com/19074315-swiftui-on-tvos

SwiftUI on tvOS