SDWebImageSwiftUI

sdwebimageswiftui

iOS 15+/macos 12+のみをサポートし、アニメーション画像形式を気にしない場合は、Swiftuiの非典型的なものをお試しください

何のためですか

sdwebimageswiftuiは、sdwebimageに基づいたSwiftUIイメージロードフレームワークです。

Asyncイメージの読み込み、メモリ/ディスクキャッシュ、アニメーション画像再生、パフォーマンスなど、SDWebimageのすべてのお気に入りの機能をもたらします。

フレームワークは、SwiftUIフレームワークガイドラインと一致するさまざまなビュー構造体を提供します。 Imageに精通している場合は、 WebImageとAnimatedImageを使いやすいことがわかります。

Apple Visionos

v3.0.0から、SdwebimageswiftuiをVisionosプラットフォーム用にコンパイルできます。ただし、パッケージマネージャーのサポートが不足しているため（ツールの更新が必要）、Cocoapods/SPMはまだサポートしていません。

Xcodeのビルトインパッケージマネージャーの依存関係を使用して、VisionOSに構築できます。

Visionosの例を実行するには、 SDWebImageとSDWebImageSwiftUI両方をクローンして追加し、 SDWebImageSwiftUI.xcworkspaceを開き、それらのフォルダーをドラッグしてローカルパッケージの依存関係にする必要があります。

Xcodeのパッケージ依存関係を使用する代わりにフレームワークを本当に構築したい場合は、以下のマニュアル手順に従ってください。

1. sdwebimage、 SDWebImage.xcodeprojを開き、visionosプラットフォームのSDWebImageターゲットを構築します（必要に応じてMACH_O_TYPEを静的ライブラリに変更）
2. sdwebimageswiftuiをclone、 Carthage/Build/visionOSでディレクトリを作成し、 SDWebImage.frameworkをコピーしてそれにコピーします
3. SDWebImageSwiftUI.xcodeprojを開き、 SDWebImageSwiftUI visionOSターゲットを構築します

特徴

SdwebimageswiftuiはSdwebimageの上に構築されているため、現実世界のアプリで必要な高度な強力な機能の両方を提供します。必要に応じてウィキを確認してください。

• CPU && RAMのバランスを備えたアニメーション画像フルスタックソリューション
• アニメーションサポートを備えたプログレッシブ画像の読み込み
• 再利用可能なダウンロード、シングルURLを2回リクエストしないでください
• URL要求 /応答モディファイア、カスタムHTTPヘッダーを提供します
• 画像変圧器、コーナー半径またはCifilterを適用します
• 複数のキャッシュシステム、異なるソースからのクエリ
• 複数のローダーシステム、異なるリソースからのロード

また、sdwebimageで既存のコミュニティからすべてのメリットを得ることができます。 Coderプラグインを介して、大規模な画像形式のサポート（GIF/APNG/webp/heif/avif/svg/pdf）、Sdwebimagephotospluginを介したPhotokitサポート、Firebaseuiを介したFirebase統合などを介して、大規模な画像形式サポート（GIF/apng/heif/avif/svg/pdf）を使用できます。

これらすべての機能に加えて、同じデザインパターンを使用して優れたSwiftui市民になるように、バインディング、ビューモディファイアなど、Swiftuiの最適化を行います。

バージョン

このフレームワークは重大な開発中であり、可能な限り最新リリースを使用することをお勧めします（SDWebimage依存関係を含む）。

このフレームワークは、セマンティックバージョンに従います。各ソースブレイクAPIの変更は、メジャーバージョンにぶつかります。

Changelog

このプロジェクトでは、変更を記録するために変更ログ形式を維持します。バージョン間の変更についてchangelog.mdを確認してください。変更はリリースページにも更新されます。

貢献

すべての発行レポート、機能要求、貢献、およびGitHubスターを歓迎します。このフレームワークが便利だと思う場合は、アクティブなフィードバックとプロモーションを期待してください。

要件

• Xcode 14+
• iOS 14+
• macOS11+
• TVOS 14+
• watchos 7+
• Visionos 1+

Swiftui 1.0（iOS 13）

iOS 14（MACOS 11）は、SwiftUI 2.0を導入します。これは、最もAPIを互換性のあるものに保ちますが、SdWebimagesWiftuiの関数を破壊する多くの内部行動を変更します。

