A replica of Path’s table view

Posted: January 13th, 2012 | Author: | Filed under: Custom UI, iOS | 5 Comments »

If you have used Path recently, then the screenshots above should be very familiar. I am always very keen on learning about new ways of providing better user experience through interface design so Path 2.0 impressed me a lot in that area. There are several innovative UI controls in just one single app. The most noticable one was the fly-out menu. It has been replicated in Objective-C, CSS3 and even Adobe Edge.

So for the hackathon night at Anideo, I decided to replica and create a flexible foundation for another not less impressive control found in Path App : the overlay info panel that shows time when you scroll.

The screenshots above shows my progress so far after a few hours into it. It works pretty well with relatively little code. Download demo video of it in action here demo.mov (1.1MB)

The implementation I wanted has to be simple and flexible. Built with just a simple UIView for the overlay and a UIImage stretched to fill the background. It is highly customizable with 6 callback events that you can override to provide any functionality that you need.

I have push the code to my public git repo at https://github.com/kentnguyen/KNPathTableViewController
You can get the code and run the Demo project to get an idea what you can do with it or follow my code below.


How to use and extend KNPathTableViewController

First, the library consists of two source files and two graphic files for the background. Add these files to your XCode project as usual. Everything you need to know about this class can be found in .h file.

Create your own class based on KNPathTableViewController and use it like a normal UITableViewController out of the box. At this moment, only two init methods are supported, but you can submit a pull request to my repo and add more if you need to.

-(id)initWithStyle:(UITableViewStyle)style;
-(id)initWithStyle:(UITableViewStyle)style infoPanelSize:(CGSize)size;

The infoPanelSize is the width and height of your overlay control. The background is created using UIImageView with a stretchable image based on the midpoints of the two images. Default size and other settings can be changed in .h as well.

After you have declared your custom class, override these methods in your implementations

-(void)infoPanelWillAppear:(UIScrollView*)scrollView;
-(void)infoPanelDidAppear:(UIScrollView*)scrollView;
-(void)infoPanelWillDisappear:(UIScrollView*)scrollView;
-(void)infoPanelDidDisappear:(UIScrollView*)scrollView;
-(void)infoPanelDidScroll:(UIScrollView*)scrollView atPoint:(CGPoint)point;
-(void)infoPanelDidStopScrolling:(UIScrollView*)scrollView;

All of these are optional but the most important one you should override is the infoPanelDidScroll:atPoint: call.

The overlay info panel UIView can be access using read-only property self.infoPanel and you can use this to add your custom elements.

In my Basic Demo, I added a single UILabel to the overlay and update it with the information about the current row it is at. The current row index can be calculated with the (CGPoint)point parameter.

In Path App, there is a lot more than just a simple UILabel: a round background clock, two moving clock hands, two dynamically sized labels that show date and time. Essentially they are additional information about the current postion it is at. And it is not limited to that single row as you can see in my Section Demo. The overlay label shows the current section it is at.

Extending

So from here, the possibilities are quite unlimited. You can use this control as another space-saving tool for the important-but-tiny tableview. You can potentially do away with the section headers and display it in the overlay instead. Alternatively, you can just use it as a fancy touch to your app. Up to you.


I do not have any future plan for the library but you could suggest more using the form below.
Also, let me know if you use it in any of your cool project.

Oh and checkout my other app too.