SDWebImageSwiftUI

sdwebimageswiftui

إذا كنت تدعم iOS 15+/MacOS 12+ فقط ولا تهتم بتنسيق الصور المتحركة ، فحاول عدم التزامات Swiftui

ماذا ل

SdwebimagesWiftui هو إطار تحميل الصور Swiftui ، والذي يعتمد على sdwebimage.

إنه يجلب جميع الميزات المفضلة لديك من SDWebImage ، مثل تحميل الصور Async ، والتخزين المؤقت للذاكرة/القرص ، وتشغيل الصور المتحركة والعروض.

يوفر الإطار هياكل العرض المختلفة ، والتي تتطابق مع API مع المبدأ التوجيهي Swiftui Framework. إذا كنت على دراية Image ، فستجد أنه من السهل استخدام WebImage و AnimatedImage .

Apple Visionos

من v3.0.0 ، يمكن تجميع sdwebimageswiftui لمنصة VisionOS. ومع ذلك ، نظرًا لدعم Manager Package (Need Tools Update) ، فإننا لا ندعم Cocoapods/SPM حتى الآن.

يمكنك فقط استخدام تبعية مدير الحزمة المدمجة في XCode للبناء على VisionOS.

لتشغيل مثال VisionOS ، تحتاج إلى استنساخ وإضافة كل من SDWebImage و SDWebImageSwiftUI ، فتح SDWebImageSwiftUI.xcworkspace وسحب تلك المجلدات لتصبح تبعية الحزمة المحلية ، انظر: تحرير تبعية الحزمة كحزمة محلية

إذا كنت ترغب حقًا في إنشاء إطار عمل بدلاً من استخدام تبعية حزمة Xcode ، باتباع الخطوات اليدوية أدناه:

1. clone sdwebimage ، open SDWebImage.xcodeproj وإنشاء SDWebImage Target لمنصة VisionOS (تغيير MACH_O_TYPE إلى مكتبة ثابتة إذا كنت بحاجة)
2. clone sdwebimageswiftui ، قم بإنشاء دليل في Carthage/Build/visionOS ونسخ SDWebImage.framework في ذلك
3. فتح SDWebImageSwiftUI.xcodeproj وبناء SDWebImageSwiftUI visionOS الهدف

سمات

نظرًا لأن SDWebImagesWiftui مبني على رأس SDWebImage ، فإنه يوفر كل من الميزات خارج الصندوق بالإضافة إلى الميزات القوية المتقدمة التي قد ترغب في تطبيقاتها في العالم الحقيقي. تحقق من ويكي عندما تحتاج:

• حل الرسوم المتحركة حل الكامل ، مع توازن CPU && RAM
• تحميل الصور التدريجي ، مع دعم الرسوم المتحركة
• تنزيل قابل لإعادة الاستخدام ، لا تطلب عنوان URL واحد مرتين
• url request / reponding modifier ، توفير رأس HTTP مخصص
• محول الصور ، تطبيق نصف قطر الزاوية أو cifilter
• نظام ذاكرة التخزين المؤقت المتعدد ، استعلام من مصدر مختلف
• نظام لوادر متعددة ، يتم تحميله من مورد مختلف

يمكنك أيضًا الحصول على جميع الفوائد من المجتمع الحالي حول SDWebimage. يمكنك الحصول على دعم تنسيق صورة ضخم (GIF/APNG/WEBP/HEIF/AVIF/SVG/PDF) عبر الإضافات المبرمج ، دعم الضوئي عبر sdwebimagephotosplugin ، تكامل Firebase عبر Firebaseui ، إلخ.

إلى جانب كل هذه الميزات ، نقوم بتحسين Swiftui ، مثل الربط ، عرض المعدل ، باستخدام نفس نمط التصميم لتصبح مواطنًا جيدًا.

إصدار

هذا الإطار قيد التطوير بشكل كبير ، يوصى باستخدام أحدث إصدار قدر الإمكان (بما في ذلك التبعية sdwebimage).

هذا الإطار يتبع النسخة الدلالية. كل تغييرات واجهة برمجة تطبيقات مصدر تكسير سوف ترتفع إلى نسخة رئيسية.

Changelog

استخدام هذا المشروع يحتفظ بتنسيق changelog لتسجيل التغييرات. تحقق من changelog.md حول التغييرات بين الإصدارات. سيتم أيضًا تحديث التغييرات في صفحة الإصدار.

مساهمة