v3.0.0から、sdwebimageswiftuiドロップiOS 13サポート。 iOS 13で使用するには、代わりに最新のV2.xバージョン（または2.xブランチを使用）をチェックアウトします。

将来の移行のため

SDWebimage 6.0は混合Swift/OBJCコードベースを導入するため、このレポはSDWebimageコアレポに移行します。

ただし、心配しないでください。自動クロスモジュールオーバーレイを使用します。

import SwiftUI
import SDWebImage

次のように機能するには：

 import SwiftUI
import SDWebImage
import SDWebImageSwiftUI // <-- Automatic infer this

SDWebImageSwiftUI自動的にリンクします。このライブラリの命名は、SPMターゲットに保存されます。したがって、ほとんどの人にとって移行はスムーズです。別のメジャーバージョンをぶつけたくありません。 3.xは、Sdwebimageswiftuiの専用リポジトリの最終バージョンです

注：Super Advancedユーザーの場合、カスタムSwiftツールチェーンを使用している場合は、必ず-Xfrontend -enable-cross-import-overlaysを通過してください。

インストール

Swiftパッケージマネージャー

Sdwebimageswiftuiは、Swift Package Managerから入手できます。

• アプリ統合用

アプリの統合のために、Xcode 12以降を使用して、このパッケージをアプリターゲットに追加する必要があります。これを行うには、Xcodeを使用したステップバイステップのチュートリアルについて、アプリにパッケージの依存関係を追加することを確認してください。

• ダウンストリームフレームワーク用

ダウンストリームフレームワークの著者の場合、 Package.swiftファイルをGit Repoに作成し、次の行を追加して、SDWebimagesWiftuiに依存するフレームワークをマークする必要があります。

 let package = Package (
    dependencies : [
        . package ( url : " https://github.com/SDWebImage/SDWebImageSwiftUI.git " , from : " 3.0.0 " )
    ] ,
) 

cocoapods

sdwebimageswiftuiは、cocoapodsから入手できます。インストールするには、次の行をPodfileに追加するだけです。

 pod 'SDWebImageSwiftUI' 

カルタゴ

sdwebimageswiftuiは、カルタゴから入手できます。

 github "SDWebImage/SDWebImageSwiftUI"

使用法

WebImageを使用してネットワーク画像をロードします

• SDWebimageとして画像読み込みのためのプレースホルダーと詳細オプションコントロールをサポートします
• プログレッシブ画像の読み込みをサポートします（ベースラインなど）
• カスタム処理のための成功/失敗/進行状況の変更イベントをサポートします
• アクティビティ/進行状況インジケーターとカスタマイズを備えたインジケーターをサポートします
• Swiftuiを搭載した組み込みのアニメーションとトランジションをサポートします
• アニメーション画像もサポートします！

 var body : some View {
    WebImage ( url : URL ( string : " https://nokiatech.github.io/heif/content/images/ski_jump_1440x960.heic " ) ) { image in
        image . resizable ( ) // Control layout like SwiftUI.AsyncImage, you must use this modifier or the view will use the image bitmap size
    } placeholder : {
            Rectangle ( ) . foregroundColor ( . gray )
    }
    // Supports options and context, like `.delayPlaceholder` to show placeholder only when error
    . onSuccess { image , data , cacheType in
        // Success
        // Note: Data exist only when queried from disk cache or network. Use `.queryMemoryData` if you really need data
    }
    . indicator ( . activity ) // Activity Indicator
    . transition ( . fade ( duration : 0.5 ) ) // Fade Transition with duration
    . scaledToFit ( )
    . frame ( width : 300 , height : 300 , alignment : . center )
}

注：内部実装にImageを使用したこのWebImage 、SwiftUIレイアウトとアニメーションシステムに最適な互換性があります。ただし、アニメーション画像やベクトル画像をサポートしていないSwiftuiのImageとは異なり、 WebImageアニメーション画像もサポートしています（デフォルトではV2.0.0から）。

ただし、 WebImageアニメーションは単純な一般的なユースケースを提供するため、プログレッシブアニメーションレンダリングやベクターイメージレンダリングなどの高度なコントロールにAnimatedImageを使用することをお勧めします。

 @ State var isAnimating : Bool = true
