Bar covers UITableView

[Daniel Choi]

I am currently building an app using Swift and the UITableView takes a place an entire view.
When I apply the bar, the bar overlaps the top of the tableview covering first cell, not like examples GIFs.
Is there a built-in way to solve this problem?

Thanks :)

[Andrey G.]

same for me. object-c, ios 8.2. I set background to yellow to test bar.

This is state with minimal height (bar is hidden totally)

Here is state with maximum height

and here is intermediate height

my tableView contentInset set to bar's maximum height.

[Bryan Keller]

@paarapp Have you set the contentInset of your table view to maximumBarHeight?

@plandem It's really hard for me to tell what's going on in that picture. Is the yellow view part of the header? Can you reproduce the issue in one of the included example projects?

[Andrey G.]

yes, yellow background, as i said, is actual bar height. Your demo works well, but it doesn't have any data. In my case it's table without sections and with dynamic content.

[Andrey G.]

Here is actual code. Actually it's almost same as at your readme.

- (void)viewDidLoad {
    [super viewDidLoad];
    self.tableView.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero];

    _viewHeader = [[BLKFlexibleHeightBar alloc] initWithFrame:CGRectMake(0.0, 0.0, self.view.frame.size.width, 150.0)];
    _viewHeader.minimumBarHeight = 0.0f;
    _viewHeader.backgroundColor = [UIColor yellowColor];
    _viewHeader.behaviorDefiner = [[SquareCashStyleBehaviorDefiner alloc] init];

    _viewHeader.behaviorDefiner.snappingEnabled = YES;
    [_viewHeader.behaviorDefiner addSnappingPositionProgress:0.0 forProgressRangeStart:0.0 end:0.5];
    [_viewHeader.behaviorDefiner addSnappingPositionProgress:1.0 forProgressRangeStart:0.5 end:1.0];

    [self.view addSubview:_viewHeader];
    self.tableView.delegate = (id<UITableViewDelegate>)_viewHeader.behaviorDefiner;

    self.tableView.contentInset = UIEdgeInsetsMake(_viewHeader.maximumBarHeight, 0.0, 0.0, 0.0);


    _labelScore = [[UILabel alloc] initWithFrame:CGRectMake(38.0f, 24.0f, 245.0f, 130.0f)];
//  _labelScore = [[UILabel alloc] initWithFrame:CGRectZero];
    _labelScore.font = [UIFont fontWithName: [AppTheme fontNamePrimary] size:140.0f];
    _labelScore.textColor = [UIColor blackColor];
    _labelScore.text = @"75%";
//  [_labelScore sizeToFit];

    [_viewHeader addSubview:_labelScore];

    BLKFlexibleHeightBarSubviewLayoutAttributes *initialLayoutAttributes = [BLKFlexibleHeightBarSubviewLayoutAttributes new];
    initialLayoutAttributes.size = _labelScore.frame.size;
    initialLayoutAttributes.center = CGPointMake(CGRectGetMidX(_viewHeader.bounds), (CGFloat) (CGRectGetMidY(_viewHeader.bounds)+10.0));

    // This is what we want the bar to look like at its maximum height (progress == 0.0)
    [_labelScore addLayoutAttributes:initialLayoutAttributes forProgress:0.0];


    // Create a final set of layout attributes based on the same values as the initial layout attributes
    BLKFlexibleHeightBarSubviewLayoutAttributes *finalLayoutAttributes = [[BLKFlexibleHeightBarSubviewLayoutAttributes alloc] initWithExistingLayoutAttributes:initialLayoutAttributes];
    finalLayoutAttributes.alpha = 0.0;
    CGAffineTransform translation = CGAffineTransformMakeTranslation(0.0, -30.0f);
    CGAffineTransform scale = CGAffineTransformMakeScale(0.2, 0.2);
    finalLayoutAttributes.transform = CGAffineTransformConcat(scale, translation);

    // This is what we want the bar to look like at its minimum height (progress == 1.0)
    [_labelScore addLayoutAttributes:finalLayoutAttributes forProgress:1.0];
}

