# iPhone Development

Just another iPhone Blog

## 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;

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

//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

//Apply Angle in X point of Ellipse equation

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

//HORIZONTAL_RADIUS_RATIO of 1 is equal to circle

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

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

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 ———————————————————————————————-