var body : some View {
    WebImage ( url : URL ( string : " https://raw.githubusercontent.com/liyong03/YLGIFImage/master/YLGIFImageDemo/YLGIFImageDemo/joy.gif " ) , isAnimating : $isAnimating ) ) // Animation Control, supports dynamic changes
    // The initial value of binding should be true
    . customLoopCount ( 1 ) // Custom loop count
    . playbackRate ( 2.0 ) // Playback speed rate
    . playbackMode ( . bounce ) // Playback normally to the end, then reversely back to the start
    // `WebImage` supports advanced control just like `AnimatedImage`, but without the progressive animation support
}

注：インジケータの場合、独自のカスタムもできます。たとえば、iOS 14/watchos 7新しいProgressViewを紹介します。これは以下を簡単に使用できます。

 WebImage ( url : url )
. indicator ( . activity )

または、次のように書くことができます

 WebImage ( url : url )
. indicator {
    Indicator { _ , _ in
        ProgressView ( )
    }
}

AnimatedImageを使用してアニメーションを再生します

• ネットワークイメージとローカルデータとバンドルイメージをサポートします
• アニメーション画像形式とベクトル画像形式をサポートします
• アニメーション化されたプログレッシブイメージの読み込みをサポートします（Webブラウザなど）
• SwiftUIバインディングを使用してアニメーションコントロールをサポートします
• SDWEBIMAGEとCOREアニメーションを搭載したインジケーターとトランジションをサポートします
• ループカウント、再生レート、バッファサイズ、ルンループモードなどの高度なコントロールをサポートします
• ネイティブのUIKIT/AppKitビューとの座標をサポートします

 var body : some View {
    Group {
        AnimatedImage ( url : URL ( string : " https://raw.githubusercontent.com/liyong03/YLGIFImage/master/YLGIFImageDemo/YLGIFImageDemo/joy.gif " ) , placeholderImage : . init ( systemName : " photo " ) ) // Placeholder Image
        // Supports options and context, like `.progressiveLoad` for progressive animation loading
        . onFailure { error in
            // Error
        }
        . resizable ( ) // Resizable like SwiftUI.Image, you must use this modifier or the view will use the image bitmap size
        . indicator ( . activity ) // Activity Indicator
        . transition ( . fade ) // Fade Transition
        . scaledToFit ( ) // Attention to call it on AnimatedImage, but not `some View` after View Modifier (Swift Protocol Extension method is static dispatched)
        
        // Supports SwiftUI ViewBuilder placeholder as well
        AnimatedImage ( url : url ) {
            Circle ( ) . foregroundColor ( . gray )
        }
        
        // Data
        AnimatedImage ( data : try ! Data ( contentsOf : URL ( fileURLWithPath : " /tmp/foo.webp " ) ) )
        . customLoopCount ( 1 ) // Custom loop count
        . playbackRate ( 2.0 ) // Playback speed rate
        
        // Bundle (not Asset Catalog)
        AnimatedImage ( name : " animation1.gif " , isAnimating : $isAnimating ) // Animation control binding
        . maxBufferSize ( . max )
        . onViewUpdate { view , context in // Advanced native view coordinate
            // AppKit tooltip for mouse hover
            view . toolTip = " Mouseover Tip "
            // UIKit advanced content mode
            view . contentMode = . topLeft
            // Coordinator, used for Cocoa Binding or Delegate method
            let coordinator = context . coordinator
        }
    }
}

注： AnimatedImage 、アニメーション画像形式の画像URLまたは画像データの両方をサポートしています。内部実装にはSDWebimageのアニメーションImageViewを使用します。 Uikit/Appkitの代表可能なこのベースであるため、いくつかの高度なSwiftUIレイアウトとアニメーションシステムが期待どおりに機能しない場合があることに注意してください。ネイティブビューを変更するには、uikit/appkitとコアアニメーションが必要になる場合があります。

注： AnimatedImage .transition 、 .indicator 、 .aspectRatioなどのいくつかのメソッドは、 SwiftUI.Viewプロトコルメソッドと同じ命名を持っています。しかし、ARGSは異なるタイプを受け取ります。これは、 AnimatedImage UIKIT/AppKitコンポーネントとアニメーションで使用するサポートをサポートするためです。あいまいさを見つけた場合は、ドット式の構文の代わりにフルタイプ宣言を使用します。

