Creating ‘Pulse’ style scrolling – Horizontally scrolling UITableView as a subview of UITableViewCell

‘Pulse’ is a free news reading application for iPhone, iPad, and Android by Alphonso Labs Inc. I was introduced to Pulse through an iTunes U lecture from Stanford University “10 Hacks to go from Idea to #1 App”. In that lecture, the developers have mentioned that they have used horizontal UITableViews to create the Interface. Intrigued as I was, I had to try it myself and you should also.


Pulse has a unique UI that is as useful as it is pretty:

Each row contain feed from a single source and is horizontally scrollable. The visual representation is enough to get the gist of overall news and read only the stories that seem interesting or important. While this is a unique and efficient news reading application for the users, its also appealing to the developers (at least it was to me.)

So, here is a tutorial for creating the same interface (scree on the left):

 Things We Need

1. A UITableView whose cells have other UITableViews as subviews. You might find this tutorial helpful.

2. A bunch of images.

3. A taste for uniqueness. Most Important!

Lets Start

What we’re going to do is rotate our tableview that is the subview by -90 degrees. Then we are going to add images to each of its cells and rotate those images by 90 degrees.

Adjusting Sizes in IB

To start with, lets adjust the sizes a little bit. Open TableViewCell.xib (our UITableViewCell subclass from the above mentioned tutorial) and change the sizes as following:

1. Make the cell’s ‘View’ 320×220 for iPhone or 768×220 for iPad.

2. Make the UITableView 220×768. (Yes, the width and height is opposite to that of the cell because we’re going to rotate it.)

Adding and Initializing Required Properties

In our UITableViewController subclass, we need an array of arrays. Each of its object (i.e. an array) is going to contain a collection of objects that we want to be displayed in our horizontal tableview, in this case NSString objects having names of images. Lets declare those in our header file:

#import <UIKit/UIKit.h>

@class TableViewCell;

@interface TableViewController : UIViewController <UITableViewDataSource, UITableViewDelegate> {
      UITableView *tableView;
      TableViewCell *tableViewCell;
}

@property (nonatomic, retain) IBOutlet UITableView *tableView;
@property (nonatomic, retain) IBOutlet TableViewCell *tableViewCell;
@property (nonatomic, retain) NSArray *titlesArray;
@property (nonatomic, retain) NSArray *peopleArray;
@property (nonatomic, retain) NSArray *thingsArray;
@property (nonatomic, retain) NSArray *fruitsArray;
@property (nonatomic, retain) NSArray *arrays;

@end

and initialize in the implementation file:

- (void)viewDidLoad {
      [super viewDidLoad];

      titlesArray = [[NSArray alloc] initWithObjects:@"People", @"Things", @"Fruits", nil];
      peopleArray = [[NSArray alloc] initWithObjects:@"Gardener.png", @"Plumber.png",
                    @"BusinessWoman.png", @"BusinessMan.png", @"Chef.png", @"Doctor.png", nil];
      thingsArray = [[NSArray alloc] initWithObjects:@"StopWatch.png", @"TrashCan.png",
                    @"Key.png", @"Telephone.png", @"ChalkBoard.png", @"Bucket.png", nil];
      fruitsArray = [[NSArray alloc] initWithObjects:@"Pineapple.png", @"Orange.png",
                    @"Apple.png", nil];

      arrays = [[NSArray alloc] initWithObjects:peopleArray, thingsArray, fruitsArray, nil];
}


In our UITableViewCell subclass, we need an array to hold the content that is going to be displayed in its tableview. Lets declare that in its header:

#import <UIKit/UIKit.h>

@interface TableViewCell : UITableViewCell <UITableViewDataSource, UITableViewDelegate> {
      UITableView *horizontalTableView;
      NSArray *contentArray;
}

@property (nonatomic, retain) IBOutlet UITableView *horizontalTableView;
@property (nonatomic, retain) NSArray *contentArray;

@end

It will later be initialized in tableView:cellForRowAtIndexPath in the UITableViewController subclass.