[Bryan Keller]

@plandem In your specific case, there might be 2 things going on. Here's what I noticed experimenting with your code:

If you do

self.tableView.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero];

before

self.tableView.contentInset = UIEdgeInsetsMake(_viewHeader.maximumBarHeight, 0.0, 0.0, 0.0);

then when the view loads, the table view seems to be scrolled down from the top by 150 points. Not sure why this is happening, but it definitely makes it look like the bar is overlapping the table view. If you scroll to the top, then there's no overlap. This behavior is unrelated to BLKFlexibleHeightBar. I fixed it by simply setting the tableFooterView after I set the contentInset.

I have a feeling this is different than what you're experiencing. It looks like your header is in the middle of your table view. It would be really helpful if you could upload a short video of the problem you're having.

[Andrey G.]

well, i commented:

self.tableView.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero];

and still same result! nothing changed

[Bryan Keller]

In that case, I'll need some more info, as I cannot reproduce the issue with the code you provided.

[Andrey G.]

Here is captured video:
https://www.dropbox.com/s/nre6w93s35vhl9n/bar%20bug.mov?dl=0

I don't know what i must provide more :( Rest of controller - just common controller :(

[Bryan Keller]

Thanks for making the video. To me, it looks like you're adding the BLKFlexibleHeightBar as a subview of the table view, causing it to not only grow and shrink, but also move up and down as you scroll. Is this the case?

[Andrey G.]

It's tableView controller, and code of 'adding' process i already posted. so, yes - bar added as subview of tableView. But at readme there is no such restriction - looked like you used it for tableViewController

[Andrey G.]

here is link when there is no inset:
https://www.dropbox.com/s/8ycfaw3o8yaolpk/bar%20without%20inset.mov?dl=0

it looks almost fine except that it overlaps content

[Bryan Keller]

@plandem Ah! There's the problem. In a subclass of UITableViewController, self.view is the table view. So when you do [self.view addSubview:_viewHeader], you're really adding it to the table view, causing it to scroll and overlap cells.

Your video showing no insets set confirms this, as setting the insets of the table view should have no effect on the frame of the bar.

See:

[Andrey G.]

so is there any workaround? except of swap tableViewController with viewController?

[Bryan Keller]

That would be my recommendation. A quick google search reveals that it's a common source of confusion. http://stackoverflow.com/questions/4641879/how-to-add-a-uiview-above-the-current-uitableviewcontroller

Seems like you have a bit more control over the view hierarchy if you just use a UIViewController and manage the table view yourself, as I do in the demo projects. Maybe another solution will work for you though.

[Andrey G.]

Of course for that screen exactly i will move everything to viewController. But it's better to patch the readme and inform that tableViewController is not supported. suppose same for collectionView and maybe some others

[Andrey G.]

Well, i replaced tableViewController with viewController and here is result:
https://www.dropbox.com/s/paqpxr7pvv1iy0u/bar%20label.mov?dl=0

There is the only problem - label is not moving, only scaling. But at your video from readme (i took almost everything from there to repeat), label is moving top when scaling.

[Bryan Keller]

@plandem Glad you got things working. The issue you're talking about now should really be its own separate issue. I don't want @paarapp 's post to get completely off topic =)

If you look carefully, your label is in fact being moved up. However, since it's so big, it's a little hard to tell. I played with it for a few minutes and

CGAffineTransform translation = CGAffineTransformMakeTranslation(0.0, -95.0f);

looked pretty good. Good luck.

[Andrey G.]

yeah, i sticked with -80.0f :) Looks like everything is fine now :) But still, please, fix readme :)

[Bryan Keller]

A clarification note has been added for those who might run into this issue. Glad you got everything working!

[Daniel Choi]

Thanks for the input.
contentInset worked for me! Closing the issue :)

[Bryan Keller]

Glad to hear! =)