يتم الترحيب بجميع تقارير المشكلات وطلبات الميزات والمساهمات ونجوم Github. نأمل الحصول على ردود الفعل النشطة والترويج إذا وجدت هذا الإطار مفيدًا.

متطلبات

• xcode 14+
• iOS 14+
• ماكوس 11+
• TVOS 14+
• Watchos 7+
• Visionos 1+

لـ Swiftui 1.0 (iOS 13)

IOS 14 (MACOS 11) يقدم Swiftui 2.0 ، الذي يحافظ على توافق أكثر API ، ولكنه يغير العديد من السلوكيات الداخلية ، والتي تكسر وظيفة SDWebImagesWiftui.

من V3.0.0 ، Sdwebimageswiftui Drop IOS 13 دعم. لاستخدامها على iOS 13 ، قم بالخروج عن أحدث إصدار من V2.x (أو باستخدام 2.x فرع) بدلاً من ذلك.

للانتقال في المستقبل

نظرًا لأن SDWebImage 6.0 ستقدم قاعدة كود Swift/OBJC المختلطة ، فإن هذا الريبو سوف ينتقل إلى repo Core Sdwebimage.

ولكن لا تقلق ، سنستخدم تراكب الوحدة النمطية التلقائية ، مما يعني ، يمكنك استخدام:

import SwiftUI
import SDWebImage

للعمل مثل:

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

سوف تربط SDWebImageSwiftUI تلقائيًا ، وسيظل تسمية هذه المكتبة في هدف SPM. لذا فإن الانتقال سلس لمعظمكم ، لا أريد أن أصطدم نسخة رئيسية أخرى. 3.x هو الإصدار النهائي لـ SDWebImagesWiftui المخصص لإعادة

ملاحظة: بالنسبة للمستخدم المتقدم الفائق ، إذا كنت تستخدم بعض أدوات الأدوات السريعة المخصصة ، فتأكد من -Xfrontend -enable-cross-import-overlays

تثبيت

مدير الحزمة السريع

يتوفر SdwebimagesWiftui من خلال Swift Package Manager.

• لتكامل التطبيق

لتكامل التطبيق ، يجب عليك استخدام XCode 12 أو أعلى ، لإضافة هذه الحزمة إلى هدف التطبيق الخاص بك. للقيام بذلك ، تحقق من إضافة تبعيات الحزمة إلى تطبيقك حول البرنامج التعليمي خطوة بخطوة باستخدام XCode.

• لإطار المصب

بالنسبة لمؤلف Framework Opertream ، يجب عليك إنشاء Package.swift .

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

كوكوبودس

يتوفر 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 )
}

ملاحظة: هذا WebImage باستخدام Image للتنفيذ الداخلي ، وهو الأفضل التوافق مع نظام التخطيط والرسوم المتحركة Swiftui. ولكن على عكس Image Swiftui التي لا تدعم صورة الرسوم المتحركة أو صورة المتجه ، يدعم 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 لتشغيل الرسوم المتحركة

• يدعم صورة الشبكة وكذلك البيانات المحلية وصورة الحزمة
• يدعم تنسيق الصور المتحركة وكذلك تنسيق صورة المتجه
• يدعم تحميل الصور التدريجي للرسوم المتحركة (مثل متصفح الويب)
• يدعم التحكم في الرسوم المتحركة باستخدام ملزمة Swiftui
• يدعم المؤشر والانتقال ، مدعوم من sdwebimage والرسوم المتحركة الأساسية
• يدعم التحكم المتقدم مثل عدد الحلقة ، ومعدل التشغيل ، وحجم المخزن المؤقت ، ووضع RunLoop ، إلخ
• يدعم التنسيق مع عرض 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 أو بيانات الصورة لتنسيق الصورة المتحركة. التي تستخدم ImageView الرسوم المتحرك من sdwebimage للتنفيذ الداخلي. انتبه إلى أنه نظرًا لأن هذه القاعدة على Uikit/Appkit تمثل ، فقد لا يعمل نظام تخطيط Swiftui والرسوم المتحركة المتقدم كما هو متوقع. قد تحتاج إلى Uikit/Appkit والرسوم المتحركة الأساسية لتعديل العرض الأصلي.

ملحوظة: AnimatedImage بعض الأساليب مثل .transition و .indicator و .aspectRatio لها نفس تسمية أساليب بروتوكول SwiftUI.View . لكن ARGS يتلقى النوع مختلف. وذلك لأن AnimatedImage يدعم لاستخدامه مع مكون Uikit/AppKit والرسوم المتحركة. إذا وجدت الغموض ، فاستخدم إعلان النوع الكامل بدلاً من بناء جملة التعبير DOT.

