16

I want to create a subclass of UITableView or UIScrollView that will have some shading at the top when the content offset is > 0 to indicate that the content is scrollable. (See image attached) enter image description here

The way I'm implementing it right now is using the UIViewController that is the delegate of the tableView. I simply have a GradientView on top of the tableView, and I intercept scrollViewDidScroll: to animate the visibility of that top gradient.

My problem with this implementation is that it's not "clean". I want my UIViewControllers to take care of logic, and not to deal with applying gradients and stuff. I wish I could just drop a subclass of UITableView that will do that for me.

The challenge for me is that I can't figure out how the tableView could add to itself a fixed content on top of the scrollable content.

Another question is what method/s of UIScrollView should I override to intercept the scrolling event. Obviously I don't want the tableView to be the delegate of itself...

Any ideas?

Thanks!

Avi Shukron
  • 6,088
  • 8
  • 50
  • 84

4 Answers4

29

Ok, so I found the solution on Apple's WWDC 2011 Session 104 video - Advanced Scroll View Techniques.

There is a whole section in this video about "Stationary Views" inside a scroll view. According to Apple, the way to go here is to override layoutSubviews and put there all the code to position whatever you want - wherever you want.

I tried it and it's actually pretty easy and it's working as expected.

So for example if I would like a shadowed header on top of the table when the content is being scrolled, this is the code I should write:

-(void) layoutSubviews
{
    [super layoutSubviews];
    [self positionTopShadow];
}

-(void) positionTopShadow
{
    CGFloat yOffset = self.contentOffset.y;
    // I'm doing some limiting so that the maximum height of the shadow view will be 40 pixels
    yOffset = MIN(yOffset, 40);
    yOffset = MAX(0, yOffset);

    CGRect frame = self.topShadowView.frame;
    // The origin should be exactly like the content offset so it would look like
    // the shadow is at the top of the table (when it's actually just part of the content) 
    frame.origin = CGPointMake(0, self.contentOffset.y);
    frame.size.height = yOffset;
    frame.size.width = self.frame.size.width;
    self.topShadowView.frame = frame;

    if (self.topShadowView.superview == nil)
    {
        [self addSubview:self.topShadowView];
    }
    [self bringSubviewToFront:self.topShadowView];
}
Avi Shukron
  • 6,088
  • 8
  • 50
  • 84
4

I've managed to figure out a much simpler way of doing this then what Avraham did.

I use the fact that the UIScrollView calls scrollViewDidScroll: ever pixel the scrolling changes to set the object at the location of the offset. Below is my full code to keep a gray bar at the top of the scrollview as you move around:

- (void)viewDidLoad {
    UIScrollView* scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(5.0, 50.0, self.bounds.size.width - 15.0, self.bounds.size.height - 60.0)];
    [scrollView setBackgroundColor:[UIColor colorWithRed:251.0/255.0 green:251.0/255.0 blue:251.0/255.0 alpha:1.0]];
    [scrollView setContentSize:CGSizeMake(scrollView.frame.size.width + 500, 1000.0)];
    [scrollView setDelegate:self];
    [self addSubview:scrollView];

    UIView* header = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, scrollView.contentSize.width, 40.0)];
    [header setTag:100];
    [header setBackgroundColor:[UIColor darkGrayColor]];
    [scrollView addSubview:header];
}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView {
    UIView* header = [self viewWithTag:100];
    [header setFrame:CGRectMake(0.0, scrollView.contentOffset.y, header.bounds.size.width, header.bounds.size.height)];
}
John Riselvato
  • 12,854
  • 5
  • 62
  • 89
  • this one works for me, i just did some editing..and you need to add UIScrollViewDelegate.. – khatzie Oct 09 '13 at 05:55
  • You are correct, I thought it was implied that `[scrollView setDelegate:self];` means you need to also add the delegate, thanks for clearing that up for less experienced users. – John Riselvato Oct 09 '13 at 11:36
  • This will work only if you want to make this changes from a UIViewController. If you want a self-contained UIScrollView subclass that have a stationary views - layoutSubviews is the way to go. – Avi Shukron Feb 15 '14 at 17:44
0
#define kImageOriginHight 300

- (void)scrollViewDidScroll:(UIScrollView *)scrollView1{
CGFloat yOffset  = scrollView1.contentOffset.y;

// NSLog(@" y offset := %f", yOffset);

//zoom images and hide upper view while scrooling to down position
if (yOffset < 0) {//-kImageOriginHight


    CGRect f = imgV.frame;
    f.origin.y = yOffset;
    f.size.height =  -yOffset + kImageOriginHight;
    imgV.frame = f;

    //viewTableUpperView.alpha = 1.5 - (yOffset/-kImageOriginHight);
    //viewTableUpperView.userInteractionEnabled = NO;

    if(yOffset+0.5 == -kImageOriginHight){
        [UIView animateWithDuration:0.1 animations:^{
            //viewTableUpperView.alpha = 1.0;
        }];
        //viewTableUpperView.userInteractionEnabled = YES;
    }
}

}

arvind
  • 386
  • 3
  • 12
0

You could try using viewForHeaderInSection method of tableView for the shaded view(and also heightForHeaderInSection)... Make the shaded portion as a header.That way there is a fixed content on top of the scrollable content.

Prathiba
  • 287
  • 2
  • 4
  • 15
  • Not good enough because: A. maybe I would like a real header someday. B. It will still be at the top even if the content offset is 0. I want the shadow to appear only when the content is scrolled. – Avi Shukron Feb 21 '12 at 09:34