Altering UITableViewDelegate and DataSource

We implemented UITableViewDelegate and DataSource for both our UITableViewController subclass and UITableViewCell subclass earlier. Now, we just need to change them a little bit.

In UITableViewController subclass, the datasource method tableView:cellForRowAtIndexPath: will be (Please also have a look at the second update):

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
      static NSString *CellIdentifier = @"Cell";
      TableViewCell *cell = (TableViewCell*)[self.tableView 
                         dequeueReusableCellWithIdentifier:CellIdentifier];

      if (cell == nil) {
           [[NSBundle mainBundle] loadNibNamed:@"TableViewCell" owner:self options:nil];

           CGAffineTransform rotateTable = CGAffineTransformMakeRotation(-M_PI_2);
           tableViewCell.horizontalTableView.transform = rotateTable;
           tableViewCell.horizontalTableView.frame = CGRectMake(0, 0, 
                         tableViewCell.horizontalTableView.frame.size.width,
                         tableViewCell.horizontalTableView.frame.size.height);

           tableViewCell.contentArray = [arrays objectAtIndex:indexPath.section];
           tableViewCell.horizontalTableView.allowsSelection = NO;

           cell = tableViewCell;
           self.tableViewCell = nil;
      }

      return cell;
}

Note: horizontalTableView is the subview of TableViewCell. In the preparatory tutorial it was named tableViewInsideCell.

Since we are separating the content through sections rather than rows, there are going to be more than one sections each having one row:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
      // Return the number of sections.
      return [arrays count];


- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
      return 1;
}

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
      return [titlesArray objectAtIndex:section];
}

Also change the height of each row to 220:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
      return 220;
}


In UITableViewCell subclass, tableView:cellForRowAtIndexPath: will be:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
      static NSString *CellIdentifier = @"Cell";
      UITableViewCell *cell = [self.horizontalTableView 
                           dequeueReusableCellWithIdentifier:CellIdentifier];

      if (cell == nil) {
           cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle 
                              reuseIdentifier:CellIdentifier] autorelease];
      }

      //Since we are reusing the cells, old image view needs to be removed form the cell
      for (UIImageView *view in cell.subviews) {
            [view removeFromSuperview];
      }

      UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 10, 200, 200)];
      imageView.image = [UIImage imageNamed:[contentArray objectAtIndex:indexPath.row]];

      //Use UIContentModeScaleAspectFit or other depending upon the size of your images, 
                    mine were small but not proportional so...    
      imageView.contentMode = UIViewContentModeCenter;
      CGAffineTransform rotateImage = CGAffineTransformMakeRotation(M_PI_2);
      imageView.transform = rotateImage;

      [cell addSubview:imageView];
      [imageView release];

      return cell;
}

Adjust the row height here also:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
      return 220;
}

and done!

Here is what the result would look like:

Again, its raw, certainly not as pretty as Pulse, but it can be (rather should be) refined before using in an actual application. If it helped, you’re welcome :)

Any improvements or suggestions are most welcome in the comments sections. Do subscribe for more unique stuff.

Update

Borut pointed out that our custom cells with UITableView inside them are not being reused. If we study the code carefully, we will find out that we are not assigning any reuseIdentifier because we are not using the default -initWithStyle:reuseIdentifier method for creating cells. The reuseIdentifier property of UITableViewCell is readonly , we cannot set it. A workaround is to create a getter method in our UITableViewCell subclass for the reuseIdentifier and use the same string being used to dequeue the reusable cells. In our case, this should do:

- (NSString *) reuseIdentifier {
    return @"Cell";
}

Note that in this tutorial we are using @”Cell” for dequeuing cells in both UITableViewCell subclass and UITableViewController subclass. This needs to return the one we are using in the UITableViewCOntroller subclass because we want to reuse this cell there.

Update 2

