diff --git a/_docs/installation.md b/_docs/installation.md index a6664beb..56943101 100644 --- a/_docs/installation.md +++ b/_docs/installation.md @@ -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 CocoaPods. Add the following to your Podfile: - ```objective-c -pod 'AsyncDisplayKit' -``` +
+Ruby + +
+ 
+pod 'AsyncDisplayKit'
+
+
+
+ + +### Carthage -###Carthage AsyncDisplayKit is also available through Carthage. Add the following to your Cartfile: - ```objective-c +
+Carthage +
+ 
 github "facebook/AsyncDisplayKit"
-```
+
+
+
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. +
    +
  1. Copy the project to your codebase manually, adding `AsyncDisplayKit.xcodeproj` to your workspace.
    2. +
  2. In "Build Phases", add the AsyncDisplayKit Library to the list of "Target Dependencies".
    3. +
  3. In "Build Phases", add `libAsyncDisplayKit.a`, AssetsLibrary, and Photos to the "Link Binary With Libraries" list.
    4. +
  4. In "Build Settings", include `-lc++ -ObjC` in your project linker flags.
    5. +
###Importing AsyncDisplayKit Import the framework header, or create an Objective-C bridging header if you're using **Swift**: - ```objective-c -#import -``` +
+Objective-C +
+ 
+#import <AsyncDisplayKit/AsyncDisplayKit.h>
+
+
+
diff --git a/_docs/multiplex-image-node.md b/_docs/multiplex-image-node.md index dbae791d..cd403b0d 100755 --- a/_docs/multiplex-image-node.md +++ b/_docs/multiplex-image-node.md @@ -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 imageIdentifiers. 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. -``` +
+SwiftObjective-C + +
+ 
 - (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;
+    ...
 }
-```
+
+ + +
+
+ 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: -``` +
+SwiftObjective-C + +
+ 
 #pragma mark Multiplex Image Node Datasource
 
 - (NSURL *)multiplexImageNode:(ASMultiplexImageNode *)imageNode 
         URLForImageIdentifier:(id)imageIdentifier
 {
-    return _imageUrls[imageIdentifier];
+    return _imageURLs[imageIdentifier];
 }
-```
+
-Then, in the case that you want to react to the fact that a new image arrived, you can use the following delegate callback. + +
+
-``` +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. + +
+SwiftObjective-C + +
+ 
 #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
 }
-```
\ No newline at end of file
+
+ + +
+
+ diff --git a/_docs/network-image-node.md b/_docs/network-image-node.md index 89b0382f..afbc4624 100755 --- a/_docs/network-image-node.md +++ b/_docs/network-image-node.md @@ -5,4 +5,96 @@ permalink: /docs/network-image-node.html next: multiplex-image-node.html --- -
😑 This page is coming soon...
\ No newline at end of file +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. + +
+SwiftObjective-C + +
+ 
+ASNetworkImageNode *imageNode = [[ASNetworkImageNode alloc] init];
+imageNode.URL = [NSURL URLWithString:@"https://someurl.com/image_uri"];
+
+ + +
+
+ +### 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. + +

Option 1: .preferredFrameSize

+ +If you have a standard size you want the image node's frame size to be you can use the preferredFrameSize property. + +
+SwiftObjective-C + +
+
+- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constraint
+{
+	imageNode.preferredFrameSize = CGSizeMake(100, 200);
+	...
+	return finalLayoutSpec;
+}
+
+ + +
+
+ +

Option 2: ASRatioLayoutSpec

+ +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. + +
+SwiftObjective-C + +
+
+- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constraint
+{
+    CGFloat ratio = 3.0/1.0;
+    ASRatioLayoutSpec *imageRatioSpec = [ASRatioLayoutSpec ratioLayoutSpecWithRatio:ratio child:self.imageNode];
+	...
+	return finalLayoutSpec;
+}
+
+ + +
+
+ + +### Under the Hood + +
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.
+ +#### Progressive JPEG Support + +Thanks to the inclusion of PINRemoteImage, network image nodes now offer full support for loading progressive JPEGs. 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 ASMultiplexImageNode instead. + +#### Automatic Caching + +ASNetworkImageNode now uses PINCache under the hood by default to cache network images automatically. +