About the Download

Ti.UICollectionView is an iOS Hyperloop wrapper of the native UICollectionView component. Ti.UICollectionView allows you to create Instagram-like grid views.



These instructions are being shipped with the module, so you can check later on your README file.

LoopModules – Ti.UICollectionView

This HyperLoop module allows you to use the native UICollectionView component. This is a simple module that wraps the UICollectionView example as seen on the Hyperloop Examples Project.  You can simply drop this module into your project and use it.

1 – Requirements

This project uses HyperLoop. We recommend you to read the basics of HyperLoop in the links below before proceeding any further in this README.
iOS: Hyperloop_for_iOS-Programming_Guide
Android: Hyperloop_for_Android_Programming_Guide

HyperLoop does a pretty good job in allowing you to use Objective-C / Swift with Javascript syntax, but that doesn’t mean that you won’t need to learn Objective-C / Swift if you want to customise the module / create your own. For that reason we highly recommend you to learn the basics of Objective-C / Swift.
In the long run that will make your job easier, since Objective-C is far from being an easy language to understand at the first sight.

2 – Check your environment setup

This module was tested and developed with the following environment:

  • Titanium SDK 6.0.0.GA
  • HyperLoop 2.0.0
  • XCode 8.1

3 – Creating a HyperLoop-enabled project:

  • Create a new Alloy project like you would normally do.
  •  Take a look at the example tiapp.xml file that you’ve received from us. Your tiapp.xml should have the same properties defined in this example otherwise you’ll face some issues while building your project later on.

4 – Usage

After creating a HyperLoop-enabled project you can start playing with the files you’ve received. Make sure you copy the “lib” folder content to your project.
You’ll find inside this zip a very simple example of controller (index.js) that you can copy to your project and start playing with it.
In the code of the HL_CollectionView lib we’ve covered the basics of UICollectionView, but you can always refer to the original class reference and check the methods/properties that we didn’t use in this example.
After following all the steps above you should have your project up and running.

This module is very straightforward – first you need require the HL_CollectionView lib in your code. Currently the only method available in this module is createCollectionView, which accepts two parameters:

  • Array – this is a Javascript array with the data that will be presented in the cells
  • Function – a function to be executed when you click on one of the cells

Do note that you’ll need to change the look of your cells inside the cellForItem method (located inside the HL_CollectionView.js file). This example is accepting an array of hex colours and using them to change the cells background color only. You’re free to customise this behaviour.

Demo running with Hyperloop

Sep-07-2016 16-45-32


One of the things we want to offer you as a reward for joining LoopModules is the ability to contact us to discuss and get help with problems that you may come across.
We’ve tested this module a lot of times and we want to deliver something that will work for everyone (as long as the environments are the same, e.g. SDK, HL version, and so on).
If you come across one of the following:

  • Bugs
  • Suggestions
  • Issues while compiling this module

Feel free to contact us at contact@loopmodules.com.