Borut wanted to update the content dynamically and was having problems with the current version. Like I said earlier, this is a very limited implementation and can be improved. We improved it a little more. If you want to dynamically add remove content, change the ‘arrays’ ivar type to NSMutableArray and update the array. Now we need to tell our two tableviews to reload, not one, but two tableviews. First call reload on the parent tableView after editing the array, example:

[arrays removeLastObject];
[self.tableView reloadData];

Next we change our cellForRowAtIndexPath of parent tableView to add a method call to reload the child tableView:

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *CellIdentifier = @"Cell";
    TableViewCell *cell = (TableViewCell*)[self.tableView 
                          dequeueReusableCellWithIdentifier:CellIdentifier];
	if (cell == nil) { 
        [[NSBundle mainBundle] loadNibNamed:@"TableViewCell" owner:self options:nil];
        cell = tableViewCell;
		self.tableViewCell = nil;

    //changed the location of the closing bracket	
    }   
	
    CGAffineTransform rotateTable = CGAffineTransformMakeRotation(-M_PI_2);
    cell.horizontalTableView.transform = rotateTable;
    cell.horizontalTableView.frame = CGRectMake(0, 0, cell.horizontalTableView.frame.size.width, 
                                     cell.horizontalTableView.frame.size.height);
    
    cell.contentArray = [arrays objectAtIndex:indexPath.section];
    
    //addition
    [cell reloadContent];
    cell.horizontalTableView.allowsSelection = YES;
    
    return cell;
}

Now also add the reloadContent method to the UITableViewCell subclass:

- (void)reloadContent {
    [self.horizontalTableView reloadData];
}

Update 3

Thanks a lot for your appreciation. Since there were a lot of requests for code. I’ve uploaded it to dropbox. Here is the link:
http://dl.dropbox.com/u/17653793/Pulse.zip

About these ads

