How to make floating view?

Question

What I mean by floating view is custom view that is a subview (or appears to be a subview) of scrollview which scrolls along until it anchors on certain point. Similar behavior would be UITableView's section header. Attached image below

My content view (the view underneath the floating view) is not in tableview layout. Meaning if I use tableview only for the floating view, I have to put my content view inside 1 giant cell or break it to several cells with different layouts. The content view will have a lot of dynamic elements which is why I don't want to put it inside UITableViewCell unless I have to. Can I make floating view programmatically / using autolayout on scrollview?

This is a **primarily opinion-based** question, please report more details about you issue. — Alessandro Ornano, Jul 14 '16 at 09:56
I met it too before, my experience is using auto layout seems not so good, sometime it has some delay animation, and I use KVO, it 's much better. by the way , using table view is more easier as you said — childrenOurFuture, Jul 14 '16 at 10:06
you said _"I don't need a tableview for the page"_, but technically you've excluded the obvious solution to use floating section headers and without showing any effort to present any other solutions, you just dropped a demand here to get your problem resolved by __someone__ else and __somehow__ else – that is not the way how to raise a question here. — holex, Jul 14 '16 at 10:47
@holex That's poor wording on my part. I did explain why I prefer not to use tableview. I know how to use floating section headers and I want to know if there are better alternatives. I did try to present other solutions asking for recommendations and previous commenter think it's a opinion-based question which is why I edited to straight up "How to" question. Thanks for the suggestions, I'm new here and still learning how to ask properly :) — Dickson Leonard, Jul 15 '16 at 04:33

score 2 · Answer 1 · answered Jul 14 '16 at 11:56

Using the tableview section header is probably the best solution, you can always easily customise the number of cells or cells themselves to achieve a particular layout.

However if you definitely don’t want to deal with a tableview, this component seems really cool, it's actually is meant to be added to a tableview, but I tested it with the twitter example and you can actually add it to a scrollview, so you don’t need a table view and it will work, give props the guy who made it. GSKStretchyHeaderView

Hope this helps, comment if you have any questions, good luck.

score 0 · Answer 2 · answered Jul 14 '16 at 11:00

Use KVO to update the floating view's frame.

Here is the sample code written in Objective-C:

// ScrollView.m
// ScrollView is a subclass of UIScrollView

@interface ScrollView ()

@property (nonatomic, strong) UIView *floatingView;
@property (nonatomic) CGRect originalBorderFrame;
@property (nonatomic) CGFloat anchorHeight;

@end

@implementation ScrollView


- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];

    if (self) {
        self.floatingView = [UIView new];
        self.floatingView.backgroundColor = [UIColor colorWithRed:0.8211 green:0.5 blue:0.5 alpha:1.0];
        self.floatingView.frame = CGRectMake(0, 150, frame.size.width, 20);
        self.originalBorderFrame  = self.floatingView.frame;
        [self addSubview:self.floatingView];

        self.anchorHeight = 44;

        [self addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:nil];
    }

    return self;
}

- (void)dealloc {
    [self removeObserver:self forKeyPath:@"contentOffset"];
}

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context {
    if ([keyPath isEqualToString:@"contentOffset"]) {
        if (self.contentOffset.y > self.originalBorderFrame.origin.y-self.anchorHeight) {
            self.floatingView.frame = CGRectOffset(self.originalBorderFrame, 0, self.contentOffset.y - (self.originalBorderFrame.origin.y-self.anchorHeight));
        }
    }
}
@end

Here is the capture:

How to make floating view?

2 Answers2