注： AnimatedImageのメソッドの一部は、新しい変更コンテンツでsome Viewを返します。 Type関連のモディファイアメソッドが失われます。この場合、メソッド呼び出しを再注文するか、 .onViewUpdateでネイティブビュー（実際にはSDAnimatedImageView ）を使用して、scupeにuikit/appkit APIを使用します。

// Using UIKit components
var body : some View {
    AnimatedImage ( name : " animation2.gif " ) 
    . indicator ( SDWebImageProgressIndicator . default ) // UIKit indicator component
    . transition ( SDWebImageTransition . flipFromLeft ) // UIKit animation transition
}

// Using SwiftUI components
var body : some View {
    AnimatedImage ( name : " animation2.gif " )
    . indicator ( Indicator . progress ) // SwiftUI indicator component
    . transition ( AnyTransition . flipFromLeft ) // SwiftUI animation transition
}

選択するビュー

ここに2つの異なるビュータイプがある理由は、現在のSwiftuiの制限のためです。しかし、私たちはすべてのユースケースに最適なソリューションを提供することを目指しています。

アニメーション画像が必要ない場合は、まずWebImage使用することを好みます。組み込みのSwiftuiビューとしてシームレスに動作します。 Swiftuiが機能する場合、機能します。 Swiftuiが機能しない場合も、:)

単純なアニメーション画像が必要な場合は、 WebImageを使用してください。基本的なアニメーション画像サポートを提供します。しかし、これを気にしない場合、プログレッシブアニメーションのレンダリングもベクターイメージもサポートしていません。

強力なアニメーション画像が必要な場合は、 AnimatedImage選択するものです。静的画像もサポートしていることを忘れないでください。フォーマットを確認する必要はありません。ただ使用するだけです。また、UIKIT/AppKit色の色、ベクトル画像、シンボル画像構成、TVOSレイヤード画像などの強力な機能は、 AnimatedImageでのみ利用可能ですが、現在はSWFITUIではありません。

しかし、 AnimatedImage UIViewRepresentableを使用し、Uikitによって駆動されるため、現在、UikitとSwiftuiのレイアウトとアニメーションシステムの間にいくつかの小さな互換性のない問題、またはSwiftui自体に関連するバグがあるかもしれません。 Swiftuiの動作に一致し、 WebImageと同じAPIを提供するように最善を尽くします。これにより、必要に応じてこれら2つのタイプを簡単に切り替えることができます。

独自のビュータイプにImageManagerを使用してください

ImageManagerは、CombineのObservableObjectプロトコルに準拠するクラスです。これは、提供されたWebImageのコアフェッチデータソースです。

高度なユースケースの場合、 WebImageを使用したくない複雑なビューグラフに画像をロードするなど。自分のビュータイプをマネージャーに直接バインドできます。

SDWebImageManagerのように馴染みがありますが、画像を読み込むための真実の源を提供するSwiftui Worldのために構築されています。 Swiftuiの@ObservedObjectを使用して、ビューインスタンスの各マネージャーインスタンスをバインドすることをお勧めします。これにより、画像ステータスが変更されたときにビューのボディが自動的に更新されます。

 struct MyView : View {
    @ ObservedObject var imageManager = ImageManager ( )
    var body : some View {
        // Your custom complicated view graph
        Group {
            if imageManager . image != nil {
                Image ( uiImage : imageManager . image! )
            } else {
                Rectangle ( ) . fill ( Color . gray )
            }
        }
        // Trigger image loading when appear
        . onAppear { self . imageManager . load ( url : url ) }
        // Cancel image loading when disappear
        . onDisappear { self . imageManager . cancel ( ) }
    }
}

カスタマイズと構成のセットアップ

このフレームワークは、さまざまなユーザーの需要を満たすための高度なカスタマイズと構成をサポートするSDWebimageに基づいています。

複数のコーダープラグインを外部画像形式に登録できます。複数のキャッシュ（異なるパスと構成）、複数のローダー（URLSESSIONおよび写真URL）を登録できます。キャッシュの有効期限、サイズ、優先度などを制御できます。すべてWikiで。

