kylefang/AsyncDisplayKit
1
0
Fork 0
mirror of https://github.com/HackPlan/AsyncDisplayKit.git synced 2026-04-11 08:46:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1597 from lappp9/gh-pages

Browse Source 
[AsyncDisplayKit.org] added network image node docs and edited multiplex
This commit is contained in:
appleguy
2016-04-26 23:31:02 -07:00
parent 540190ac3d ca044e977c
commit 8ade9b83ed
3 changed files with 199 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
_docs/installation.md
View File

@@ -2,31 +2,57 @@
title: Installation
layout: docs
permalink: /docs/installation.html
next: references.html
next: intelligent-preloading.html
---
###CocoaPods
### CocoaPods
AsyncDisplayKit is available on <a href="http://cocoapods.org">CocoaPods</a>. Add the following to your Podfile:
```objective-c
pod 'AsyncDisplayKit'
```
<div class = "highlight-group">
<span class="language-toggle"><a data-lang="ruby" class = "active">Ruby</a></span>
<div class = "code">
<pre lang="ruby" class="ruby">
pod 'AsyncDisplayKit'
</pre>
</div>
</div>
### Carthage
###Carthage
AsyncDisplayKit is also available through <a href="https://github.com/Carthage/Carthage">Carthage</a>. Add the following to your Cartfile:
```objective-c
<div class = "highlight-group">
<span class="language-toggle"><a data-lang="carthage" class = "active">Carthage</a></span>
<div class = "code">
<pre lang="carthage" class="carthage">
github "facebook/AsyncDisplayKit"
```
</pre>
</div>
</div>
Run ‘carthage update’ in Terminal and to fetch and build the AsyncDisplayKit library. This will create a folder named Carthage in your app’s root folder. In that folder there will be a ‘Build’ folder from where you have to drag the frameworks you want to use into the “Linked Frameworks and Libraries” section in Xcode.
###Static Library
### Static Library
AsyncDisplayKit can also be used as a regular static library
Copy the project to your codebase manually, adding `AsyncDisplayKit.xcodeproj` to your workspace. Add `libAsyncDisplayKit.a`, AssetsLibrary, and Photos to the "Link Binary With Libraries" build phase. Include `-lc++ -ObjC` in your project linker flags.
<ol>
<li>Copy the project to your codebase manually, adding `AsyncDisplayKit.xcodeproj` to your workspace.</li>
<li>In "Build Phases", add the AsyncDisplayKit Library to the list of "Target Dependencies".</li>
<li>In "Build Phases", add `libAsyncDisplayKit.a`, AssetsLibrary, and Photos to the "Link Binary With Libraries" list.</li>
<li>In "Build Settings", include `-lc++ -ObjC` in your project linker flags.</li>
</ol>
###Importing AsyncDisplayKit
Import the framework header, or create an <a href="https://developer.apple.com/library/ios/documentation/swift/conceptual/buildingcocoaapps/MixandMatch.html">Objective-C bridging header</a> if you're using **Swift**:
```objective-c
#import <AsyncDisplayKit/AsyncDisplayKit.h>
```
<div class = "highlight-group">
<span class="language-toggle"><a data-lang="objective-c" class = "active objcButton">Objective-C</a></span>
<div class = "code">
<pre lang="objc" class="objc">
#import &lt;AsyncDisplayKit/AsyncDisplayKit.h&gt;
</pre>
</div>
</div>

80
_docs/multiplex-image-node.md
View File