ملاحظة: ستعيد بعض الطرق على AnimatedImage some View ، وهو محتوى معدّل جديد. ستفقد طريقة المعدل ذات الصلة. في هذه الحالة ، يمكنك إما إعادة ترتيب استدعاء الطريقة ، أو استخدام العرض الأصلي (في الواقع SDAnimatedImageView ) في .onViewUpdate ، استخدم 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
}

أي عرض للاختيار

لماذا لدينا نوعان مختلفان من العرض هنا ، بسبب حد Swiftui الحالي. لكننا نهدف إلى توفير أفضل حل لجميع حالات الاستخدام.

إذا لم تكن بحاجة إلى صورة متحركة ، تفضل استخدام WebImage أولاً. الذي يتصرف بسلاسة مثل عرض Swiftui مدمج. إذا كان Swiftui يعمل ، فهو يعمل. إذا كان Swiftui لا يعمل ، فهذا :)

إذا كنت بحاجة إلى صورة متحركة بسيطة ، فاستخدم WebImage . التي توفر دعم الصور المتحركة الأساسية. لكنه لا يدعم عرض الرسوم المتحركة التدريجي ، ولا صورة المتجهات ، إذا كنت لا تهتم بهذا.

إذا كنت بحاجة إلى صورة متحركة قوية ، فإن AnimatedImage هو واحد للاختيار. تذكر أنه يدعم الصورة الثابتة أيضًا ، فأنت لست بحاجة إلى التحقق من التنسيق ، فقط استخدمه. أيضًا ، بعض الميزات القوية مثل لون Uikit/Appkit Tint ، صورة المتجه ، تكوين صورة الرمز ، صورة TVOS ، متوفرة فقط في AnimatedImage ولكن ليس في SWFITUI حاليًا.

ولكن ، نظرًا لأن AnimatedImage تستخدم UIViewRepresentable و Served بواسطة Uikit ، فقد تكون هناك حاليًا بعض المشكلات الصغيرة غير المتوافقة بين نظام Uikit و Swiftui للتخطيط ونظام الرسوم المتحركة ، أو الأخطاء المتعلقة بـ Swiftui نفسها. نحن نبذل قصارى جهدنا لمطابقة سلوك Swiftui ، ونوفر نفس واجهة برمجة التطبيقات مثل WebImage ، مما يجعل من السهل التبديل بين هذين النوعين إذا لزم الأمر.

استخدم ImageManager لنوع العرض الخاص بك

The ImageManager هو فئة تتوافق مع بروتوكول الجمع بين Observable. وهو مصدر بيانات الجلب الأساسي لـ WebImage الذي قدمناه.

لحالة الاستخدام المتقدمة ، مثل تحميل الصورة في الرسم البياني المعقد الذي لا تريد استخدام WebImage . يمكنك ربط نوع العرض الخاص بك مباشرة مع المدير.

تبدو مألوفة مثل SDWebImageManager ، ولكن تم تصميمها لعالم Swiftui ، والتي توفر مصدر الحقيقة لتحميل الصور. من الأفضل استخدام Swiftui's @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 للصور). يمكنك التحكم في تاريخ انتهاء صلاحية ذاكرة التخزين المؤقت ، والحجم ، وتنزيل الأولوية ، وما إلى ذلك.

أفضل مكان لوضع رمز الإعداد هذا لتطبيق 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 وثائق
• وثائق API Sdwebimage

التعليمات

مشاكل شائعة

باستخدام WebImage/AnimatedImage في القائمة/LazyStack/LazyGrid و foreach

Swiftui لديه سلوك معروف (خطأ؟) عند استخدام عرض الدولة في List/LazyStack/LazyGrid . يمكن فقط عرض المستوى الأعلى أن يحتفظ بـ @State/@StateObject ، لكن الهيكل الفرعي سوف يفقد الحالة عند الخروج من الشاشة. ومع ذلك ، فإن WebImage/الرسوم المتحركة على حد سواء. لضمان استمرار الدولة متزامنة حتى عند الخروج من الشاشة. يمكنك استخدام بعض الحيل.

شاهد المزيد: 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 )
            }
        }
    }
} 

باستخدام Image/WebImage/AnimatedImage في الزر/NavigationLink

قم بتطبيق Button Swiftui على محتواه (باستثناء 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) مع لون الصبغة

يدعم كل من WebImage/AnimatedImage تقديم صورة المتجه ، باستخدام المبرمجين الخارجيين SVG/PDF . ومع ذلك فهي مختلفة داخليا.

