Native iOS - Navigation User Interface Animation

Overview

This challenge call for some creative development to use iOS animation techniques and algorithms to create an advanced navigation component for mobile app. This component will have engaging tansformer-animations to assemble in-motion set of category shapes into a honeycomb-like structure for iPad display. Enable gesture events when user interacts with these shapes, each shape will start another animation in-motion to drill down to detail level of data and transform-animate to a new honeycomb layout. This 2nd layout will display rows of hexagon shape images arranged in packed honeycomb rows and enable to process touch/tap events when user interacts with these cells. Each cell has next level of detail that split a row and present a detail cell level on a split-sliding panel.

Requirements

Display

1. Build a 1st category honeycomb, animated view with 6 active category cells and center cell with logo, total 7 cells. These cells DO NOT have image, only text and color. All hexgon cells are the same size.

2. Build a 2nd honeycomb grid view with grid-like interface where each cell is in shape of a hexagon as shown on sample design images. These cells will have image, text and color attributes. All hexagon cells at this level are the same size.

3. Honeycomb Grid #2 can have max of 35 items on display in honeycomb view. This 7 x 5 grid should have capacity to display up to 35 items. In most case there will be 10-15 cells at this 2nd level of details. Part of the challenge to work out simple algorithm to position all cells in balanced rows. Ideally it will adjust based on the number of cells need to display for this level.

4. For the purposes of this contest we provide JSON sample data to describe these cells and their attributes.  Each cell is associated with a corresponding data structure of a node that contains information that will be used to control cell color, image, text and data on detail pages/panels within the app when the cell is tapped. There is a model class ABModelTest included in smaple XCode project to manage cell data, developers need top use this class to describe each cell.

5. Honeycomb grid needs to have an ability to split the rows of cells and slide in a detail panel view to show information for each cell

   1. Row and cell position determine how the panel to be opened top or bottom based on touch events.  E.g. a cell near the top of the screen will open the panel below the selected honeycomb.    Tapping a cell near the bottom of the screen will open the panel above the selected honeycomb.

   2. Triangle arrow indicator need to identify what cell detail panel was opened as shown on design images.

6. Honeycomb grid layout need to be able to integrate with iOS View to be incorporated into native application with main app navigation menu from which user will navigate to other views. The XCode sample project includes this Sliding menu navigation path that starts at grid #2 (Detail views are not required for this contest. App prototype XCode project is provided with sample detail view-controllers)

7. Ability to programmatically loop  through all rows and access each cell’s data to find a specific cell or change data of a specific cell.

Data

Sample data file is provided in JSON format that represent a complete application metadata. For purpose of this cahllenge we only interested in the category nodes, 2 objects rootNode - main parent node category that is preseneted on 1st honeycomd animation. And node - child cell nodes of each category that are presented on 2nd view build with transition animation as shown on flash animation sample. Both node's data maps to a model class ABModelTest that must be used for development and later consistency to integraet this new animation into existing mobile app.

1. JSON object rootNode describes a 1st level of parent category cells, with 6 cells

2. JSON object node describes a 2nd level of honeycoimb grid with varibal numbe of cells (max 35)

Animations

To create animation developer can use any iOS technique such as core animations, graphics with drawing paths, or SpriteKit animations. Any creative ideas are encouraged to produce the result that fits the requirements.

Cell Images (BONUS ITEM worth $200)

On the detail 2nd level of honeycomb grid each cell will have identifying image. These images vary with cell data and ARE NOT PART of the Xcode project resources. Images will be downloaded from external web-site and stored locally on device storage. Application needs to load these images from local store to display. The challenging part here is these image-files will be SVG (XML definition of images). SVG files will need to be rendered or converted to UIImage to display inside each cell. To render SVG use of any open source 3rd poart library is possible. One such example is SVGKit https://github.com/SVGKit/SVGKit. Developer has a choice here what is best to use to acomplish this feature. Sample SVG files are included in this challenge. Note: Xcode project does not include any download images therefore all cells display no image/empty at run time.

Events

A user touch event on a cell/icon should result in the following behavior:

1. cell will change to indicate a touch activity on the cell like a pushed button

2. ability to access that cell’s data and position in the grid and have methods to access any row or cell within the grid in the program.

3. grid needs to respond with slide panel to display additional content (image, label, description text and Learn More button).

   1. Touch on any other cell will close the currently open panel and open a new split panel for the cell.  Visual design images are provided to demonstrate how this sliding panel will work.

 

Technical Requirements

To create this UI view developer can use xib or code, but No Storyboards. The resulting UI will be integrated into app with navigation menu to be part of the app.

App prototype code is included as an XCode project, use this as a guide on how this component need function and integrated. This POC includes 2 controllers to handle simple animation and then transition to honeycomb grid, next 2nd level. The new target animations will be as shown on the flash-animation designs, single view that transforms to different honeycombs. One idea is to managed new animation UI a single controller to provide seemless animation transitions and construct category honeycomb views. Developer is free of creatievly choose how to architect and create this UI.

Final Submission Guidelines

Technologies & Display

• iOS Version - iOS 7.x - 8.x

• Target Device - iPad 2, 3, mini, Air

• Orientation -  Landscape only

3rd-Party Libraries

Use of any open source components or libraries in this development is permitted but must be restricted to MIT open distribution type of a license.

 

Provided Resources

1. Sample images to use for development are provided. same images can be assigned to all cells for the contest purposes.

2. Sample design images of how animation need to look and work. Produced in flash/HTML NOTE: on flash 2nd animation result in a grid with a center cell LOGO. This is NOT needed. This grid has all gerular cells of same type.

3. Sample design images of category, honeycomb-grid views and Open sliding split-detail panel that opens for each cell

4. Sample JSON data that is used to control all text and attributes of each cell

5. XCode working detailed Prototype with all features and complete sample data

6. Sample SVG files, images for cells to load from local storage.

Submission Details

Provide the complete XCode project with source code in a zip format. Include compnent to work within porvided XCode project Navigation pattern with sliding menu. If you choose to create a library, and provide any instructions needed to build and test this project. XCode project result need to be able to execute in a simulator or actual device.