collection-view

9 minutes tutorial

Collection View

Build an API-backed collection view in minutes, right from Interface Builder!

Example: Marketplace app

API URL: https://api.abstractlayer.com/demo/marketplace/get_items.

Click here to check out the full JSON response

<pre><code>

[ { "image_url": "http://docs.abstractlayer.com/demo/collection-view/marketplace/images/dress.jpg", "name": "Black Dress", "price": "35", "id": "5925b5ac22f9a51d0ca5a3ce" }, { "image_url": "http://docs.abstractlayer.com/demo/collection-view/marketplace/images/mac.jpg", "timestamp": 1491639798, "name": "iMac 2017", "price": "750", "id": "5925b5ac58cff049f195e566" }, { "image_url": "http://docs.abstractlayer.com/demo/collection-view/marketplace/images/scarf.jpg", "timestamp": 1491633121, "name": "Colorful Scarf", "price": "10", "id": "5925b5ac71aef5f0f3febd4a" }, { "image_url": "http://docs.abstractlayer.com/demo/collection-view/marketplace/images/balance.jpg", "timestamp": 1491634194, "name": "New Balance", "price": "350", "id": "5925b5ac6af1272071a57d72" }, { "image_url": "http://docs.abstractlayer.com/demo/collection-view/marketplace/images/ps4.jpg", "timestamp": 1491634511, "name": "Playstation 4", "price": "215", "id": "5925b5acdfecdab484513b96" }, { "image_url": "http://docs.abstractlayer.com/demo/collection-view/marketplace/images/handbag.jpg", "timestamp": 1491642125, "name": "Red Hangbag", "price": "425", "id": "5925b5acec7ff952f35a65eb" }, { "image_url": "http://docs.abstractlayer.com/demo/collection-view/marketplace/images/bycicle.jpg", "timestamp": 1491633389, "name": "Used Bycicle", "price": "300", "id": "5925b5ac9b66bc12c486cdfb" }, { "image_url": "http://docs.abstractlayer.com/demo/collection-view/marketplace/images/phone.jpg", "timestamp": 1491641044, "name": "iPhone 7", "price": "350", "id": "5925b5acff14642da4571ef2" }, { "image_url": "http://docs.abstractlayer.com/demo/collection-view/marketplace/images/tv.jpg", "timestamp": 1491630862, "name": "Apple TV 4 Gen", "price": "70", "id": "5925b5ac42c8cdfb0c17664d" } ]

Integrate the framework

If you haven't already added the framework to your Xcode project, follow this tutorial.

Build the UI

• Open Main.storyboard and delete the default View Controller you see

• Drag an instance of UICollectionViewController

• From the menu bar choose Editor → Embed in → Navigation Controller

• Click on your navigation controller then check the box that says Is initial View Controller from the Attributes Inspector

• Click on your prototype cell, and set the cell identifier to cell in the Attributes Inspector

• Design the collection view's cell to match the design

  • Increase the cell size to (150x150)
  • UIImageView for the product image (size 150x150)
  • UILabel for the price label (Font size 17, semibold, white)

Magic (Auto data-binding)

It's time to bind data between the JSON document and the UI elements.

• Open the URL in a browser https://api.abstractlayer.com/demo/marketplace/get_items

• Copy the URL

• Go to your storyboard and click on your UICollectionView and change its class to ALCollectionView in the Attributes Inspector

• Navigate to your Attributes Inspector, and you'll find a couple new attributes

• Set the number of columns to 2

• Paste the URL you just copied in the new Url field

• Type in GET for HTTP Method (which is the default method)

Your collection view is now ready to process the API.

It's time to match the JSON keys with the UI elements to fill the data automatically.

• Click on your UIImageView and change its class to ALImageView in the Identity Inspector

• Type in image_url in the Json Key field so that Abstract Layer can automatically load the image using its URL value

• One more thing, give your image view a Corner Radius of 5 to give a more elegant look!

• Click on the price label and change its class to ALLabel in the Identity Inspector

Type in price in the Json Key field to automatically match the JSON value with the price label. Add $ as a prefix

Run the project, and there you go! MAGIC!

Handle any kind of error by checking the Error handling section

Hold on

This looks great so far, but we're sure you've got many questions about how far can Abstract Layer go.

Error Handling Handle all kind of errors when loading your collection view	Passing Data You have FULL access to parsed data, so passing it is very simple	Parameters Be it Header or Body, Static or Dynamic, it's all in Interface Builder
Pagination Enabling pagination takes less than a minute	Complex JSON Any form of JSON is supported, no matter how complex it is	Loader Enable loaders and pull-to-refresh with 2 clicks

The example below shows how you can fully customize the collection view example by modifying the parsed data before displaying it.

Convert label price from USD to EUR

Remember: ALCollectionView is a subclass of UICollectionView

Remember: You have FULL access to the data parsed by accessing the array property on your collection view

• Create a new class, call it CustomCollectionViewCell

• Set the collection view cell class to CustomCollectionViewCell

• Control-drag your price label to the class as a new outlet and call it priceLabel

• Don't forget to import AbstractLayer to the class's header

• Create a new class, call it CollectionViewController and subclass it form UICollectionViewController

• Set your collection view class in storyboard to CollectionViewController

• Replace the content of the class with the following:

Objective-C Swift

import UIKit
import AbstractLayer
class CollectionViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout {
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let collection = collectionView as! ALCollectionView
let cell = collection.cellForItem(at: indexPath) as! CustomCollectionViewCell // Get cell
let item = collection.array[indexPath.row] as! [String:Any] // Get item dictionary
var price = Float(item["price"] as! String) // Price in USD
price = price! * 0.85 // Convert to EUR
cell.priceLabel?.text = "€" + String(describing: price!) // Set new value
return cell

}
override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return collectionView.numberOfItems(inSection: section)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let collection = collectionView as! ALCollectionView
return collection.sizeForItem(at: indexPath)
}
}

#import "CollectionViewController.h"
#import <AbstractLayer/AbstractLayer.h>
@implementation CollectionViewController


(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(nonnull NSIndexPath *)indexPath {
ALCollectionView *collection = (ALCollectionView *)collectionView;
CustomCollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];
NSDictionary *item = (NSDictionary *)collection.array[indexPath.row];
CGFloat price = [item[@"price"] floatValue];
price = price * 0.85 // Convert to EUR
cell.priceLabel.text = [NSString stringWithFormat:@"€%.2f",price]; // Set new value

return cell;
}


(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return [collectionView numberOfItemsInSection:section];
}


(CGSize)collectionView:(UICollectionView *)collectionView layout:(nonnull UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(nonnull NSIndexPath *)indexPath {
return [(ALCollectionView *)collectionView sizeForItemAtIndexPath:indexPath];
}


@end

• Run the app

So is it really 100% customizable? Can I actually use Abstract Layer in production?

Abstract Layer is as customizable as anything built from scratch.

As you've seen in the example above, the framework is fully customizable since it's built on top of native Apple UIKit components like UITableView & UICollectionView.

To customize any aspect of Abstract Layer, simply:

• Subclass any of Abstract Layer classes to do your customizations
• Conform to the delegate and datasource protocols just as you would do with a regular UITableView & UICollectionView

Abstract Layer is not a prototyping tool, it's strictly a production-level framework. All of our customers rely on Abstract Layer in their live apps.

Where to go next?

Abstract Layer supports lots of features on ALCollectionView, so make sure to check them all out!

<tr>
<td class="row-text"><b><a href="/#/menu/collection-view/xib" target="_blank">XIB</a></b><p>Reuse cells by designing them in their own XIB</p><br/></td> 
<td class="row-text"><b><a href="/#/menu/collection-view/authentication" target="_blank">Authentication</a></b><p>JWT is handled automatically once you provide your keys</p><br/></td> 
<td class="row-text"><b><a href="/#/menu/collection-view/custom-cases" target="_blank">And More...</a></b><p>Check out the dedicated section for custom cases</p><br/></td> 

Error Handling Handle all kind of errors when loading your collection view	Passing Data You have FULL access to parsed data, so passing it is very simple	Parameters Be it Header or Body, Static or Dynamic, it's all in Interface Builder
Pagination Enabling pagination takes less than a minute	Complex JSON Any form of JSON is supported, no matter how complex it is	Loader Enable loaders and pull-to-refresh with 2 clicks

Download the final project and try it out!