Monday, June 27, 2011

Horizontal scroll using tableView


Very recently I happened to be in an efficiency problem with displaying large amount of images.
The problem was that I had to display more than 1000s images in horizontal in a way that user can scroll through in an easy and efficient way.

In this case the very first thing that may come in to mind is using a ScrollView with ImageViews added into them. In such a case we have to do a lot of book keepings and I didn't wanted that.

Certainly an idea came into my mind, why not to using TableView with the help of QuartzCore… as below.

Using QuartzCore we can rotate/transform the view. So, I added the table view on my view and rotated it by -90 degree (i.e, anti-clockwise) and made some adjustment in the view frame. Now, the table view is in horizontal mode.

Only thing is that image in cell is still not proper. So, change rotate the imageView also by +90 degree (i.e, clockwise). Hurrahhh!!! task complete..


Initially the screen looked like this,


Vertical table view



Final screen would look like this.

Horizontal table view 


Rotating the tableView:
m_tableView.layer.transform = CATransform3DRotate(CATransform3DIdentity,-1.57079633,0,0,1);
    m_tableView.frame=CGRectMake(0,200, 700,234);



Rotating the imageView:
imageView.layer.transform = CATransform3DRotate(CATransform3DIdentity,1.57079633,0,0,1);
        imageView.frame=CGRectMake(0,0,234,150);


Be sure to implement the lazy loading… for a better user experience.




Updated:
Finally got some time to create a sample for the stated purpose. The example will look like below. 


Custom Gallery




Here is the sample code that may help you go ahead. Be sure to run in Landscape mode... I am sorry that I didn't check for memory in this short time. Please make changes while using...