SwiftUIアプリにこれらのセットアップコードを配置するのに最適な場所であるAppDelegate.swift ：

 func application ( _ application : UIApplication , didFinishLaunchingWithOptions launchOptions : [ UIApplication . LaunchOptionsKey : Any ] ? ) -> Bool {
    // Add WebP/SVG/PDF support
    SDImageCodersManager . shared . addCoder ( SDImageWebPCoder . shared )
    SDImageCodersManager . shared . addCoder ( SDImageAVIFCoder . shared )
    SDImageCodersManager . shared . addCoder ( SDImageSVGCoder . shared )
    SDImageCodersManager . shared . addCoder ( SDImagePDFCoder . shared )
    
    // Add default HTTP header
    SDWebImageDownloader . shared . setValue ( " image/webp,image/apng,image/*,*/*;q=0.8 " , forHTTPHeaderField : " Accept " )
    
    // Add multiple caches
    let cache = SDImageCache ( namespace : " tiny " )
    cache . config . maxMemoryCost = 100 * 1024 * 1024 // 100MB memory
    cache . config . maxDiskSize = 50 * 1024 * 1024 // 50MB disk
    SDImageCachesManager . shared . addCache ( cache )
    SDWebImageManager . defaultImageCache = SDImageCachesManager . shared
    
    // Add multiple loaders with Photos Asset support
    SDImageLoadersManager . shared . addLoader ( SDImagePhotosLoader . shared )
    SDWebImageManager . defaultImageLoader = SDImageLoadersManager . shared
    return true
}

詳細については、詳細なAPI使用量を学ぶために、デモを確認することをお勧めします。また、最新のAPIドキュメントで、高度な使用のためにチェックすることもできます。

ドキュメント

• sdwebimageswiftui APIドキュメント
• sdwebimage APIドキュメント

よくある質問

一般的な問題

リスト/lazystack/lazygridおよびforeachでWebImage/AnimatedImageを使用します

swiftuiにはList/LazyStack/LazyGridでステートフルビューを使用する場合、既知の動作（バグ？）があります。上部レベルのビューのみが独自の@State/@StateObjectを保持できますが、スクロールアウトするとサブ構造が状態を失います。ただし、WebImage/Animatedはどちらもステートフルです。画面外にスクロールしても、状態が同期し続けるようにします。いくつかのトリックを使用できます。

詳細：https：//twitter.com/fatbobman/status/1572507700436807683?s=21&t = z4fkawtmvjsgl-wkdjgreq

要するに、そうすることは推奨されていません：

 struct ContentView {
    @ State var imageURLs : [ String ]
    var body : some View {
        List {
            ForEach ( imageURLs , id :  . self ) { url in
                VStack {
                    WebImage ( url ) // The top level is `VStack`
                }
            }
        }
    }
}

代わりに、このアプローチを使用してください。

 struct ContentView {
    struct BodyView {
        @ State var url : String
        var body : some View {
            VStack {
                WebImage ( url )
            }
        }
    }
    @ State var imageURLs : [ String ]
    var body : some View {
        List {
            ForEach ( imageURLs , id :  . self ) { url in
                BodyView ( url : url )
            }
        }
    }
} 

ボタン/NavigationLinkで画像/WebImage/AnimatedImageを使用します

SwiftuiのButton 、デフォルトでコンテンツ（ Textを除く）にオーバーレイを適用します。これは、このようなコードを書くのによくある間違いです。これは奇妙な動作を引き起こします。

// Wrong
Button ( action : {
    // Clicked
} ) {
    WebImage ( url : url )
}
// NavigationLink create Button implicitly
NavigationView {
    NavigationLink ( destination : Text ( " Detail view here " ) ) {
        WebImage ( url : url )
    }
}

代わりに、 .buttonStyleオーバーライドして.renderingModeスタイルを使用する必要があります。タッチハンドリングには.onTapGestureモディファイアを使用することもできます。ボタン内の画像とnavigationlinkのオーバーレイ色を無効にする方法を参照してください

// Correct
Button ( action : {
    // Clicked
} ) {
    WebImage ( url : url )
}
. buttonStyle ( PlainButtonStyle ( ) )
// Or
NavigationView {
    NavigationLink ( destination : Text ( " Detail view here " ) ) {
        WebImage ( url : url )
        . renderingMode ( . original )
    }
} 

