SwiftUI: `.redacted` 를 사용하여 인터넷에서 데이터를 가져올 때 쉽게 자리 표시자 오버레이를 추가할 수 있습니다.

API에서 정보를 가져오는 동안 빈 화면을 표시하는 것은 피하고 싶습니다. 로딩 표시기를 표시해야 합니다. 또는 뷰에 SwiftUI의 자리 표시자-오버레이를 설치할 수 있습니다.



이 기사에서는 .redacted를 사용하여 자리 표시자 오버레이를 쉽게 추가하는 방법, 보기의 자리 표시자 오버레이 표시 상태를 모니터링하는 방법, 자리 표시자 오버레이에 애니메이션을 추가하는 방법에 대해 설명합니다.

.redacted 및 .unredacted() 뷰 수정자

.redacted 수정자는 데이터를 다운로드하는 동안 숨기려는 뷰 요소에 추가 할 수 있습니다.

.redacted(reason: (weatherInformation == nil) ? .placeholder : [])

reason가 .placeholder와 같으면 오버레이가 뷰에 추가됩니다. 또한 reason 변수가 빈 배열과 같으면 표시되는 자리 표시자 오버레이가 없습니다.

또한 텍스트 뷰 요소에 대한 기본값을 지정해야 합니다. 그러면 SwiftUI가 생성하는 자리 표시자의 크기를 파악합니다. 예를 들면

Text(weatherInformation?.weatherDescription ?? "気象情報をダウンロードしています...")

항상 화면에 표시하고 싶은 요소에 대해서는 .unredacted() 뷰 모디파이어를 추가해 주세요.

자리 표시자를 표시할지 여부를 확인하기 위한 확장 추가

코드에 확장을 추가할 수도 있습니다.

extension View {
    @ViewBuilder
    func redacted(showPlaceholder: Bool) -> some View {
        if showPlaceholder {
            self
                .redacted(reason: .placeholder)
        } else {
            self
                .unredacted()
        }
    }
}

따라서 showPlaceholder 변수로 쉽게 자리 표시자를 표시할지 숨길지 결정할 수 있습니다.

.redacted(showPlaceholder: (weatherInformation == nil))

SwiftUI 뷰에 뷰 한정자 적용

먼저 기본 날씨 정보를 표시하는 SwiftUI 보기가 있습니다.

struct WeatherView: View {

    @Binding var weatherInformation: Weather?
    @Environment(\.redactionReasons) var redactions

    var body: some View {

        HStack {
             Image("sunnyImage")
                .resizable()
                .scaledToFit()
                .frame(width: 100, height: 100)
                .unredacted()
            VStack(alignment: .leading) {
                Text(weatherInformation?.status ?? "ダウンロードしています...")
                    .font(.largeTitle)
                    .padding(.vertical, 3)
                Text(weatherInformation?.weatherDescription ?? "気象情報をダウンロードしています...")
                    .padding(.vertical, 3)
                Label(weatherInformation?.degrees ?? "...", systemImage: "thermometer.sun")
                    .font(.title2)
                    .padding(.vertical, 3)
            }
        }

    }

}

1> 이 뷰의 코드에서는 SwiftUI가 자동으로 오버레이를 생성할 수 있도록 텍스트와 레이블의 기본값을 지정해야 합니다.
2> 위의 예제에서 Image 개체에는 한정자 .unredacted()가 있습니다. 이는 사용자에게 항상 표시됨을 의미합니다.

콘텐츠 브라우징에 방금 작성된 WeatherView에서 사용할 수 있습니다.

Section {
    WeatherView(weatherInformation: $weatherInformation)
        .redacted(reason: (weatherInformation == nil) ? .placeholder : [])
        //.redacted(showPlaceholder: (weatherInformation == nil))
}

WeatherView 내의 이미지 이외의 열람 대상이 표시되는 것은 weatherInformation == nil 조건이 적용되지 않는 경우만입니다.

그리고 이 예에서는 weatherInformation 를 설정할 수 있습니다.

.onAppear(perform: {
    DispatchQueue.main.asyncAfter(deadline: .now() + 3.5) {
        self.weatherInformation = Weather(status: "晴れ", weatherDescription: "今日の東京の天気は晴れです。", degrees: "23度")
    }
})

자리 표시자 오버레이 모니터

@Environment 변수 \.redactionReasons 를 사용하여 WeatherView 에 추가된 자리 표시자 오버레이의 유무를 모니터할 수 있습니다.

@Environment(\.redactionReasons) var redactions
if self.redactions.isEmpty {
    Button(action: {}, label: {
        Text("天気予報のビュー表示")
    })
}

​ 데이터 다운로드 중 애니메이션 추가

데이터를 다운로드하는 동안 애니메이션을 추가할 수도 있습니다. 예를 들어 자리 표시자 오버레이를 흐리게 하는 애니메이션을 추가하거나 불투명도를 변경할 수 있습니다.

​ 여기에서는 뷰에 애니메이션을 추가하는 뷰의 수정자 struct를 만들어야합니다.​ 이것은 뷰 불투명도를 1.0에서 0.3으로 변경하고 반복하는 예제 중 하나입니다.

struct EaseInOutAnimation: ViewModifier {

    @State private var contentOpacity = 1.0

    func body(content: Content) -> some View {
        content
            .opacity(contentOpacity)
            .animation(Animation
                        .easeInOut(duration: 2)
                        .repeatForever(autoreverses: true))
            .onAppear { contentOpacity = 0.3 }
    }

}

EaseInOutAnimation 뷰 한정자를 뷰 확장의 편집 된 한정자에 적용 할 수 있습니다.

extension View {
    @ViewBuilder
    func redacted(showPlaceholder: Bool) -> some View {
        if showPlaceholder {
            self
                .redacted(reason: .placeholder)
                .modifier(EaseInOutAnimation())
        } else {
            self
                .unredacted()
        }
    }
}

이제 showPlaceholder가 참이면 자리 표시자가 표시되고 EaseInOutAnimation 애니메이션도 뷰에 적용됩니다.

WeatherView 및 ContentView 코드 예제 보기

트위터 @MszPro

내 게시된 Qiita 기사 목록을 카테고리별로 확인할 수 있습니다.