floating UIButton with image on a UITableview

Question

I try to implement a floating button over a UITableview. So that when the content scrolls the button stay at the same position. The button shall hold a transparent image.

I did a smoketest and it worked fine with insertSubview:aboveSubview:respectivly addSubView

But doing this on a UITableview of an TableViewController does not seem to work. The Button is on the tableView and scrolls with the tableView. Interestingly it scrolls as well under the header of the tableView...

How do I fix this - that the button is floating over the tableview?

TableViewController.m (updated with working code 12.07.2013)

Edit: Added a @property (nonatomic) float originalOrigin; in TableViewController.h

- (void)viewDidLoad
{
    [super viewDidLoad];       
    self.originalOrigin = 424.0;
    [self addOverlayButton];
}


#pragma mark Camera Button 
- (void)addOverlayButton {
    // UIButton *oButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    self.oButton = [UIButton buttonWithType:UIButtonTypeCustom];
    self.oButton.frame = CGRectMake(132.0, self.originalOrigin, 56.0, 56.0);
    self.oButton.backgroundColor = [UIColor clearColor];
    [self.oButton setImage:[UIImage imageNamed:@"CameraButton56x56.png"] forState:UIControlStateNormal];
    [self.oButton addTarget:self action:@selector(toCameraView:) forControlEvents:UIControlEventTouchDown];
    [self.view insertSubview:self.oButton aboveSubview:self.view];
}

// to make the button float over the tableView including tableHeader
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGRect tableBounds = self.tableView.bounds;
    CGRect floatingButtonFrame = self.oButton.frame;
    floatingButtonFrame.origin.y = self.originalOrigin + tableBounds.origin.y;
    self.oButton.frame = floatingButtonFrame;

    [self.view bringSubviewToFront:self.oButton]; // float over the tableHeader
}

Best answer http://stackoverflow.com/a/35622509/2269679 – Manuel Escrig Feb 25 '16 at 08:58 — Manuel Escrig, Feb 25 '16 at 08:58

score 2 · Accepted Answer · answered Jul 11 '13 at 13:29

2

You can implement the scrollViewDidScroll delegate to change your floating button y origin while the user scroll the table, so that the button will float and stay at the same location.

There is a great example in WWDC 2011 session 125 that does exactly what you want.

In general, you need to save the original y origin of the button after you create it, or you can do it in viewDidLoad, then implement the scrollViewDidScroll and update the button frame.

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGRect tableBounds = self.tableView.bounds;
    CGRect floatingButtonFrame = self.floatingButton.frame;
    floatingButtonFrame.origin.y = self.originalOrigin + tableBounds.origin.y;
    self.floatingButton.frame = floatingButtonFrame;
}

answered Jul 11 '13 at 13:29

Eyal

10,777
18
78
130

Your solution works partly. The button stays now where it should. But I have the strange behaviour, that the button is over the tablecells, but under the tableheader. So verytime the tableheader appears the button scrolls under the table header.. – jerik Jul 12 '13 at 09:45
Found a solution, adding: `[self.view bringSubviewToFront:self.oButton];` to the `scrollViewDidScroll` did the trick – jerik Jul 12 '13 at 10:14
updated my code with the working solution – jerik Jul 12 '13 at 10:21
- (void)scrollViewDidScroll:(UIScrollView *)scrollView { if (scrollView == _tableContacts) { CGRect frame = _btnAddNewContact.frame; frame.origin.y = scrollView.contentOffset.y + _tableContacts.frame.size.height - _btnAddNewContact.frame.size.height; _btnAddNewContact.frame = frame; [self.view bringSubviewToFront:_btnAddNewContact]; } } – Ankit Goyal Dec 03 '15 at 10:20

floating UIButton with image on a UITableview

TableViewController.m (updated with working code 12.07.2013)

1 Answers1

Linked