色合いの色付きのベクトル画像（SVG/PDF）をレンダリングします

SVG/PDF外部コーダーを使用して、 WebImage/AnimatedImage両方がベクトル画像をレンダリングするのをサポートします。ただし、内部的には異なります。

• AnimatedImage ：Appleのシンボルイメージとベクトル描画からTechを使用して、詳細を失うことなく動的なサイズの変更をサポートします。また、uikit/appkitベースの実装とAPIを使用します。必要に応じて、 .context(.imageThumbnailPixelSize: size)を渡して、ビットマップレンダリングを使用してピクセルを増やします。
• WebImage ：ベクトル画像をビットマップバージョンに描画します。これは通常のPNGと同じです。デフォルトでは、ベクトル画像コンテンツサイズ（SVGキャンバスサイズまたはPDFメディアボックスサイズ）を使用します。必要に応じて、 .context(.imageThumbnailPixelSize: size)を通過して、より多くのピクセルを取得します。

ビットマップレンダリングの場合、SVG/PDFアイコンをカスタムカラー（シンボルイメージなど）で色付けし、 .renderingMode(.template)および.tint(:)または.foregroundColor(:) SwiftUI.Image ）を使用します。

• Webimage

 var body : some View {
    WebImage ( url : URL ( string : " https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/w3c.svg " ) )
    . resizable ( )
    . renderingMode ( . template )
    . foregroundColor ( . red ) // or `.tint(:)`, `.accentColor(:)`
    . scaledToFit ( )
}

• AnimatedImage

 var body : some View {
    AnimatedImage ( url : URL ( string : " https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/w3c.svg " ) , context : [ . imageThumbnailPixelSize : CGSize ( width : 100 , height : 100 ) ] )
    . resizable ( )
    . renderingMode ( . template )
    // seems `.foregroundColor(:)` does effect `UIView.tintColor`, use `tint(:)` or `.accentColor(:)` instead.
    // Or you can use `onViewCreate(:)` to get native `SDAnimatedImageView` and set `tintColor` (AppKit use `contentTintColor`)
    . tint ( . red )
    . scaledToFit ( )
}

詳細を参照：UIにシンボル画像の構成と表示

外部ローダー/キャッシュ/コーダーで使用します

SDWebimage自体は、多くのカスタムローダー（Firebase StorageやPhotoskitなど）、キャッシュ（YycacheやPincacheなど）、およびコーダー（WebpやAvif、さらにはLottieなど）をサポートしています。

SwiftUI環境でこれらの外部コンポーネントをセットアップするためのチュートリアルを次に示します。

外部SDKをセットアップします

SwiftUI App.init()メソッド内にセットアップコードを配置できます。

 @ main
struct MyApp : App {
    
    init ( ) {
        // Custom Firebase Storage Loader
        FirebaseApp . configure ( )
        SDImageLoadersManager . shared . loaders = [ FirebaseUI . StorageImageLoader . shared ]
        SDWebImageManager . defaultImageLoader = SDImageLoadersManager . shared
        // WebP support
        SDImageCodersManager . shared . addCoder ( SDImageWebPCoder . shared )
        // AVIF support
        SDImageCodersManager . shared . addCoder ( SDImageAVIFCoder . shared )
    }
    
    var body : some Scene {
        WindowGroup {
            ContentView ( )
        }
    }
}

または、アプリに複雑なAppDelegateクラスがある場合は、セットアップコードをそこに配置します。

 class AppDelegate : NSObject , UIApplicationDelegate {
    func application ( _ application : UIApplication , didFinishLaunchingWithOptions launchOptions : [ UIApplication . LaunchOptionsKey : Any ] ? = nil ) -> Bool {
        SDImageCachesManager . shared . caches = [ YYCache ( name : " default " ) ]
        SDWebImageManager . defaultImageCache = SDImageCachesManager . shared
        return true
    }
}

@ main
struct MyApp : App {
    @ UIApplicationDelegateAdaptor ( AppDelegate . self ) var appDelegate

    var body : some Scene {
        WindowGroup {
            ContentView ( )
        }
    }
} 

外部SDKを使用します

いくつかのカスタムローダーの場合、SDWebimageが次のような他のSDKからコンテキストを取得できるように、いくつかの特別なAPIを使用してURL構造体を作成する必要があります。

