Bringing PopUpView in front of a cell

Question

So, I added a popupview to my uisliders. I got the code for the custom sliders with the popup from a guy who had already done that. The popup is showing, but the only problem is that the popup is showing inside the cell in which the slider is at, so it gets cut off at the end of the cell. How can I bring the popupview in front of the cell ? (I have multiple sliders each one in a different cell)

#import "MNEValueTrackingSlider.h"
#import "ToothTableViewController.h"
#pragma mark - Private UIView subclass rendering the popup showing slider value
@interface MNESliderValuePopupView : UIView {
MNEValueTrackingSlider *trackingSlider;
ToothTableViewController *toothViewController;
}
@property (nonatomic) float value;
@property (nonatomic, retain) UIFont *font;
@property (nonatomic, retain) NSString *text;
@end

#import "MNEValueTrackingSlider.h"
#import "ToothTableViewController.h"
@implementation MNESliderValuePopupView

@synthesize value=_value;
@synthesize font=_font;
@synthesize text = _text;

- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
    self.font = [UIFont boldSystemFontOfSize:18];
}
return self;
}

- (void)dealloc {
self.text = nil;
self.font = nil;
[super dealloc];
}

- (void)drawRect:(CGRect)rect {

// Set the fill color
[[UIColor colorWithWhite:0 alpha:0.8] setFill];

// Create the path for the rounded rectanble
CGRect roundedRect = CGRectMake(self.bounds.origin.x , self.bounds.origin.y, self.bounds.size.width, self.bounds.size.height * 0.8);
UIBezierPath *roundedRectPath = [UIBezierPath bezierPathWithRoundedRect:roundedRect cornerRadius:6.0];

// Create the arrow path
UIBezierPath *arrowPath = [UIBezierPath bezierPath];
CGFloat midX = CGRectGetMidX(self.bounds);
CGPoint p0 = CGPointMake(midX, CGRectGetMaxY(self.bounds));
[arrowPath moveToPoint:p0];
[arrowPath addLineToPoint:CGPointMake((midX - 10.0), CGRectGetMaxY(roundedRect))];
[arrowPath addLineToPoint:CGPointMake((midX + 10.0), CGRectGetMaxY(roundedRect))];
[arrowPath closePath];

// Attach the arrow path to the buble
[roundedRectPath appendPath:arrowPath];

[roundedRectPath fill];

// Draw the text
if (self.text) {
    [[UIColor colorWithWhite:1 alpha:0.8] set];
    CGSize s = [_text sizeWithFont:self.font];
    CGFloat yOffset = (roundedRect.size.height - s.height) / 2;
    CGRect textRect = CGRectMake(roundedRect.origin.x, yOffset, roundedRect.size.width, s.height);

    [_text drawInRect:textRect 
             withFont:self.font 
        lineBreakMode:UILineBreakModeWordWrap 
            alignment:UITextAlignmentCenter];    
}
}

- (void)setValue:(float)aValue {
_value = aValue;
self.text = [NSString stringWithFormat:@"%4.2f", _value];
[self setNeedsDisplay];
}

@end

#pragma mark - MNEValueTrackingSlider implementations
#import "ToothTableViewController.h"
@implementation MNEValueTrackingSlider

@synthesize thumbRect;
@synthesize sliderButtonPoint;
#pragma mark - Private methods

- (void)_constructSlider {
valuePopupView = [[MNESliderValuePopupView alloc] initWithFrame:CGRectZero];
valuePopupView.backgroundColor = [UIColor clearColor];
valuePopupView.alpha = 0.0;
toothViewController = [[ToothTableViewController alloc] init];
[self addSubview:valuePopupView];
}

- (void)_fadePopupViewInAndOut:(BOOL)aFadeIn {
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];
if (aFadeIn) {
    valuePopupView.alpha = 1.0;
} else {
    valuePopupView.alpha = 0.0;
}
[UIView commitAnimations];
}

- (void)_positionAndUpdatePopupView {
CGRect _thumbRect = self.thumbRect;
CGRect popupRect = CGRectOffset(_thumbRect, 0, -(_thumbRect.size.height * 1.5));
valuePopupView.frame = CGRectInset(popupRect, -20, -10);
valuePopupView.value = (NSInteger)self.value;
}

#pragma mark - Memory management

- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
    [self _constructSlider];
}
return self;
}

- (id)initWithCoder:(NSCoder *)aDecoder {
self = [super initWithCoder:aDecoder];
if (self) {
    [self _constructSlider];
}
return self;
}

- (void)dealloc {
[valuePopupView release];
[super dealloc];
}

#pragma mark - UIControl touch event tracking

- (BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event {
// Fade in and update the popup view
CGPoint touchPoint = [touch locationInView:self];
// Check if the knob is touched. Only in this case show the popup-view
if(CGRectContainsPoint(self.thumbRect, touchPoint)) {
    [self _positionAndUpdatePopupView];
    [self _fadePopupViewInAndOut:YES]; 
}
return [super beginTrackingWithTouch:touch withEvent:event];
}

- (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event {
// Update the popup view as slider knob is being moved
[self _positionAndUpdatePopupView];
return [super continueTrackingWithTouch:touch withEvent:event];
}

- (void)cancelTrackingWithEvent:(UIEvent *)event {
[super cancelTrackingWithEvent:event];
}

- (void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event {
// Fade out the popoup view
[self _fadePopupViewInAndOut:NO];
[super endTrackingWithTouch:touch withEvent:event];
}

#pragma mark - Custom property accessors

- (CGRect)thumbRect {
CGRect trackRect = [self trackRectForBounds:self.bounds];
CGRect thumbR = [self thumbRectForBounds:self.bounds 
                                     trackRect:trackRect
                                         value:self.value];
return thumbR;
}

@end

Ok so I gave up, I cant figure it out. That is the code for the slider and its popupview. If anyone feels like reading the whole thing I could use the help :P

Answer 1

You could try to add the popupview as a subview of the UITableView.

Then to move it along with the slider, you would have to calculate the point by getting the slider's position relative to your tableview.

This can be achieved by using the UIView's convertPoint:toView: method, for example:

CGPoint sliderButtonRelativePoint = [slider.superview convertPoint:sliderButtonPoint toView:tableView];

where slider.superview would be your UITableViewCell, sliderButtonPoint would be the middle-top point of the slider's round button (for example), and tableView would be, well... your UITableView.

You might have to play around with this a little, and you may find there are strange behaviours when scrolling the tableview, but that's what I would try first.