-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e3df255
commit 8cd992e
Showing
18 changed files
with
536 additions
and
65 deletions.
There are no files selected for viewing
57 changes: 57 additions & 0 deletions
57
...age.playground/Pages/Creating_custom_network_image_styles.xcplaygroundpage/Contents.swift
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
//: [Previous](@previous) | ||
|
||
import PlaygroundSupport | ||
import SwiftUI | ||
|
||
import NetworkImage | ||
|
||
/*: | ||
To add a custom appearance, create a type that conforms to the `NetworkImageStyle` protocol. You can customize a network image's appearance in all of its different states: loading, displaying an image or failed. | ||
*/ | ||
|
||
struct RoundedImageStyle: NetworkImageStyle { | ||
var width: CGFloat? | ||
var height: CGFloat? | ||
|
||
func makeBody(state: NetworkImageState) -> some View { | ||
ZStack { | ||
Color(.secondarySystemBackground) | ||
|
||
switch state { | ||
case .loading: | ||
EmptyView() | ||
case let .image(image, _): | ||
image | ||
.resizable() | ||
.aspectRatio(contentMode: .fill) | ||
case .failed: | ||
Image(systemName: "photo") | ||
.foregroundColor(Color(.systemFill)) | ||
} | ||
} | ||
.frame(width: width, height: height) | ||
.clipShape(RoundedRectangle(cornerRadius: 5)) | ||
} | ||
} | ||
|
||
/*: | ||
Then set the custom style for all network images within a view, using the `networkImageStyle(_:)` modifier: | ||
*/ | ||
|
||
struct ContentView: View { | ||
var body: some View { | ||
HStack { | ||
NetworkImage(url: URL(string: "https://picsum.photos/id/1025/300/200")) | ||
NetworkImage(url: URL(string: "https://picsum.photos/id/237/300/200")) | ||
} | ||
.networkImageStyle( | ||
RoundedImageStyle(width: 200, height: 200) | ||
) | ||
} | ||
} | ||
|
||
//: [Next](@next) | ||
|
||
PlaygroundPage.current.setLiveView( | ||
ContentView().frame(width: 500, height: 500) | ||
) |
33 changes: 33 additions & 0 deletions
33
.../NetworkImage.playground/Pages/Customizing_network_images.xcplaygroundpage/Contents.swift
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
//: [Previous](@previous) | ||
|
||
import PlaygroundSupport | ||
import SwiftUI | ||
|
||
import NetworkImage | ||
|
||
/*: | ||
You can customize a network image's appearance by using a network image style. The default image style is an instance of `ResizableNetworkImageStyle` configured to `fill` the available space. To set a specific style for all network images within a view, you can use the `networkImageStyle(_:)` modifier. | ||
*/ | ||
|
||
struct ContentView: View { | ||
var body: some View { | ||
HStack { | ||
NetworkImage(url: URL(string: "https://picsum.photos/id/1025/300/200")) | ||
.frame(width: 200, height: 200) | ||
NetworkImage(url: URL(string: "https://picsum.photos/id/237/300/200")) | ||
.frame(width: 200, height: 200) | ||
} | ||
.networkImageStyle( | ||
ResizableNetworkImageStyle( | ||
backgroundColor: .yellow, | ||
contentMode: .fit | ||
) | ||
) | ||
} | ||
} | ||
|
||
//: [Next](@next) | ||
|
||
PlaygroundPage.current.setLiveView( | ||
ContentView().frame(width: 500, height: 500) | ||
) |
26 changes: 26 additions & 0 deletions
26
...s/NetworkImage.playground/Pages/Displaying_network_images.xcplaygroundpage/Contents.swift
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
//: [Previous](@previous) | ||
|
||
import PlaygroundSupport | ||
import SwiftUI | ||
|
||
import NetworkImage | ||
|
||
/*: | ||
You can use a `NetworkImage` view to display an image from a given URL. The download happens asynchronously, and the resulting image is cached both in disk and memory. | ||
*/ | ||
|
||
struct ContentView: View { | ||
var body: some View { | ||
NetworkImage(url: URL(string: "https://picsum.photos/id/237/300/200")) | ||
.frame(width: 300, height: 200) | ||
} | ||
} | ||
|
||
/*: | ||
By default, remote images are resizable and fill the available space while maintaining the aspect ratio. | ||
*/ | ||
//: [Next](@next) | ||
|
||
PlaygroundPage.current.setLiveView( | ||
ContentView().frame(width: 500, height: 500) | ||
) |
36 changes: 36 additions & 0 deletions
36
...orkImage.playground/Pages/Displaying_network_images_UIKit.xcplaygroundpage/Contents.swift
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
//: [Previous](@previous) | ||
|
||
import PlaygroundSupport | ||
import UIKit | ||
|
||
import NetworkImage | ||
|
||
/*: | ||
The simplest way to display remote images in UIKit is by using `NetworkImageView`. You need to provide the URL where the image is located and optionally configure a placeholder image that will be displayed if the download fails or the URL is `nil`. When there is no cached image for the given URL, and the download takes more than a specific time, the view performs a cross-fade transition between the placeholder and the result. | ||
*/ | ||
|
||
class MyViewController: UIViewController { | ||
override func loadView() { | ||
let view = UIView() | ||
view.backgroundColor = .systemBackground | ||
|
||
let imageView = NetworkImageView() | ||
imageView.url = URL(string: "https://picsum.photos/id/237/300/200") | ||
|
||
imageView.translatesAutoresizingMaskIntoConstraints = false | ||
view.addSubview(imageView) | ||
|
||
NSLayoutConstraint.activate([ | ||
imageView.widthAnchor.constraint(equalToConstant: 300), | ||
imageView.heightAnchor.constraint(equalToConstant: 200), | ||
imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor), | ||
imageView.centerYAnchor.constraint(equalTo: view.centerYAnchor), | ||
]) | ||
|
||
self.view = view | ||
} | ||
} | ||
|
||
//: [Next](@next) | ||
|
||
PlaygroundPage.current.liveView = MyViewController() |
10 changes: 10 additions & 0 deletions
10
Playgrounds/NetworkImage.playground/Pages/Table_of_contents.xcplaygroundpage/Contents.swift
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
/*: | ||
# NetworkImage | ||
NetworkImage is a Swift µpackage that provides image downloading, caching, and displaying for your SwiftUI apps. It leverages the foundation URLCache, providing persistent and in-memory caches. | ||
1. [Displaying network images](Displaying_network_images) | ||
1. [Customizing network images](Customizing_network_images) | ||
1. [Creating custom network image styles](Creating_custom_network_image_styles) | ||
1. [Displaying network images in UIKit](Displaying_network_images_UIKit) | ||
1. [Using `ImageDownloader`](Using_Imagedownloader) | ||
*/ |
58 changes: 58 additions & 0 deletions
58
...ounds/NetworkImage.playground/Pages/Using_ImageDownloader.xcplaygroundpage/Contents.swift
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
//: [Previous](@previous) | ||
|
||
import Combine | ||
import PlaygroundSupport | ||
import UIKit | ||
|
||
import NetworkImage | ||
|
||
/*: | ||
If you need a more customized behavior, like applying image transformations or providing custom animations, you can use the shared `ImageDownloader` object directly. | ||
*/ | ||
|
||
class MyViewController: UIViewController { | ||
private lazy var imageView = UIImageView() | ||
private var cancellables: Set<AnyCancellable> = [] | ||
|
||
override func loadView() { | ||
let view = UIView() | ||
view.backgroundColor = .systemBackground | ||
|
||
imageView.translatesAutoresizingMaskIntoConstraints = false | ||
imageView.backgroundColor = .secondarySystemBackground | ||
view.addSubview(imageView) | ||
|
||
NSLayoutConstraint.activate([ | ||
imageView.widthAnchor.constraint(equalToConstant: 300), | ||
imageView.heightAnchor.constraint(equalToConstant: 200), | ||
imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor), | ||
imageView.centerYAnchor.constraint(equalTo: view.centerYAnchor), | ||
]) | ||
|
||
self.view = view | ||
} | ||
|
||
override func viewDidLoad() { | ||
super.viewDidLoad() | ||
|
||
ImageDownloader.shared.image(for: URL(string: "https://picsum.photos/id/237/300/200")!) | ||
.map { image in | ||
// tint the image with a yellow color | ||
UIGraphicsImageRenderer(size: image.size).image { _ in | ||
image.draw(at: .zero) | ||
UIColor.systemYellow.setFill() | ||
UIRectFillUsingBlendMode(CGRect(origin: .zero, size: image.size), .multiply) | ||
} | ||
} | ||
.replaceError(with: UIImage(systemName: "film")!) | ||
.receive(on: DispatchQueue.main) | ||
.sink(receiveValue: { [imageView] image in | ||
imageView.image = image | ||
}) | ||
.store(in: &cancellables) | ||
} | ||
} | ||
|
||
//: [Next](@next) | ||
|
||
PlaygroundPage.current.liveView = MyViewController() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> | ||
<playground version='6.0' target-platform='ios' display-mode='raw' buildActiveScheme='true'> | ||
<pages> | ||
<page name='Table_of_contents'/> | ||
<page name='Displaying_network_images'/> | ||
<page name='Customizing_network_images'/> | ||
<page name='Creating_custom_network_image_styles'/> | ||
<page name='Displaying_network_images_UIKit'/> | ||
<page name='Using_ImageDownloader'/> | ||
</pages> | ||
</playground> |
Oops, something went wrong.