• FireBasestorage

 let storageRef : StorageReference
let storageURL = NSURL . sd_URL ( with : storageRef ) as URL ?
// Or via convenience extension
let storageURL = storageRef . sd_URLRepresentation

• Photoskit

 let asset : PHAsset
let photosURL = NSURL . sd_URL ( with : asset ) as URL ?
// Or via convenience extension
let photosURL = asset . sd_URLRepresentation

一部のカスタムコーダーの場合、ベクトル画像SVG/PDFなどの動作を制御するためのいくつかのオプションを使用して画像を要求する必要があります。 swiftui.imageまたはwebimageはベクトルグラフをまったくサポートしていないためです。

• SVG/PDFコーダー

 let vectorURL : URL ? // URL to SVG or PDF
WebImage ( url : vectorURL , context : [ . imageThumbnailPixelSize : CGSize ( width : 100 , height : 100 ) ] )

• ロッティコーダー

 let lottieURL : URL ? // URL to Lottie.json
WebImage ( url : lottieURL , isAnimating : $isAnimating )

キャッシュの場合、実際には何も心配する必要はありません。セットアップ後に機能します。

後方展開と弱いリンクSwiftuiに使用します

SdwebimagesWiftuiは、アプリターゲットがiOS 14/MacOS 11/TVOS 14/Watchos 7未満の展開ターゲットバージョンを持っている場合に使用することをサポートします。

後方展開を使用するには、次のことを行う必要があります。

弱いリンクフレームワークを追加します

add -weak_framework SwiftUI -weak_framework CombineアプリのターゲットのOther Linker Flagsビルド設定に組み合わせます。 XcodeのOptional Frameworkチェックボックスを使用してこれを行うこともできます。同じ効果があります。

Sdwebimageswiftuiだけでなく、すべてのサードパーティのSwiftuiフレームワークにもこのビルド設定が必要であることに注意する必要があります。または、iOS 12デバイスで実行すると、起動時にランタイムダイルドエラーがトリガーされます。

iOS 12.1での後方展開

iOS 12.2以下の展開ターゲットバージョンの場合（iOSシステムで5ランタイムがバンドルされた最初のバージョン）、SdwebimagesWiftuiのMIN展開ターゲットバージョンを変更する必要があります。これにより、コンパイラの最適化に副作用が発生し、一部のフレームワークの大規模な警告がトリガーされる場合があります。

ただし、iOS 12.2+の場合、iOS 14クライアントの追加の警告やパフォーマンスが遅くなることはありません。

SwiftはMin Deployment Targetバージョンを使用して、Swiftランタイムをバンドルしたアプリをリンクするか、組み込みのシステム（ /usr/lib/swift/libswiftCore.dylib ）を組み込んだかを検出するためです。

• CocoaPodsユーザーの場合、PodfileのMin Deployment Targetバージョンをポストインストーラーを介して変更できます。

 post_install do | installer |
  installer . pods_project . targets . each do | target |
    target . build_configurations . each do | config |
      config . build_settings [ 'IPHONEOS_DEPLOYMENT_TARGET' ] = '11.0' # version you need
    end
  end
end

• Carthageユーザーの場合、 carthage update --no-buildを使用して依存関係をダウンロードしてから、XCode Projectの展開ターゲットバージョンを変更して、バイナリフレームワークを構築できます。

• SWIFTPMユーザーの場合、展開ターゲットバージョンを変更するには、ローカル依存関係（GITサブモジュールを使用）を使用する必要があります。

iOS 12.2+での後方展開

• Carthageユーザーの場合、構築されたバイナリフレームワークは、ライブラリの進化を使用して後方展開をサポートします。

• cocoapodsユーザーの場合、Podfileでプラットフォームバージョンの検証をスキップできます。

 platform :ios , '14.0' # This does not effect your App Target's deployment target version, just a hint for CocoaPods

• SwiftPMユーザーの場合、SwiftPMは弱いリンクやライブラリの進化をサポートしていないため、MIN展開目標を変更せずにiOS 12+ユーザーに展開できません。

利用可能な注釈を追加します

このように、利用可能な注釈とランタイムチェックを使用して、すべてのSwiftUIコードを追加します。