@@ -11,37 +11,78 @@ In the following example, you're using a multiplex image node in an ASCellNode s
Then, assign an array of keys to the property <code>imageIdentifiers</code>. This list should be in descending order of image quality and will be used by the node to determine what URL to call for each image it will try to load.
```
<div class = "highlight-group">
<span class="language-toggle"><a data-lang="swift" class="swiftButton">Swift</a><a data-lang="objective-c" class = "active objcButton">Objective-C</a></span>
<div class = "code">
<pre lang="objc" class="objcCode">
- (instancetype)initWithURLs:(NSDictionary *)urls
{
_imageUrls = urls; // something like @{@"thumb": "/smallImageUrl", @"medium": ...}
...
_imageURLs = urls; // something like @{@"thumb": "/smallImageUrl", @"medium": ...}
_multiplexImageNode = [[ASMultiplexImageNode alloc] initWithCache:nil
downloader:[ASBasicImageDownloader sharedImageDownloader]];
downloader:[ASBasicImageDownloader sharedImageDownloader]];
_multiplexImageNode.downloadsIntermediateImages = YES;
_multiplexImageNode.imageIdentifiers = @[ @"original", @"medium", @"thumb" ];
_multiplexImageNode.dataSource = self;
_multiplexImageNode.delegate = self;
…
_multiplexImageNode.delegate = self;
...
}
```
</pre>
<pre lang="swift" class = "swiftCode hidden">
init(urls: [String: NSURL]) {
imageURLs = urls
multiplexImageNode = ASMultiplexImageNode(cache: nil, downloader: ASBasicImageDownloader.sharedImageDownloader())
multiplexImageNode.downloadsIntermediateImages = true
multiplexImageNode.imageIdentifiers = ["original", "medium", "thumb" ]
multiplexImageNode.dataSource = self
multiplexImageNode.delegate = self
...
}
</pre>
</div>
</div>
Then, if you've set up a simple dictionary that holds the keys you provided earlier pointing to URLs of the various versions of your image, you can simply return the URL for the given key in:
```
<div class = "highlight-group">
<span class="language-toggle"><a data-lang="swift" class="swiftButton">Swift</a><a data-lang="objective-c" class = "active objcButton">Objective-C</a></span>
<div class = "code">
<pre lang="objc" class="objcCode">
#pragma mark Multiplex Image Node Datasource
- (NSURL *)multiplexImageNode:(ASMultiplexImageNode *)imageNode
URLForImageIdentifier:(id)imageIdentifier
{
return _imageUrls[imageIdentifier];
return _imageURLs[imageIdentifier];
}
```
</pre>
Then, in the case that you want to react to the fact that a new image arrived, you can use the following delegate callback.
<pre lang="swift" class = "swiftCode hidden">
func multiplexImageNode(imageNode: ASMultiplexImageNode, URLForImageIdentifier imageIdentifier: ASImageIdentifier) -> NSURL? {
return imageURLs[imageIdentifier]
}
</pre>
</div>
</div>
```
There are also delegate methods provided to update you on things such as the progress of an image's download, when it has finished displaying etc. They're all optional so feel free to use them as necessary.
For example, in the case that you want to react to the fact that a new image arrived, you can use the following delegate callback.
<div class = "highlight-group">
<span class="language-toggle"><a data-lang="swift" class="swiftButton">Swift</a><a data-lang="objective-c" class = "active objcButton">Objective-C</a></span>
<div class = "code">
<pre lang="objc" class="objcCode">
#pragma mark Multiplex Image Node Delegate
- (void)multiplexImageNode:(ASMultiplexImageNode *)imageNode
@@ -50,6 +91,19 @@ Then, in the case that you want to react to the fact that a new image arrived, y
fromImage:(UIImage *)previousImage
withIdentifier:(id)previousImageIdentifier;
{
// this is optional, in case you want to react to the fact that a new image came in
// this is optional, in case you want to react to the fact that a new image came in
}
```
</pre>
<pre lang="swift" class = "swiftCode hidden">
func multiplexImageNode(imageNode: ASMultiplexImageNode,
didUpdateImage image: UIImage?,
withIdentifier imageIdentifier: ASImageIdentifier?,
fromImage previousImage: UIImage?,
withIdentifier previousImageIdentifier: ASImageIdentifier?) {
// this is optional, in case you want to react to the fact that a new image came in
}
</pre>
</div>
</div>

94
_docs/network-image-node.md
View File

