How to Add “More Content” Indicators / Arrows

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.

  1. Hi, I just ran across this great blog. Can you either create a tutorial or point me to one that shows how to make an interface like the one in this post? I can’t seem to find one. It looks like you’re using custom images in a table view?

    Or is this just a scroll view – but then you would lose the great functionality of a table view?

    The topic escapes me.

    A good example would be Twinkle. It looks like a table view, but they’re using bubble like backgrounds. Or the one on this page – the 4 women’s names have custom fonts.

    Thanks.

  2. Hi, I recently got an ipohone from a relative ( it’s not the newest model) and I love almost everything about it. I was wondering why there are no directional arrows. It would be seriously helpful for fixing an error typed in a text box, google search box, or address bar when the auto correction doesn’t pick up on it. Trying to tap behind the error doesn’t always work, as the phone can’t seem to always get behind the word needed to be fixed. Nice site!!

Comments are closed.