In my original post about the Bikini.com Supermodel Party iPhone app, I mentioned I would follow up with a few posts on how I implemented various features in the app.

I previously wrote about Sliding View On/Off Screen. In this post I will show how I added directional arrows indicating more content in a scrollable area, in this case, a UITableView. Below you can see three screenshots from the application, I’ve circled the directional arrows in red.

My original design didn’t include these content indicators. As an iPhone developer, I’m sure it’s obvious to you this is a custom table, created with a transparent background and custom cells, and with the swipe of a finger, you can scroll up and down. However, for the casual user, this may not be as apparent, which was exactly the feedback from the first round of beta testers.

Here’s how I added the directional arrows, first I created two images and set their hidden status and frame:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// Arrows to indicate more content
upArrow = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"ArrowUp.png"]];
downArrow = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"ArrowDown.png"]];   
 
// Upon startup, we are at the top...
// no content up, more content down
upArrow.hidden = YES;
downArrow.hidden = NO;
 
// Set the frame
[upArrow setFrame:CGRectMake(296, 112, 18, 18)];
[downArrow setFrame:CGRectMake(296, 390, 18, 18)];
 
// Add to the view controller
[self.view addSubview:upArrow];
[self.view addSubview:downArrow];

With the definitions in place, monitoring the directional arrows is as simple as adding the following code inside scrollViewDidScroll method in the class where the UITableView is defined.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/*---------------------------------------------------------------------------
* Adjust arrows indicating more content
*--------------------------------------------------------------------------*/
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
  // Are we at the bottom of the scrollview ?
  if (scrollView.contentOffset.y < 
        scrollView.contentSize.height - scrollView.frame.size.height)
    downArrow.hidden = NO;
  else
    downArrow.hidden = YES;
 
  // Are we at the top of the scrollview ?
  if (scrollView.contentOffset.y > 0)
    upArrow.hidden = NO;
  else
    upArrow.hidden = YES;  
}

At this point the rest is managed for you. Given UITableView is a subclass UIScrollView, this same code/logic can be used in any instance where you are using UIScrollView or a subclass of the same.