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.

 

 

IMG 4359

  

 

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 

 

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

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

 

Screen Shot 2012 07 19 at 11 03 55 PM

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

 

 

 

Hope you enjoyed this. Let me know your comments.

Happy Coding :)

39 responses to “UITableView Tricks

  1. Pingback: Open Source iOS Control For Quickly Creating A Beautiful Circular Scrollable List

  2. Pingback: Open Source iOS Control For Quickly Creating A Beautiful Circular Scrollable List | WebScriptPlus.com

  3. Somesh June 12, 2012 at 2:40 pm

    Nice and clean.

    Great job.

    • bharath2020 June 21, 2012 at 8:09 pm

      Thanks Somesh

  4. kaushik June 21, 2012 at 5:58 pm

    Awesome!!!

    • bharath2020 June 21, 2012 at 8:08 pm

      Thanks Kaushik.

  5. Ramesh June 24, 2012 at 6:57 pm

    Great. How easy is it to change the layout to Landscape and also compatible with iPad? What should be changed?

    • bharath2020 June 24, 2012 at 8:04 pm

      Thanks Ramesh,
      For landscape support, just you need to setup the auto-resizing masks correctly.. i guess the cell width is being hardcoded.. let me add this as issue and fix it.

      • bharath2020 June 25, 2012 at 2:48 am

        Rames,
        You have to play with the Horizontal Ratio to find the correct xRadius and xRadius of the ellipse. Please check the latest source for the fix

  6. Chakri July 5, 2012 at 10:18 am

    Great job Bharath! I love it..

    • bharath2020 July 5, 2012 at 4:43 pm

      Thanks Chakri :)

  7. James July 11, 2012 at 2:01 am

    Great post! how would I inverse it, and make it appear on right?

    • bharath2020 July 11, 2012 at 6:31 pm

      James,

      Thanks. and to make it right, you need to add a couple of lines in setupShapeFormationInVisibleCells method

      1. Add M_PI to the angle found after the line float angle = asinf(y/(radius)); i.e. angle = angle + M_PI
      2. add 2 times HORIZONTAL_TRANSLATION to x i.e replace line x = x + HORIZONTAL_TRANSLATION; with x = x + HORIZONTAL_TRANSLATION * 2;

      Step #1 would shift the angle to the left half of the circle.
      Step #2 would shift the center to the other end of the screen i.e. towards right.

      Check this CircleView Right
      Hope this helps.

      • James July 11, 2012 at 6:47 pm

        wow. thanks for the reply!! Really helpful!

  8. Ramesh July 11, 2012 at 7:51 pm

    How can I increase the circle radius (circle size) if I wish to have bigger circles on iPad? Thanks. Its a wonderful post.

    • bharath2020 July 11, 2012 at 8:08 pm

      You increase the Height and width of the tableview.

  9. lwxted July 19, 2012 at 5:16 am

    Amazing post and amazing blog! Keep up the great work Bharath! I’ve added your blog to my blog roll.

    • bharath2020 July 19, 2012 at 5:08 pm

      Thank you!

  10. Ramesh July 19, 2012 at 1:24 pm

    Hi Bharath,

    Can I use this in my App for implementing some feature? Do I need to do anything with respect to licensing? Please advice.

    Regards,
    Ramesh.

    • bharath2020 July 19, 2012 at 5:13 pm

      Hi Ramesh,

      Yes, you are free to use this as long as it complies to MIT License. However, I appreciate a mention about my Name and a link to this blog in your App, but its *not mandatory*.
      Also, If you are fine, I could add your App’s App Store link, under whatever title you provide, in my blog as well as in Github README file.

      Regards,
      Bharath

  11. Ramesh July 19, 2012 at 5:53 pm

    Thanks. If I use in my app (still long way to finish and publish) I will provide you with details.

  12. Mr. 313373 November 26, 2012 at 3:10 pm

    Hi, how would I implement this if I wanted a horizontal tableView ?? You know ? Like the way the sun is positioned on the sky throughout the day. I know about EasyTableView that has horizontal tableview scrolling.

    • bharath2020 November 28, 2012 at 6:49 am

      This should do the trick..

      mTableView.transform = CGAffineTransformMakeRotation(-90 * M_PI / 180.0);

      HTH,
      Bharath

  13. EakiOS January 9, 2013 at 4:55 am

    i want to storyboard style

  14. Troy Sartain February 5, 2013 at 11:28 pm

    Very cool. I was looking for a way to have a table scroll at an angle when I came upon your post. Excellent work.

    To get my angled scrolling I suppose one could rotate items in the cells and offset them in some constant way (not unlike your ellipse method, except in a line which would be simpler). Not ideal.

    I’ll keep looking but if anyone knows how to have a rotated table that scrolls at that angle, I would appreciate a poke.

    • bharath2020 February 5, 2013 at 11:36 pm

      Troy,

      Thanks. Do you have image that supports your description?


      Bharath

  15. des253Daniel March 12, 2013 at 9:38 pm

    This is a fantastic tutorial! What changes would need to be made to have this scroll around from the bottom of the screen? I’ve toyed with it a while, and it might be because I’m rusty on my math, but I can’t get it to work.

    • bharath2020 March 12, 2013 at 10:37 pm

      By Bottom of screen, do you the mean the first item be revealed from Bottom??

      • des253 March 13, 2013 at 10:33 pm

        By bottom of the screen, I mean that the center point which all the objects rotate around would be located at the very bottom middle of the screen. Essentially what you have done from left & right side, but from the bottom! Thank you again!

      • bharath2020 March 14, 2013 at 9:58 pm

        Got it.. One solution that quickly comes to my mind is to use AffineTransformation to transform the tableview.. does it help?

      • des253 March 18, 2013 at 7:13 pm

        Hi Bharath, I apologize for the late reply. I took the weekend off to clear my mind :) Your suggestion does work! Thank you so much! However, I have found myself stuck on other features of this in order to tailor it to how I need it to appear. If you don’t mind, I would like to email you with some more details on what I am trying to accomplish with your fantastic demo! I believe what I am needing should be pretty quick for you to figure out :)

  16. Sanj September 3, 2013 at 2:25 am

    Hi Bharath, this an awesome tutorial. Do you have any guidance on using storyboards with this. I tried it and I get a lot of errors that are posed because of autolayout constraints. Is there a way to use this along with storyboards?

    Thanks a lot.

    • bharath2020 September 3, 2013 at 3:05 am

      Hi Sanj,

      This was developed before storyboards came into existence. I would recommend to customize UICollectionView to achieve the same. With Storyboards, you can drop the custom UITableView or UICollectionView, ( in my example, it would be BBTableView) in storyboard and use it as any other view.

      Regards,
      Bharath

      • Sanj September 3, 2013 at 3:11 am

        Thanks a lot Bharath. I actually got it working.. :) I used your BBTableView and created an instance of it programmatically and it seemed to work. I am not using the interface builder now.

        Thanks a lot.

      • bharath2020 September 3, 2013 at 4:45 am

        Welcome :)

  17. Pingback: iOS/Androidのサークルビューライブラリ作った | kwLog

  18. Wes December 12, 2013 at 7:19 pm

    Thanks for this great tutorial on this topic. I am trying to achieve something like this in my app. I was wondering if you could help me understand how to change the shape of the ellipse the cells scroll around. I would like to have it be a circle, rather than an ellipse. It seems like that should be straightforward, but I haven’t been able to get it working.

    Thanks!

  19. Ayush December 17, 2013 at 11:48 am

    sir nice tutorial…….. thank you

    • bharath2020 December 17, 2013 at 6:31 pm

      Welcome :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 29 other followers

%d bloggers like this: