Skip to content

Commit

Permalink
Merge pull request #275 from SDWebImage/api/asyncimage
Browse files Browse the repository at this point in the history 
Update the WebImage API to match SwiftUI.AsyncImage
  • Loading branch information
@dreampiggy
dreampiggy authored Oct 21, 2023
2 parents 5c6bfdf + e96aaa9 commit eb0eafa
Show file tree
Hide file tree
Showing 7 changed files with 164 additions and 194 deletions.
33 changes: 13 additions & 20 deletions Example/SDWebImageSwiftUIDemo/ContentView.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,36 +96,28 @@ struct ContentView: View {
HStack {
if self.animated {
#if os(macOS) || os(iOS) || os(tvOS) || os(visionOS)
AnimatedImage(url: URL(string:url), isAnimating: .constant(true))
AnimatedImage(url: URL(string:url))
.onViewUpdate { view, context in
#if os(macOS)
view.toolTip = url
#endif
}
.indicator(SDWebImageActivityIndicator.medium)
/**
.placeholder(UIImage(systemName: "photo"))
*/
.indicator(.activity)
.transition(.fade)
.resizable()
.scaledToFit()
.frame(width: CGFloat(100), height: CGFloat(100), alignment: .center)
#else
WebImage(url: URL(string:url), isAnimating: self.$animated)
WebImage(url: URL(string:url))
.resizable()
.indicator(.activity)
.transition(.fade(duration: 0.5))
.scaledToFit()
.frame(width: CGFloat(100), height: CGFloat(100), alignment: .center)
#endif
} else {
WebImage(url: URL(string:url), isAnimating: .constant(true))
WebImage(url: URL(string:url))
.resizable()
/**
.placeholder {
Image(systemName: "photo")
}
*/
.indicator(.activity)
.transition(.fade(duration: 0.5))
.scaledToFit()
Expand Down Expand Up @@ -199,15 +191,16 @@ struct ContentView: View {
}
#endif
#if os(watchOS)
return contentView()
.contextMenu {
Button(action: { self.reloadCache() }) {
Text("Reload")
}
Button(action: { self.switchView() }) {
Text("Switch")
return NavigationView {
contentView()
.navigationTitle("WebImage")
.toolbar {
Button(action: { self.reloadCache() }) {
Text("Reload")
}
}
}

}
#endif
}

Expand Down
35 changes: 20 additions & 15 deletions Example/SDWebImageSwiftUIDemo/DetailView.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,8 @@ struct DetailView: View {
#endif
#if os(macOS) || os(watchOS)
zoomView()
.contextMenu {
Button(isAnimating ? "Stop" : "Start") {
self.isAnimating.toggle()
}
.onTapGesture {
self.isAnimating.toggle()
}
#endif
}
Expand Down Expand Up @@ -95,24 +93,31 @@ struct DetailView: View {
HStack {
if animated {
#if os(macOS) || os(iOS) || os(tvOS) || os(visionOS)
AnimatedImage(url: URL(string:url), options: [.progressiveLoad, .delayPlaceholder], isAnimating: $isAnimating)
AnimatedImage(url: URL(string:url), options: [.progressiveLoad, .delayPlaceholder], isAnimating: $isAnimating, placeholderImage: .wifiExclamationmark)
.indicator(.progress)
.resizable()
.placeholder(.wifiExclamationmark)
.indicator(SDWebImageProgressIndicator.default)
.scaledToFit()
#else
WebImage(url: URL(string:url), options: [.progressiveLoad, .delayPlaceholder], isAnimating: $isAnimating)
.resizable()
.placeholder(.wifiExclamationmark)
WebImage(url: URL(string:url), options: [.progressiveLoad, .delayPlaceholder], isAnimating: $isAnimating) { image in
image.resizable()
.scaledToFit()
} placeholder: {
Image.wifiExclamationmark
.resizable()
.scaledToFit()
}
.indicator(.progress)
.scaledToFit()
#endif
} else {
WebImage(url: URL(string:url), options: [.progressiveLoad, .delayPlaceholder], isAnimating: $isAnimating)
.resizable()
.placeholder(.wifiExclamationmark)
WebImage(url: URL(string:url), options: [.progressiveLoad, .delayPlaceholder], isAnimating: $isAnimating) { image in
image.resizable()
.scaledToFit()
} placeholder: {
Image.wifiExclamationmark
.resizable()
.scaledToFit()
}
.indicator(.progress(style: .circular))
.scaledToFit()
}
}
}
Expand Down
30 changes: 14 additions & 16 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,18 +128,16 @@ github "SDWebImage/SDWebImageSwiftUI"

```swift
var body: some View {
WebImage(url: URL(string: "https://nokiatech.github.io/heif/content/images/ski_jump_1440x960.heic"))
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
}
.resizable() // Resizable like SwiftUI.Image, you must use this modifier or the view will use the image bitmap size
.placeholder(Image(systemName: "photo")) // Placeholder Image
// Supports ViewBuilder as well
.placeholder {
Rectangle().foregroundColor(.gray)
}
.indicator(.activity) // Activity Indicator
.transition(.fade(duration: 0.5)) // Fade Transition with duration
.scaledToFit()
Expand Down Expand Up @@ -194,21 +192,21 @@ WebImage(url: url)
```swift
var body: some View {
Group {
AnimatedImage(url: URL(string: "https://raw.githubusercontent.com/liyong03/YLGIFImage/master/YLGIFImageDemo/YLGIFImageDemo/joy.gif"))
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
.placeholder(UIImage(systemName: "photo")) // Placeholder Image
// Supports ViewBuilder as well
.placeholder {
Circle().foregroundColor(.gray)
}
.indicator(SDWebImageActivityIndicator.medium) // Activity Indicator
.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
Expand Down Expand Up @@ -624,8 +622,8 @@ Since SwiftUI is aimed to support all Apple platforms, our demo does this as wel

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.
1. Use `Switch` (right-click on macOS/tap on watchOS) to switch between `WebImage` and `AnimatedImage`.
2. Use `Reload` (right-click on macOS/button on watchOS) to clear cache.
3. Use `Swipe Left` (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.
Expand Down
109 changes: 39 additions & 70 deletions SDWebImageSwiftUI/Classes/AnimatedImage.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,12 @@ final class AnimatedImageModel : ObservableObject {
@Published var url: URL?
@Published var webOptions: SDWebImageOptions = []
@Published var webContext: [SDWebImageContextOption : Any]? = nil
@Published var placeholderImage: PlatformImage?
@Published var placeholderView: PlatformView? {
didSet {
oldValue?.removeFromSuperview()
}
}
/// Name image
@Published var name: String?
@Published var bundle: Bundle?
Expand Down Expand Up @@ -90,12 +96,6 @@ final class AnimatedImageConfiguration: ObservableObject {
// These configurations only useful for web image loading
var indicator: SDWebImageIndicator?
var transition: SDWebImageTransition?
var placeholder: PlatformImage?
var placeholderView: PlatformView? {
didSet {
oldValue?.removeFromSuperview()
}
}
}

/// A Image View type to load image from url, data or bundle. Supports animated and static image format.
Expand All @@ -115,13 +115,19 @@ public struct AnimatedImage : PlatformViewRepresentable {
/// True to start animation, false to stop animation.
@Binding public var isAnimating: Bool

/// Create an animated image with url, placeholder, custom options and context.
/// Create an animated image with url, placeholder, custom options and context, including animation control binding.
/// - Parameter url: The image url
/// - Parameter placeholder: The placeholder image to show during loading
/// - Parameter options: The options to use when downloading the image. See `SDWebImageOptions` for the possible values.
/// - Parameter context: A context contains different options to perform specify changes or processes, see `SDWebImageContextOption`. This hold the extra objects which `options` enum can not hold.
public init(url: URL?, options: SDWebImageOptions = [], context: [SDWebImageContextOption : Any]? = nil) {
self.init(url: url, options: options, context: context, isAnimating: .constant(true))
/// - Parameter isAnimating: The binding for animation control
public init(url: URL?, options: SDWebImageOptions = [], context: [SDWebImageContextOption : Any]? = nil, isAnimating: Binding<Bool> = .constant(true), placeholderImage: PlatformImage? = nil) {
let imageModel = AnimatedImageModel()
imageModel.url = url
imageModel.webOptions = options
imageModel.webContext = context
imageModel.placeholderImage = placeholderImage
self.init(imageModel: imageModel, isAnimating: isAnimating)
}

/// Create an animated image with url, placeholder, custom options and context, including animation control binding.
Expand All @@ -130,46 +136,37 @@ public struct AnimatedImage : PlatformViewRepresentable {
/// - Parameter options: The options to use when downloading the image. See `SDWebImageOptions` for the possible values.
/// - Parameter context: A context contains different options to perform specify changes or processes, see `SDWebImageContextOption`. This hold the extra objects which `options` enum can not hold.
/// - Parameter isAnimating: The binding for animation control
public init(url: URL?, options: SDWebImageOptions = [], context: [SDWebImageContextOption : Any]? = nil, isAnimating: Binding<Bool>) {
public init<T>(url: URL?, options: SDWebImageOptions = [], context: [SDWebImageContextOption : Any]? = nil, isAnimating: Binding<Bool> = .constant(true), @ViewBuilder placeholder: @escaping () -> T) where T : View {
let imageModel = AnimatedImageModel()
imageModel.url = url
imageModel.webOptions = options
imageModel.webContext = context
#if os(macOS)
let hostingView = NSHostingView(rootView: placeholder())
#else
let hostingView = _UIHostingView(rootView: placeholder())
#endif
imageModel.placeholderView = hostingView
self.init(imageModel: imageModel, isAnimating: isAnimating)
}

/// Create an animated image with name and bundle.
/// - Note: Asset Catalog is not supported.
/// - Parameter name: The image name
/// - Parameter bundle: The bundle contains image
public init(name: String, bundle: Bundle? = nil) {
self.init(name: name, bundle: bundle, isAnimating: .constant(true))
}

/// Create an animated image with name and bundle, including animation control binding.
/// - Note: Asset Catalog is not supported.
/// - Parameter name: The image name
/// - Parameter bundle: The bundle contains image
/// - Parameter isAnimating: The binding for animation control
public init(name: String, bundle: Bundle? = nil, isAnimating: Binding<Bool>) {
public init(name: String, bundle: Bundle? = nil, isAnimating: Binding<Bool> = .constant(true)) {
let imageModel = AnimatedImageModel()
imageModel.name = name
imageModel.bundle = bundle
self.init(imageModel: imageModel, isAnimating: isAnimating)
}

/// Create an animated image with data and scale.
/// - Parameter data: The image data
/// - Parameter scale: The scale factor
public init(data: Data, scale: CGFloat = 1) {
self.init(data: data, scale: scale, isAnimating: .constant(true))
}

/// Create an animated image with data and scale, including animation control binding.
/// - Parameter data: The image data
/// - Parameter scale: The scale factor
/// - Parameter isAnimating: The binding for animation control
public init(data: Data, scale: CGFloat = 1, isAnimating: Binding<Bool>) {
public init(data: Data, scale: CGFloat = 1, isAnimating: Binding<Bool> = .constant(true)) {
let imageModel = AnimatedImageModel()
imageModel.data = data
imageModel.scale = scale
Expand Down Expand Up @@ -222,7 +219,7 @@ public struct AnimatedImage : PlatformViewRepresentable {
func setupIndicator(_ view: AnimatedImageViewWrapper, context: Context) {
view.wrapped.sd_imageIndicator = imageConfiguration.indicator
view.wrapped.sd_imageTransition = imageConfiguration.transition
if let placeholderView = imageConfiguration.placeholderView {
if let placeholderView = imageModel.placeholderView {
placeholderView.removeFromSuperview()
placeholderView.isHidden = true
// Placeholder View should below the Indicator View
Expand All @@ -243,13 +240,13 @@ public struct AnimatedImage : PlatformViewRepresentable {
context.coordinator.imageLoading.isLoading = true
let webOptions = imageModel.webOptions
if webOptions.contains(.delayPlaceholder) {
self.imageConfiguration.placeholderView?.isHidden = true
self.imageModel.placeholderView?.isHidden = true
} else {
self.imageConfiguration.placeholderView?.isHidden = false
self.imageModel.placeholderView?.isHidden = false
}
var webContext = imageModel.webContext ?? [:]
webContext[.animatedImageClass] = SDAnimatedImage.self
view.wrapped.sd_internalSetImage(with: imageModel.url, placeholderImage: imageConfiguration.placeholder, options: webOptions, context: webContext, setImageBlock: nil, progress: { (receivedSize, expectedSize, _) in
view.wrapped.sd_internalSetImage(with: imageModel.url, placeholderImage: imageModel.placeholderImage, options: webOptions, context: webContext, setImageBlock: nil, progress: { (receivedSize, expectedSize, _) in
let progress: Double
if (expectedSize > 0) {
progress = Double(receivedSize) / Double(expectedSize)
Expand All @@ -265,10 +262,10 @@ public struct AnimatedImage : PlatformViewRepresentable {
context.coordinator.imageLoading.isLoading = false
context.coordinator.imageLoading.progress = 1
if let image = image {
self.imageConfiguration.placeholderView?.isHidden = true
self.imageModel.placeholderView?.isHidden = true
self.imageHandler.successBlock?(image, data, cacheType)
} else {
self.imageConfiguration.placeholderView?.isHidden = false
self.imageModel.placeholderView?.isHidden = false
self.imageHandler.failureBlock?(error ?? NSError())
}
}
Expand Down Expand Up @@ -794,30 +791,19 @@ extension AnimatedImage {
}
}

// Convenient indicator dot syntax
extension SDWebImageIndicator where Self == SDWebImageActivityIndicator {
public static var activity: Self { Self() }
}

extension SDWebImageIndicator where Self == SDWebImageProgressIndicator {
public static var progress: Self { Self() }
}

// Web Image convenience, based on UIKit/AppKit API
@available(iOS 14.0, OSX 11.0, tvOS 14.0, watchOS 7.0, *)
extension AnimatedImage {

/// Associate a placeholder when loading image with url
/// - Parameter content: A view that describes the placeholder.
/// - note: The differences between this and placeholder image, it's that placeholder image replace the image for image view, but this modify the View Hierarchy to overlay the placeholder hosting view
public func placeholder<T>(@ViewBuilder content: () -> T) -> AnimatedImage where T : View {
#if os(macOS)
let hostingView = NSHostingView(rootView: content())
#else
let hostingView = _UIHostingView(rootView: content())
#endif
self.imageConfiguration.placeholderView = hostingView
return self
}

/// Associate a placeholder image when loading image with url
/// - Parameter content: A view that describes the placeholder.
public func placeholder(_ image: PlatformImage?) -> AnimatedImage {
self.imageConfiguration.placeholder = image
return self
}

/// Associate a indicator when loading image with url
/// - Note: If you do not need indicator, specify nil. Defaults to nil
/// - Parameter indicator: indicator, see more in `SDWebImageIndicator`
Expand All @@ -835,23 +821,6 @@ extension AnimatedImage {
}
}

// Indicator
@available(iOS 14.0, OSX 11.0, tvOS 14.0, watchOS 7.0, *)
extension AnimatedImage {

/// Associate a indicator when loading image with url
/// - Parameter indicator: The indicator type, see `Indicator`
public func indicator<T>(_ indicator: Indicator<T>) -> some View where T : View {
return self.modifier(IndicatorViewModifier(status: indicatorStatus, indicator: indicator))
}

/// Associate a indicator when loading image with url, convenient method with block
/// - Parameter content: A view that describes the indicator.
public func indicator<T>(@ViewBuilder content: @escaping (_ isAnimating: Binding<Bool>, _ progress: Binding<Double>) -> T) -> some View where T : View {
return indicator(Indicator(content: content))
}
}

#if DEBUG
@available(iOS 14.0, OSX 11.0, tvOS 14.0, watchOS 7.0, *)
struct AnimatedImage_Previews : PreviewProvider {
Expand Down
Loading

0 comments on commit eb0eafa

Please sign in to comment.