100 Comments on “Creating ‘Pulse’ style scrolling – Horizontally scrolling UITableView as a subview of UITableViewCell”

  1. […] ← Creating ‘Pulse’ style scrolling – Horizontally scrolling UITableView as a subview… Are you sure you want to delete ‘Angry Birds’??? […]

  2. Ken says:

    Thanks a lot for the tutorial. Very much appreciated. Gonna try it out.

    • xs2bush says:

      Thanks Ken. I appreciate your appreciation ;) All the best. Im gonna post another method of creating ‘Pulse’ interface. Do check that out.

  3. Borut says:

    I have a problem in UITableViewController. The method cellForRowAtIndexPath where my custom cell with horizontal table is loaded “[[NSBundle mainBundle] loadNibNamed:@”News_TableViewCell” owner:self options:nil];” somehow does not work. The cells are not reused and in every row I get indexPath.row that equals 0.

    Could you send me you working example?

    Thanks

    • Borut says:

      I figured it out about the indexPath.row – it always returns 0 cos there is only one row in each section so indexPath.section is way to go (I kind a missed this from your tutoriral).

      Besides that I still have a problem reusing cells. When my cells are drawn for the first time its ok, but when they are scrolled off the screen and came back the whole cell is redrawn. What could I do wrong? Here is the code:

      – (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
      static NSString *CellIdentifier = @”Cell”;
      News_TableViewCell *cell = (News_TableViewCell *)[self.tableView dequeueReusableCellWithIdentifier:CellIdentifier];

      if (cell == nil) {
      [[NSBundle mainBundle] loadNibNamed:@”News_TableViewCell” owner:self options:nil];

      CGAffineTransform rotateTable = CGAffineTransformMakeRotation(-M_PI_2);
      tableViewCellWithTableView.horizontalTableView.transform = rotateTable;
      tableViewCellWithTableView.horizontalTableView.frame = CGRectMake(0, 0,
      tableViewCellWithTableView.horizontalTableView.frame.size.width,
      tableViewCellWithTableView.horizontalTableView.frame.size.height);

      [tableViewCellWithTableView setData:[dataArray objectAtIndex:indexPath.section]];
      tableViewCellWithTableView.horizontalTableView.allowsSelection = NO;

      cell = tableViewCellWithTableView;
      self.tableViewCellWithTableView = nil;
      }

      return cell;
      }

  4. podcaster123 says:

    Great tutorial… Is there a way to get the project for us to test with?

  5. Borut says:

    I have encounter another problem. If I change the number of section (number of rows in main table) – add/remove row and execute reload statement with [self.tableView reloadData], the cells are not re-drawn, instead are used dequeued rows. For example: if I remove the first row, the second comes on first place but data is the same as it was in removed row before.
    How can I achieve to be data in cells refresh on reloadData? Or is there any other solution?

    Thanks

    • xs2bush says:

      Got that….checking. Please post the solution if you find one :)

      • Borut says:

        I did not use built-in editing feature. I just changed/modified datasource object and then reload table. Should I use deleteRowsAtIndexPaths method to remove some and the reloadTable? If I do this than it will be quite complicated – I will have to take care of all indexes that I deleted/added/rearanged… Is this the right option?

        Thanks

      • xs2bush says:

        Found the solution posting update.

  6. Borut says:

    Great. But I found that this solution causes table cells to be redrawn (not reused). So everytime the cell becomes visible it is redrawn. This is because [cell reloadContent]; is outside (cell == nil) condition and consequently this happens: [self.horizontalTableView reloadData];

    • Borut says:

      @xs2bush: sorry to bother your but did you find out the solution yet? I have been trying with no luck, I just can’t get it work. I would really appreciate if you look at the problem.

      Thanks again!

      • xs2bush says:

        Hey, No problem. Ive been really busy at work so I couldnt look at this. I will definitely do it soon :)

      • Borut says:

        Thanks!

      • Borut says:

        This tableView’s are making me crazy. I just tested this behavior on new test project with one tableView. I added 30 sections with one row per section and put this line inside if( cell == nil ) condition in cellForRowAtIndexPath method:
        NSLog(@”Creating cell %d”,indexPath.section);

        When I launch application I get this in output:
        Creating cell 0
        Creating cell 1
        Creating cell 2

        Creating cell 20
        Creating cell 21

        Only 22 cells are visible on first run. That’s ok, tableView created only cells that are visible. So far so good.
        But when I scroll down to see the rest of the cells (8 other cells) the console only shows me this:
        Creating cell 22

        Why did tableView skipped creating last 7 rows and used them from queue instead? isn’t that kind a strange behavior? Or maybe is this a bug in apple’s tableView? Or maybe I am wrong and don’t quite understand the background of tableView reusing…?

        Anyway I’m still looking for the solution to solve this problem in this, Pulse like app…

        Thanks!

      • xs2bush says:

        its good that tableview is reusing last rows. The thing you should be worried about is why is it not reusing the 22nd row…lol ;)

      • Borut says:

        And I thought I know something about tableView’s … :)

      • Borut says:

        @xs2bush: I have been struggling to find the solution with no luck. I just found out that main (vertical) cells are actually reused (when horizontal rows are scrolled the position is saved after scrolling vertical table) but horizontal are not (this is because of reloadContent method – logical).
        I have been thinking to cache images in memory on first load and than get them from there. But I dont think this is a good solution or if this would work.

        I’m still looking for a solution. Your help is really appreciated!

      • xs2bush says:

        Caching images is a good idea when it comes to fast UI loading but it puts a burden on the memory. At least thats what I think. So either you have to make a tradeoff decision here!

      • Borut says:

        I am aware that this option could put heavily pressure on memory. Is there anything we can do with current implementation so this problem is gone? I would really need your help here…

  7. Hi Excellent article. Is it possible for you to mail me the code for the article? My email address is anishjhaveri20022[at] gmail.com


    Thanks,
    Anish

  8. Borut says:

    Anything new here?

  9. AY says:

    Can you post your code samples?

  10. Vincent says:

    Hey just saw this tutorial. I know I asked for the source code for the other tut but do you think you can send me this too? Thanks in advance!

  11. Castro says:

    When I recently discovered your website and started following along, I was thinking I’d post my very 1st comment. I don’t know just what to express except that I truly liked reading by means of. Good writings. I will maintain on visiting this site much more often.

  12. Borut says:

    @xs2bush: Have you found any solution about reusing horizontal cells yet?

  13. kkkhhh says:

    thx for the code. Everything works beautifully except that my uitableview stop bouncing…even if I set bouncing to YES. Any idea? thx in advance.

  14. kkkhhh says:

    Thx for your response. I downloaded the code again and it still gives me the same problem. The embed uitableview can’t move further once it reaches both ends.Try drag the 1st item of each row to the right or drag the last item to the left. You will see that the bouncing doesn’t happen.

    • lionel says:

      hi, i am trying to tackle the same problem, it is a bit annoying that you have to first drag left.
      do you have any luck with this?

      I have a hunch that it is because the main (vertical) table is stealing the first touch when the scroll direction doesn’t make sense for its child, in this case, the initial rightward scroll when the horizontal table is at its left end. However, when your first scroll is leftward, which makes sense for the child horizontal table, the event handling is then pass to the child, and only then you could move rightward and see the bounce effect.

      any idea?

  15. amazaing work, keep up the great webpage.

  16. emotions says:

    Hello! I just would like to give a huge thumbs up for the great info you have here on this post. I will be coming back to your blog for more soon.

  17. mering says:

    Hey,

    Thanks for a great article, really helped me out.

    I’ve followed your tutorial to the letter but I still seem to be having some trouble somewhere and I’m not entirely sure where. When I launch the app, I can see the three sections and can scroll up and down, but the images don’t appear and I can’t scroll to the left or to the right.

    At first I thought it was an issue with the array, but I downloaded your project file and the only difference between them I can see is that on mine I started with a standard view instead of a table view so I could put an image view as a background and then the table view on top.

    I know it’s a rather vague problem, but can anyone think of where I might have gone wrong?

  18. mering says:

    Thanks for the quick response.

    I’m not sure what was wrong, but I started from scratch and it seemed to work this time around.

    I know it’s not really in the scope of this article, but what I am attempting is to have each cell launch a video when selected. I tried to do this inside the TableViewCell’s didSelectRowAtIndexPath method, but it didn’t work because [self.view addSubview:moviePlayer.view]; tells me that self doesn’t have a view. I understand why it’s telling me that, TableViewCell isn’t a View Controller and doesn’t have a view, but if I try it from the TableViewController, I won’t be able to know which cell was selected.

    I need to give it some more thought but I was thinking of having TableViewCell’s didSelectRowAtIndexPath method call a method in TableViewController that sends it the URL of the movie and the movie is played from TableViewController. I haven’t had time to try it yet, but I would welcome any advice or criticism.

    • Amer says:

      ViewController *i = [[ViewController alloc] initWithNibName:@”NewsDetailsViewController” bundle:nil];
      [self.superview.superview addSubview:i.view];

      put that code in the didselect method in the custom cell class

  19. Tyler DeWitt says:

    Great Post. Clarification question:

    Why do we reset the frame of the horizontalTableView:

    tableViewCell.horizontalTableView.frame = CGRectMake(0, 0,
    tableViewCell.horizontalTableView.frame.size.width,
    tableViewCell.horizontalTableView.frame.size.height);

    But not to the ArticleTable Cells? The Article Table Cells are also rotated, so shouldn’t they also need to have their frame reset.

    I’ve got your sample code running and tried playing with these settings myself, but can’t wrap my head around it.

    Thanks!

    • xs2bush says:

      We are doing this only in case we use a new cell because its not set in the xib file. if you set it as required inside the xib then you wont need to set it here.

      • Tyler DeWitt says:

        After playing around, I realized the reason the images don’t need to have their frame reset is because they are squares. Since transformations are about a View’s center, the images origin’s doesn’t shift. Therefore, if the horizontal table view was square, it wouldn’t need a frame reset either. Maybe that is obvious, I just wanted to note that in case anyone had a hard time with it like I did.

        Awesome tutorial. Thanks!

  20. kiran says:

    Great tutorial! Do you have any idea or guidelines to do the row/section animation like in pulse app when the user clicks a thumbnail i.e., the entire row/section moves down. Its easy if we have a scrollview and we can do a frame y manipulation. Here, we have a tableviewcell and it cant come out and drop in like the pulse app. Any help?

  21. Thanks a lot for sharing your knowledge & code! Do you have any idea or advice to “flip” from a row item into a detail view?

  22. lionel says:

    Hey, thanks for sharing your knowledge.

    This method of implementing the “pulse” interface has a slight problem:
    When your horizontal table is at the end cell, let’s say at contentOffset = (0, 0), when you try to scroll it to the right, normally a table view will “bounce” so the user got the feedback that it’s at the end. However, in this case, it won’t “bounce”, unless you first scroll it a little bit to the left, don’t let go your finger and scroll to the right, then it will “bounce”.

    This is a visual problem, because when it is not bouncing, the user’s first impression is the table view got “stuck”, and then realizing that it’s at the end. So I think providing the bounce is very important as to providing the visual feedback.

    I am trying to tackle this problem by setting the horizontal table’s bounces = YES to no avail.
    I have a hunch that it is because the main (vertical) table is stealing the first touch when the scroll direction doesn’t make sense for its child, in this case, the initial rightward scroll when the horizontal table is at its left end. However, when your first scroll is leftward, which makes sense for the child horizontal table, the event handling is then pass to the child, and only then you could move rightward and see the bounce effect.

    Since I am a newbie in iOS development, my hunch could be wrong, or maybe there is some simple thing that I missed.

    Could you and other experts here provide some insight into this problem.

    Thanks for your help in advance.

    lionel

    • xs2bush says:

      You’re right about everything. It should bounce, it doesn’t because of the outer table. If you use pulse you will notice that it has this scroll problem too not that it means we have to follow it exactly. It’ll be a good thing if someone comes up with a solution.

      • xs2bush says:

        You could flip the view like you do in any other case.

      • lionel says:

        hmm, in that case, there should be something to do with hitTest and some touch or event forwarding, but these are tricky thing to do and apple’s documentation doesn’t help that much, i am pulling my hair out, maybe you could give it a try? :)

      • I still haven’t figured out bouncing. Pulse bounces just fine, it is curious that this doesn’t though.

      • solution is to wrap the uitableview in a uiscrollview – the scrollview overwrites some hidden methods in the uitableview that prevent the horizontal bouncing (a normal uitableview prevents horizontal bouncing). There’s no reason apple hid that code, however it is nice that you don’t have to program bouncing on uitable views, but for horizontal issues it would have been nice to require that.

      • xs2bush says:

        Thanks brandon. Thats great. Ill definitely try and post the workaround.

  23. John Zl says:

    Hi, Can you please share the code. Thanks much!

  24. mering says:

    Hi,

    So I’m almost done with what I want to do but I’ve hit a bit of a snag. In the TableViewController I’ve implemented a didSelectRowAtIndexPath method so that I can return the array for the section.

    AppDelegate *mainDelegate = (AppDelegate *)[[UIApplication sharedApplication]delegate];
    mainDelegate.videoContentSection = [[NSMutableArray alloc] init];
    mainDelegate.videoContentSection = [mainDelegate.videoContent objectAtIndex:indexPath.section];

    Then I go to my TableViewCell and in it’s didSelectRowAtIndexPath method I am doing:

    AppDelegate *mainDelegate = (AppDelegate *)[[UIApplication sharedApplication]delegate];
    NSURL *mediaPath = [NSURL URLWithString:[mainDelegate.videoContentSection objectAtIndex:indexPath.row]];

    However the URL it returns is null. In fact the whole array is null. But I know for sure that mainDelegate.videoContent is NOT empty. Note, I’m not getting an array out of bounds error, but the video doesn’t play and when I NSLog the URL it is null.

    I would really appreciate any help you guys can give.

    • Peter says:

      I’m having a similar issue.

      I want to load a new view when a user clicks on one of the pictures in the custom table view cells – say for example, load a full screen version of the thumbnail picture that was clicked.

      Where does this view get loaded from? didSelectRowAtIndexPath will need to be in TableViewCell.m, which is where I would find out which cell was clicked, but then I am getting stuck.

      Does anyone have any advice on pushing a few when a cell is clicked?

      Thanks!

  25. I’ve learned result-oriented things by your blog site Creating ‘Pulse’ style scrolling – Horizontally scrolling UITableView as a subview of UITableViewCell Bushra Shahid's iOS stuff. I’ll bookmark your blog and check again here frequently. Thanks for the ideas you have provided in Creating ‘Pulse’ style scrolling – Horizontally scrolling UITableView as a subview of UITableViewCell Bushra Shahid's iOS stuff.

  26. helloworld says:

    how to programatically connect custom cell with first table? without IB?

    • xs2bush says:

      You would need to create the tableview programmatically in initWithStyle method of uitableviewcell so that with each cell a tableview is created associated with the cell. Good Luck

  27. FYI I figured out bouncing – see EasyTableView project on GitHub

  28. benamarshall says:

    This is really useful for a project I am about to undertake. You will be mentioned.

    Thanks

  29. Sajid Israr says:

    I am trying to Implement Horizontal TableView in UITableViewCell. i want to implement pulltorefreshtableView in cell. i done all of this just facing a problem that unable to pull tableview initially. you may get code from me and check the Project just i am stuck in this problem…..

  30. Craig Will says:

    The behavior that I have seen in your demo is that whether it bounces or not, when a horizontal row is at the end and a user tries to pan or swipe to move it (in the direction it cannot go), this causes a selection, as if the user tapped the cell.
    Do others see this behavior? Is there a solution? This is worse than not bouncing.

  31. I actually wanted to compose a brief comment to appreciate you for the fabulous suggestions you are sharing here. My prolonged internet look up has now been recognized with incredibly good facts and techniques to go over with my best friends. I ‘d mention that many of us visitors actually are quite lucky to live in a superb network with many brilliant individuals with useful solutions. I feel somewhat happy to have seen the website and look forward to some more entertaining minutes reading here. Thanks once more for all the details.

  32. Jeff says:

    thanks

  33. Ashot Vardanian says:

    Hi!

    Thank you for the tutorial! That is cool. But while trying to do the same with my iPhone app i got a problem.

    In my TableViewController.m the following part is not working:

    tableViewCell.horizontalTableView.transform = rotateTable;
    tableViewCell.horizontalTableView.frame = CGRectMake(0, 0, tableViewCell.horizontalTableView.frame.size.width, tableViewCell.horizontalTableView.frame.size.height);

    tableViewCell.contentArray = [arrays objectAtIndex:indexPath.section];

    tableViewCell.horizontalTableView.allowsSelection = YES;
    cell = tableViewCell;

    xCode says that it can’t find “horizontalTableView” and “contentArray” properties on file of type UITableViewCell…. What I have to do?

  34. JR says:

    Does anyone have a sample of converting the Pulse IOS code to Windows?

  35. aarti says:

    is there a way u can have a fixed image at start of every horizontal row scroll that defines the category of that row

  36. prasad says:

    good job……

  37. Zohaib says:

    Thanks i have ran ur appiication .. great stuff .. I was able to modify to show the single horizontal row of people .. my Question is can we modify this code to somehow work for uiButtons instead of uiimageview .. I need to make an horizontal clickable panel which have buttons in it .. can anyone guide me stuck badly

  38. Andrew says:

    This tutorial is awesome. Thank you! Just one thing, I’m trying to apply this view in a TabBar Controller but all I see is a white empty page. Should I modify something in the code to make it work in a TabBar structure?


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 54 other followers