Horizontal scroll for items in iOS (RubyMotion) to mimic Pulse-like UI
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
lib
resources
spec
.gitignore
CONTRIBUTING.md
Gemfile
Gemfile.lock
LICENSE
README.md
Rakefile
code_of_conduct.md
motion-horizontal-scroll.gemspec

README.md

iOS (RubyMotion) Horizontal Scroll Controller

Code Climate

This is a horizontal scroll controller for iOS, that mimics the Pulse UI. The basic functionality is borrowed from a codebase and it is the reason why we were able to come up with this gem, so hats off to the authors! Also, a ton of thanks to lorempixel from where we have pulled in images to feed the sample app.

Animated GIF of Sample Implementation

Usage

Installation

Add this line to your application's Gemfile:

gem "motion-horizontal-scroll"

And then execute:

bundle

Sample App

A sample app is included for reference. To get it up and running, simply clone the repository and run rake or rake device depending on whether you want to preview it in the simulator or device.

Using in your app

Nevertheless, the basic setup for a single row can be achieved as follows:

horizontal_row = HorizontalTableContainerCell.alloc.initWithStyle(UITableViewCellStyleSubtitle, reuseIdentifier: <REUSE_IDENTIFIER>)
horizontal_row.delegate = <DELEGATE>
horizontal_row.vertical_row_offset = <VERTICAL_ROW_OFFSET>
cell = horizontal_row.set_dimensions_with_row_offset
cell.items_list = <DATA ARRAY>
cell.selectionStyle = UITableViewCellSelectionStyleNone
cell

Supplying the title and image

The data required for a single cell has two properties, namely a name and an image. The name is the title that appears underneath the image in the cell. The image itself can be fed in two formats:

  1. An instance of UIImage with initialized with an image.

  2. A URL to an image along with a placeholder image; this requires either the gem afmotion or the pod AFNetworking. The pod on its own may be insufficient, but there's a category called UIImageView+AFNetworking that can start an asynchronous download of an image when given an NSURLRequest.

Available delegate methods

Cell Selection

This refers to a callback that indicates a particular cell has been tapped. The syntax of the method for the same is as follows:

horizontal_scroll_cell_selected(item, index)
Setting Cell Details

The specifics of a cell that need to be set are the title and image. The delegate method for setting cell details is:

set_item_details_for_horizontal_scroll_cell(cell, item)

To set the cell title, you can use the following method:

cell.set_title_label_text text

To set the image, there are two possible methods based on the format as specified above.

  • The first method involves directly providing an instance of UIImage:

cell.set_thumbnail_image image # image is an instance of UIImage ```

  • And the second is probably the method that would be more commonly used for apps that use images pulled from a network. This would require the setImageWithURL method for the UIImageView class which can be availed by installing the afmotion gem (in Objective-C, this would be available in the UIImageView+AFNetworking category). The two arguments it takes are the URL to the image and the name of a locally available placeholder image. The syntax is:

cell.set_thumbnail_image_with_url image_url, placeholder # image_url is a URL in form of a string and the placeholder is a local image that can take the place of the image until it loads ```

Contributing

See the CONTRIBUTING document. Thank you, contributors!

License

iOS (RubyMotion) Horizontal Scroll Controller is Copyright (c) 2016 Multunus Software Pvt. Ltd. It is free software, and may be redistributed under the terms specified in the LICENSE file.

About

multunus

iOS (RubyMotion) Horizontal Scroll Controller is maintained and funded by Multunus Software Pvt. Ltd. The names and logos for Multunus are trademarks of Multunus Software Pvt. Ltd.

We love open source software! See our other projects or hire us to help build your product.