CODEWITHSUNDEEP
iosobjective-cuiscrollview
GeneralMike
GeneralMike

Reputation: 3001

Is there a typical way of informing the user a UITableView is scrollable?

Back in the pre-iOS 7 days with grouped tables, it was easy for the user to tell if a UITableView had more content on it that needed to be scrolled to. With the way tables are displayed now, though, it seems hard to know ahead of time if a table is showing all of it's data or if there is more data hidden that the user needs to scroll to in order to see it.

Is there a typical way of informing the user that there is more content in the table than is being shown? If not, does anyone have any ideas of how I could do it? I've seen it before where there would be a floating arrow overlay that would appear on the side of a table if it can be scrolled in a given direction, but I think it was on a Windows or Android device, and I don't recall ever seeing it on an iOS device. I also found this question concerning always showing the scroll bar, but the answers there say it is either impossible or the comments suggest that they are poorly implemented. Has anyone ever come up with a good way to do this?

EDIT: Just for clarification, I'm developing on iPad with multiple small tables imbedded side-by-side in a single UIViewController, which is a bit atypical, so a lot of quick tricks won't work. Some of these tables will need to be scrolled to show all of their content, and some will be sized such that all the content will always be visible. Since there is so much going on in each screen, I need a permanent way of indicating the tables can be scrolled, because I don't want my user missing it.

Upvotes: 2

Views: 277

Answers (3)

GeneralMike
GeneralMike

Reputation: 3001

For now I'm going to go with SAKrisT's method from this question. It makes a category on UIImageView, which is what the scrollbars on a UIScrollView are subclasses of.

The Category:

//.h
#define noDisableVerticalScrollTag 836913
#define noDisableHorizontalScrollTag 836914

//.m
@implementation UIImageView (ForScrollView)

- (void) setAlpha:(float)alpha {

    if (self.superview.tag == noDisableVerticalScrollTag) {
        if (alpha == 0 && self.autoresizingMask == UIViewAutoresizingFlexibleLeftMargin) {
            if (self.frame.size.width < 10 && self.frame.size.height > self.frame.size.width) {
                UIScrollView *sc = (UIScrollView*)self.superview;
                if (sc.frame.size.height < sc.contentSize.height) {
                    return;
                }
            }
        }
    }

    if (self.superview.tag == noDisableHorizontalScrollTag) {
        if (alpha == 0 && self.autoresizingMask == UIViewAutoresizingFlexibleTopMargin) {
            if (self.frame.size.height < 10 && self.frame.size.height < self.frame.size.width) {
                UIScrollView *sc = (UIScrollView*)self.superview;
                if (sc.frame.size.width < sc.contentSize.width) {
                    return;
                }
            }
        }
    }

    [super setAlpha:alpha];
}
@end

To use this, in the code for the viewController that holds the table:

#import "UIImageView+ForScrollView.h"
// ... Stuff ...
- (void) viewDidAppear
{
    [super viewDidAppear];

    myTableView.tag = noDisableVerticalScrollTag;
    [myTableView flashScrollIndicators];
    // ... Stuff ...
}
// ... Stuff ...

Note that myTableView.tag can be set anywhere, but [myTableView flashScrollIndicators]; has to be called no sooner than viewDidAppear (so NOT in viewDidLoad or viewWillAppear - it seems like they cannot be flashed if the table has not been displayed yet).

This method works, but it ties up the .tag property of the table, so that tag can't be used for anything else, which might be a problem for some people.

Upvotes: 0

Travis
Travis

Reputation: 3369

I try to use a more natural approach in my apps, and that is to size my cells such that the last visible cell in the table is "cut off." Ideally it's best if it's cut off across text or an image so that the user immediately understands there is more, but sometimes that's difficult to do, especially if you implement dynamic text resizing.

Example

Of course, modern users are mostly familiar with scrolling so often no indicator is necessary.

Here's another example of a more natural way to let them know there is more content. Notice that not only are the letters cut off on the bottom, but there is also a lot of room at the top; this gives a further visual indicator that the text can be scrolled into the negative space to reveal more.

Example 2

Upvotes: 0

Tim
Tim

Reputation: 60110

A great pattern I've seen is to call -flashScrollIndicators after the table view appears. This gives the user a visual indication that scrolling would do something, while not requiring any permanent modification to the table view's drawing.

Upvotes: 4

Related Questions