UITableView Tricks

 

 

 

 

Recently we came across innovative UI controls like Path and Clear controls. I am pretty amazed to see a simple UITableView and its cells in iOS, can be tweaked to get a eye-catching effects as in Clear app.  After that there came a series of controls using UITableView, but this one from raw engineering was quiet nice.

 

After playing with it, I revisited the nuances of UITableView and came up with this simple UI Layoout which is our topic now. Take at look at this demo

 

 

You can find the Circle View Source in GitHub

 

I drew this sketch quickly.

 

 

  

 

I laid down some rules before I started implementing.

 

1. I made clear that this control will not built ground up from scratch

2. Want to leverage the full power of Dequeue in UITableView 

3. Above two rules, means I should be concentrating only on how the content is laid out to present the data in different manner to the user and make it fun.

 

The main task that revolves around this control is how do we lay out the table cells. I used some basic trigonometry function which find out the point in circumference of the circle.

 

So the heart of this control resides in this method where on the while we find out the YPosition of each cell and adding yOffset of the Scrollview’s content offset. This means that the cell would move relatively as the tableview is scrolled.

 

The goal is to find out the X Position which is obtained by using Circle / Ellipse Equation

 

y = vertical_radius * sin ( angle )

x = horizontal_radius * cos (angle)

 

-(void)setupShapeFormationInVisibleCells

{

    NSArray *indexpaths = [mTableViewindexPathsForVisibleRows];

    float shift = ((int)mTableView.contentOffset.y % (int)mTableView.rowHeight);  

    int totalVisibleCells =[indexpaths count];

   

    float y = 0.0;

    float radius = mTableView.frame.size.height/2.0f;

    float xRadius = radius;

    

    for( NSUInteger index =0; index < totalVisibleCells; index++ )

    {

        BBCell *cell = (BBCell*)[mTableView cellForRowAtIndexPath:[ indexpaths objectAtIndex:index]];

        CGRect frame = cell.frame;

        //we get the yPoint on the circle of this Cell

        y = (radius-(index*mTableView.rowHeight) );//ideal yPoint if the scroll offset is zero

        y+=shift;//add the scroll offset

        

        

        //We can find the x Point by finding the Angle from the Ellipse Equation of finding y

        //i.e. Y= vertical_radius * sin(t )

        // t= asin(Y / vertical_radius) or asin = sin inverse

        float angle = asinf(y/(radius));

        

        //Apply Angle in X point of Ellipse equation

        //i.e. X = horizontal_radius * cos( t )

        //here horizontal_radius would be some percentage off the vertical radius.

        //percentage is defined by HORIZONTAL_RADIUS_RATIO

        //HORIZONTAL_RADIUS_RATIO of 1 is equal to circle

        float x = (floorf(xRadius*HORIZONTAL_RADIUS_RATIO)) * cosf(angle );

        x = x + HORIZONTAL_TRANSLATION;

        

        frame.origin.x = x ;

        if( !isnan(x))

        {

            cell.frame = frame;

        }

    }

}

 

 

Couple Macros found in source code which you could control”

• HORIZONTAL_RADIUS_RATIO – defines the ratio between Vertiacl and horizontal radius. HORIZONTAL_RADIUS_RATIO of value 1 is equal to circle
• HORIZONTAL_TRANSLATION – Helps translate the position of whole Circle / Ellipse i.e the position of the cells 

You can find the Circle View Source in GitHub

 

 

IMPORTANT UPDATE: 

 

A major improvement has been made to this project. Please read UITableView Tricks – Infinite Scrolling  to know about the new features and improvements.

 

 

——————————————————————————————-

UPDATE #1: 

This Post has been featured in 

•  ManiacDev.com
• Cocoa Controls and was the awarded Control of the Week too.

 

 ——————————————————————————————–

UPDATE #2:

Have modified the source code to support the inverse form of the circle i.e the circle can be turned toward right as shown in figure by setting the CIRCLE_RIGHT_DIRECTION macro to 1

 

———————————————————————————————- 

 

 

 

Hope you enjoyed this. Let me know your comments.

Happy Coding