• AnimatedImage : استخدم Tech من صورة رمز Apple ورسم المتجهات ، ويدعم تغييرات الحجم الديناميكي دون فقدان تفاصيل. ويستخدم تطبيق Uikit/Appkit و APIs. إذا كنت تريد ، مرر .context(.imageThumbnailPixelSize: size) لاستخدام عرض صورة نقطية والحصول على المزيد من وحدات البكسل.
• WebImage : يرسم صورة المتجه إلى إصدار نقطية. التي تماما مثل PNG العادية. بشكل افتراضي ، نستخدم حجم محتوى صورة Vector (SVG Canvas Size أو PDF Media Size). إذا كنت تريد ، مرر .context(.imageThumbnailPixelSize: size) للحصول على المزيد من وحدات البكسل.

لتقديم صورة SwiftUI.Image ، يمكنك أيضًا تلميخ أيقونات SVG/PDF بألوان مخصصة (مثل صور الرموز) ، واستخدام .renderingMode(.template) و .tint(:) .foregroundColor(:) أو.

• 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 ( )
}

• simatedimage

 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 ( )
}

شاهد المزيد: تكوين وعرض صور الرمز في واجهة المستخدم الخاصة بك

باستخدام اللوادر الخارجية/التخزين المؤقت/المبرمجين

يدعم Sdwebimage نفسها العديد من اللوادر المخصصة (مثل تخزين Firebase و Photoskit) ، وذاكرة التخزين المؤقت (مثل Yycache و Pincache) ، والمبرمجين (مثل WebP و Avif ، وحتى Lottie).

فيما يلي البرنامج التعليمي لإعداد هذه المكونات الخارجية مع بيئة Swiftui.

إعداد SDKs الخارجية

يمكنك وضع رمز الإعداد داخل طريقة 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 ( )
        }
    }
} 

استخدام SDKs الخارجية

بالنسبة لبعض اللوادر المخصصة ، تحتاج إلى إنشاء بنية عنوان URL مع بعض واجهات برمجة التطبيقات الخاصة ، بحيث يمكن لـ SDWebImage استرداد السياق من SDKs الأخرى ، مثل:

• 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

بالنسبة لبعض المبرمجين المخصصين ، تحتاج إلى طلب الصورة مع بعض الخيارات للتحكم في السلوك ، مثل Vector Images 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 ) ] )

• المبرمج Lottie

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

بالنسبة للذاكرة التخزين المؤقت ، لا داعي للقلق بشأن أي شيء. إنه يعمل فقط بعد الإعداد.

باستخدام النشر للخلف وضعف ربط Swiftui

يدعم SDWebImagesWiftui استخدامه عندما يكون لأهداف التطبيق الخاصة بك إصدار مستهدف للنشر أقل من iOS 14/MACOS 11/TVOS 14/WatchOS 7. والذي سيضعف الربط بين Swiftui (دمج) للسماح للكتابة رمزًا مع فحص متاح في وقت التشغيل.

لاستخدام النشر المتخلف ، عليك القيام بما يلي الأشياء:

أضف إطارًا ضعيفًا للربط

إضافة -weak_framework SwiftUI -weak_framework Combine في إعدادات بناء Other Linker Flags في هدف التطبيق الخاص بك. يمكنك أيضًا القيام بذلك باستخدام مربع Optional Framework لـ XCode ، هناك نفس التأثير.

يجب أن تلاحظ أن جميع أطر عمل Swiftui من طرف ثالث يجب أن يكون لها هذا إعداد البناء أيضًا ، ليس فقط SdwebimagesWiftui. أو عند التشغيل على جهاز iOS 12 ، سيؤدي ذلك إلى تشغيل خطأ DYLD وقت التشغيل عند بدء التشغيل.

النشر المتخلف على iOS 12.1-

بالنسبة إلى الإصدار المستهدف للنشر أدناه iOS 12.2 (الإصدار الأول الذي تم تجميعه في نظام التشغيل Swift 5 في نظام iOS) ، يجب عليك تغيير الإصدار المستهدف للنشر MIN من SDWebImagesWiftui. قد يأخذ هذا بعض التأثير الجانبي على تحسين برنامج التحويل البرمجي ويؤدي إلى تحذيرات هائلة لبعض الأطر.

ومع ذلك ، بالنسبة إلى iOS 12.2+ ، لا يزال بإمكانك الاحتفاظ بإصدار MIN Deployment Target إلى iOS 14 ، ولا توجد تحذيرات إضافية أو أداء يتباطأ لعميل iOS 14.