@@ -5,4 +5,96 @@ permalink: /docs/network-image-node.html
next: multiplex-image-node.html
---
<div>😑 This page is coming soon...</div>
ASNetworkImageNode can be used any time you need to display an image that is being hosted remotely. All you have to do is set the .URL property with the appropriate NSURL instance and the image will be asynchonously loaded and concurrently rendered for you.
<div class = "highlight-group">
<span class="language-toggle"><a data-lang="swift" class="swiftButton">Swift</a><a data-lang="objective-c" class = "active objcButton">Objective-C</a></span>
<div class = "code">
<pre lang="objc" class="objcCode">
ASNetworkImageNode *imageNode = [[ASNetworkImageNode alloc] init];
imageNode.URL = [NSURL URLWithString:@"https://someurl.com/image_uri"];
</pre>
<pre lang="swift" class = "swiftCode hidden">
let imageNode = ASNetworkImageNode()
imageNode.URL = NSURL(string: "https://someurl.com/image_uri")
</pre>
</div>
</div>
### Laying Out a Network Image Node
Since an ASNetworkImageNode has no intrinsic content size when it is created, it is necessary for you to explicitly specify how they should be laid out.
<h4><i>Option 1: .preferredFrameSize</i></h4>
If you have a standard size you want the image node's frame size to be you can use the preferredFrameSize property.
<div class = "highlight-group">
<span class="language-toggle"><a data-lang="swift" class="swiftButton">Swift</a><a data-lang="objective-c" class = "active objcButton">Objective-C</a></span>
<div class = "code">
<pre lang="objc" class="objcCode">
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constraint
{
imageNode.preferredFrameSize = CGSizeMake(100, 200);
...
return finalLayoutSpec;
}
</pre>
<pre lang="swift" class = "swiftCode hidden">
override func layoutSpecThatFits(constrainedSize: ASSizeRange) -> ASLayoutSpec {
imageNode.preferredFrameSize = CGSize(width: 100, height: 200)
...
return finalLayoutSpec
}
</pre>
</div>
</div>
<h4><i>Option 2: ASRatioLayoutSpec</i></h4>
This is also a perfect place to use ASRatioLayoutSpec. Instead of assigning a static size for the image, you can assign a ratio and the image will maintain that ratio when it has finished loading and is displayed.
<div class = "highlight-group">
<span class="language-toggle"><a data-lang="swift" class="swiftButton">Swift</a><a data-lang="objective-c" class = "active objcButton">Objective-C</a></span>
<div class = "code">
<pre lang="objc" class="objcCode">
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constraint
{
CGFloat ratio = 3.0/1.0;
ASRatioLayoutSpec *imageRatioSpec = [ASRatioLayoutSpec ratioLayoutSpecWithRatio:ratio child:self.imageNode];
...
return finalLayoutSpec;
}
</pre>
<pre lang="swift" class = "swiftCode hidden">
override func layoutSpecThatFits(constrainedSize: ASSizeRange) -> ASLayoutSpec {
let ratio: CGFloat = 3.0/1.0
let imageRatioSpec = ASRatioLayoutSpec(ratio:ratio, child:self.imageNode)
...
return finalLayoutSpec
}
</pre>
</div>
</div>
### Under the Hood
<div class = "note">If you choose not to include the PINRemoteImage and PINCache dependencies you will lose progressive jpeg support and be required to include your own custom cache that conforms to ASImageCacheProtocol.</div>
#### Progressive JPEG Support
Thanks to the inclusion of <a href = "https://github.com/pinterest/PINRemoteImage">PINRemoteImage</a>, network image nodes now offer full support for loading </a href = "#">progressive JPEGs</a>. This means that if your server provides them, your images will display quickly at a lower quality that will scale up as more data is loaded.
It's important to remember that this is using one image that is progressively loaded. If your server is constrained to using regular JPEGs, but provides you with multiple versions of increasing quality, you should check out <a href = "/docs/multiplex-image-node.html">ASMultiplexImageNode</a> instead.
#### Automatic Caching
ASNetworkImageNode now uses <a href = "https://github.com/pinterest/PINCache">PINCache</a> under the hood by default to cache network images automatically.