Merge pull request #82 from SDWebImage/update_example

Update the Example with tvOS, now it supports zooming and edit mode to delete image cells

Author: dreampiggy

Example/SDWebImageSwiftUIDemo-tvOS/AppDelegate.swift

@@ -17,18 +17,29 @@ import SDWebImagePDFCoder
 class AppDelegate: UIResponder, UIApplicationDelegate {
 
     var window: UIWindow?
-
+    var settings = UserSettings()
 
     func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
 
         // Create the SwiftUI view that provides the window contents.
-        let contentView = ContentView()
+        let contentView = ContentView().environmentObject(settings)
 
         // Use a UIHostingController as window root view controller.
         let window = UIWindow(frame: UIScreen.main.bounds)
-        window.rootViewController = UIHostingController(rootView: contentView)
+        let hostingController = UIHostingController(rootView: contentView)
+        window.rootViewController = hostingController
         self.window = window
         window.makeKeyAndVisible()
+        
+        // Hack here because of SwiftUI's bug, when using `NavigationLink`, the focusable no longer works, so the `onExitCommand` does not get called
+        let menuGesture = UITapGestureRecognizer(target: self, action: #selector(handleMenuGesture(_:)))
+        menuGesture.allowedPressTypes = [NSNumber(value: UIPress.PressType.menu.rawValue)]
+        hostingController.view.addGestureRecognizer(menuGesture)
+        
+        let playPauseGesture = UITapGestureRecognizer(target: self, action: #selector(handlePlayPauseGesture(_:)))
+        playPauseGesture.allowedPressTypes = [NSNumber(value: UIPress.PressType.playPause.rawValue)]
+        hostingController.view.addGestureRecognizer(playPauseGesture)
+        
         // Add WebP/SVG/PDF support
         SDImageCodersManager.shared.addCoder(SDImageWebPCoder.shared)
         SDImageCodersManager.shared.addCoder(SDImageSVGCoder.shared)
@@ -50,6 +61,23 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
 
         return true
     }
+    
+    @objc func handleMenuGesture(_ gesture: UITapGestureRecognizer) {
+        switch settings.editMode {
+        case .inactive:
+            settings.editMode = .active
+        case .active:
+            settings.editMode = .inactive
+        case .transient:
+            break
+        @unknown default:
+            break
+        }
+    }
+    
+    @objc func handlePlayPauseGesture(_ gesture: UITapGestureRecognizer) {
+        settings.zoomed.toggle()
+    }
 
     func applicationWillResignActive(_ application: UIApplication) {
         // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.

Example/SDWebImageSwiftUIDemo/ContentView.swift

@@ -10,6 +10,12 @@ import SwiftUI
 import SDWebImage
 import SDWebImageSwiftUI
 
+class UserSettings: ObservableObject {
+    // Some environment configuration
+    @Published var editMode: EditMode = .inactive
+    @Published var zoomed: Bool = false
+}
+
 #if os(watchOS)
 // watchOS does not provide built-in indicator, use Espera's custom indicator
 extension Indicator where T == LoadingFlowerView {
@@ -53,11 +59,27 @@ struct ContentView: View {
     "https://raw.githubusercontent.com/icons8/flat-color-icons/master/pdf/smartphone_tablet.pdf"
     ]
     @State var animated: Bool = true // You can change between WebImage/AnimatedImage
+    @EnvironmentObject var settings: UserSettings
 
     var body: some View {
-        #if os(iOS) || os(tvOS)
+        #if os(iOS)
+        return NavigationView {
+            contentView()
+            .navigationBarTitle(animated ? "AnimatedImage" : "WebImage")
+            .navigationBarItems(leading:
+                Button(action: { self.reloadCache() }) {
+                    Text("Reload")
+                }, trailing:
+                Button(action: { self.switchView() }) {
+                    Text("Switch")
+                }
+            )
+        }
+        #endif
+        #if os(tvOS)
         return NavigationView {
             contentView()
+            .environment(\EnvironmentValues.editMode, self.$settings.editMode)
             .navigationBarTitle(animated ? "AnimatedImage" : "WebImage")
             .navigationBarItems(leading:
                 Button(action: { self.reloadCache() }) {

Example/SDWebImageSwiftUIDemo/DetailView.swift

@@ -16,6 +16,7 @@ struct DetailView: View {
     @State var lastScaleValue: CGFloat = 1.0
     @State var scale: CGFloat = 1.0
     @Environment(\.presentationMode) var presentationMode
+    @EnvironmentObject var settings: UserSettings
 
     var body: some View {
         VStack {
@@ -60,14 +61,9 @@ struct DetailView: View {
         #if os(tvOS)
         return contentView()
             .scaleEffect(self.scale)
-            .focusable(true)
-            .onPlayPauseCommand {
-                switch self.scale {
-                case 1:
-                    self.scale = 2
-                case 2:
-                    self.scale = 1
-                default: break
+            .onReceive(self.settings.$zoomed) { zoomed in
+                withAnimation {
+                    self.scale = zoomed ? 2 : 1
                 }
             }
         #endif

README.md

@@ -368,7 +368,7 @@ Demo Tips:
 
 1. Use `Switch` (right-click on macOS/force press on watchOS) to switch between `WebImage` and `AnimatedImage`.
 2. Use `Reload` (right-click on macOS/force press on watchOS) to clear cache.
-3. Use `Swipe` to delete one image item.
+3. Use `Swipe To Delete` (menu button on tvOS) to delete one image url from list.
 4. Pinch gesture (Digital Crown on watchOS, play button on tvOS) to zoom-in detail page image.
 5. Clear cache and go to detail page to see progressive loading.