نظرًا لأن SWIFT استخدم إصدار MIN Deployment Target لاكتشاف ما إذا كان سيتم ربط التطبيق السريع المدمج Swift ، أو النظام المدمج في واحد ( /usr/lib/swift/libswiftCore.dylib ).

• بالنسبة لمستخدم Cocoapods ، يمكنك تغيير إصدار MIN Deployment Target في PodFile عبر مثبت Post:

 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 لتنزيل التبعية ، ثم تغيير إصدار Deployment Deployment Project الخاص بـ XCODE وبناء الإطار الثنائي.

• بالنسبة لمستخدم 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 ضعف الربط أو تطور المكتبة ، لذلك لا يمكن نشره على مستخدم iOS 12+ دون تغيير هدف نشر MIN.

إضافة التعليق التوضيحي المتاح

أضف كل رمز 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 هنا لأن التاريخ الذي نستخدمه Cocoapods لدمج LIBS في العرض التوضيحي ، لكننا الآن نستخدم SPM.

نظرًا لأن Swiftui تهدف إلى دعم جميع منصات Apple ، فإن العرض التجريبي الخاص بنا يقوم بذلك أيضًا ، قاعدة كود واحدة بما في ذلك:

• iOS (iPhone/iPad/Mac Catalyst)
• ماكوس
• tvos
• Watchos
• Visionos

نصائح تجريبية:

1. استخدم Switch (انقر بزر الماوس الأيمن على MacOS/اضغط على WatchOS) للتبديل بين WebImage و AnimatedImage .
2. استخدم Reload (انقر بزر الماوس الأيمن على MACOS/زر على WatchOS) لمسح ذاكرة التخزين المؤقت.
3. استخدم Swipe Left (زر القائمة على TVOS) لحذف عنوان URL صورة واحدة من القائمة.
4. قرصة الإيماءة (التاج الرقمي على Watchos ، زر التشغيل على TVOS) لتكبير صورة صفحة التفاصيل.
5. مسح ذاكرة التخزين المؤقت وانتقل إلى صفحة التفاصيل لرؤية التحميل التدريجي.

امتحان

SDWebImagesWiftui لديه اختبار الوحدة لزيادة جودة الكود. بالنسبة إلى Swiftui ، لا يوجد حل رسمي لاختبار الوحدة التي تقدمها Apple.

ومع ذلك ، نظرًا لأن Swiftui يعتمد على نظام التصميم المنسوب والمنسوب ، فهناك مشاريع مفتوحة المصدر توفر الحل:

• ViewInspector .image فحص قيمة سمة وقت التشغيل في View (مثل .frame نحن نستخدم هذا لاختبار AnimatedImage و WebImage . كما يسمح للتفتيش إلى UIVIEW/NSVIEW الأصلي.

لتشغيل الاختبار:

1. قم بتشغيل pod install على دليل الجذر لتثبيت التبعية.
2. افتح SDWebImageSwiftUI.xcworkspace ، انتظر swiftpm الانتهاء من تنزيل تبعية الاختبار.
3. اختر مخطط SDWebImageSwiftUITests وابدأ الاختبار.

قمنا بالفعل بإعداد خط أنابيب CI ، وسيقوم كل PR بتشغيل حالة الاختبار وتحميل تقرير الاختبار إلى Codecov.

لقطة شاشة

• IOS Demo

• Macos Demo

• TVOS DEMO

• Watchos Demo

ملاحظات إضافية

إلى جانب جميع الأشياء المذكورة أعلاه ، يمكن لهذا المشروع أيضًا ضمان الوظيفة التالية المتوفرة على Swift Platform لـ SDWebImage نفسها.

• توافق Swiftui
• تكامل مدير الحزمة السريع
• توافق رمز المصدر السريع و swifty

مما يعني أن هذا المشروع هو إحدى حالة الاستخدام الأساسية والاعتماد على مجرى النهر ، والتي دفعت sdwebimage نفسها في المستقبل التنمية في المستقبل.

مؤلف

Dreampiggy

شكرًا

• sdwebimage
• libwebp
• libavif
• Kingfisher
• Swiftuix
• إسبيرا
• Swiftui-Introspect
• ViewInspector
• Swiftuibackports

رخصة

Sdwebimageswiftui متاح تحت رخصة معهد ماساتشوستس للتكنولوجيا. انظر ملف الترخيص لمزيد من المعلومات.