// AppDelegate.swift
func application ( _ application : UIApplication , didFinishLaunchingWithOptions launchOptions : [ UIApplication . LaunchOptionsKey : Any ] ? ) -> Bool {
    // ...
    if #available ( iOS 14 , * ) {
        window . rootViewController = UIHostingController ( rootView : ContentView ( ) )
    } else {
        window . rootViewController = ViewController ( )
    }
    // ...
}

// ViewController.swift
class ViewController : UIViewController {
    var label : UILabel = UILabel ( )
    override func viewDidLoad ( ) {
        super . viewDidLoad ( )
        view . backgroundColor = . white
        view . addSubview ( label )
        label . text = " Hello World iOS 12! "
        label . sizeToFit ( )
        label . center = view . center
    }
}

// ContentView.swift
@ available ( iOS 14 . 0 , macOS 11 . 0 , tvOS 14 . 0 , watchOS 7 . 0 , * )
struct ContentView : View {
    var body : some View {
        Group {
            Text ( " Hello World iOS 14! " )
            WebImage ( url : URL ( string : " https://i.loli.net/2019/09/24/rX2RkVWeGKIuJvc.jpg " ) )
        }
    }
} 

デモ

Swiftuiを使用して例を実行するには、手順に従ってください。

1. SDWebImageSwiftUI.xcworkspaceを開いて、Swiftpmがテスト依存関係をダウンロードするのを待ちます。
2. SDWebImageSwiftUIDemo （または他のプラットフォーム）スキームを選択し、デモアプリケーションを実行します。

注：ここでのPodfile 、履歴がココアポッドを使用してLIBをデモに統合するためですが、今ではSPMを使用しているためです。

SwiftuiはすべてのAppleプラットフォームをサポートすることを目的としているため、デモもこれを行います。

• iOS（iPhone/iPad/Mac Catalyst）
• macos
• TVOS
• watchos
• Visionos

デモのヒント：

1. Switch （右クリック/watchosのタップ）を使用して、 WebImageとAnimatedImageを切り替えます。
2. Reload （WatchosのMacos/ボタンを右クリック）を使用してキャッシュをクリアします。
3. Swipe Left （TVOSのメニューボタン）を使用して、リストから1つの画像URLを削除します。
4. ピンチジェスチャー（Watchosのデジタルクラウン、TVOSでボタンを再生）から詳細ページ画像をズームインします。
5. キャッシュをクリアして詳細ページに移動して、プログレッシブロードを確認します。

テスト

sdwebimageswiftuiは、コードの品質を向上させるための単体テストを持っています。 Swiftuiの場合、Appleから提供される公式の単体試験ソリューションはありません。

ただし、Swiftuiは状態ベースであり、実装されたレイアウトシステムであるため、ソリューションを提供するオープンソースプロジェクトがあります。

• ViewIndpector：Viewのランタイム属性値（ .frame Modifier、 .image値など）を検査します。これを使用して、 AnimatedImageとWebImageテストします。また、ネイティブUiview/nsviewへの検査を許可します。

テストを実行するには：

1. Root Directoryにpod install実行して、依存関係をインストールします。
2. SDWebImageSwiftUI.xcworkspaceを開いて、Swiftpmがテスト依存関係をダウンロードするのを待ちます。
3. SDWebImageSwiftUITestsスキームを選択し、テストを開始します。

すでにCIパイプラインをセットアップしています。各PRはテストケースを実行し、テストレポートをCodecovにアップロードします。

スクリーンショット

• iOSデモ

• MacOSデモ

• TVOSデモ

• watchosデモ

余分なメモ

上記のすべてに加えて、このプロジェクトは、SDWebimage自体のSwiftプラットフォームで使用可能な次の機能を確保することもできます。

• Swiftuiの互換性
• Swiftパッケージマネージャーの統合
• 迅速なソースコードの互換性とSwifty

つまり、このプロジェクトは1つのコアユースケースとダウンストリーム依存関係の1つであり、SDWebimage自体が将来の開発を促進しました。

著者

Dreampiggy

ありがとう

• sdwebimage
• libwebp
• libavif
• キングフィッシャー
• Swiftuix
• エスペラ
• Swiftui-introspect
• viewindpector
• Swiftuibackports

ライセンス

Sdwebimageswiftuiは、MITライセンスの下で入手できます。詳細については、ライセンスファイルを参照してください。