IOS - round cornered temporary alert - how to implement?

Question

I would like to implement a temporary alert into to a uitableviewcontroller to inform a user that their data has been saved.

I could do this with a uiAlertView - but for aesthetic reasons it would be preferable to implement something similar to the round cornered fade in/out alert view used in IOS7 for tasks such as showing volume control - as in this pic -

Is this a IOS7 class? I cant find any info on it (probably because I don't know what its called!), or would I need to extend the uiAlertView to replicate this functionality?

Answer 1

No, this is not a native iOS 7 subclass but there are plenty implementations of it in the wild. One example would be DTAlertView or CXAlertView or SDCAlertView . Check them out.

Answer 2

If you just want the volume-thingy type behavior, don't search too far. It's easily home-rolled with a full screen sized image view that's mostly transparent, and has in it's center a rounded-corner message rectangle, translucent if you like. Then build a convenience method to show/hide it with animation...

- (void)setAlertHidden:(BOOL)hidden animated:(BOOL)animated {

    UIImageView *alertImageView = [self alertImageView];
    BOOL currentlyHidden = alertImageView.alpha == 0.0;
    if (currentlyHidden == hidden) return;

    NSTimeInterval alpha = (hidden)? 0.0 : 1.0;
    NSTimeInterval duration = (animated)? 0.3 : 0.0;

    [UIView animateWithDuration:duration animations:^{
        alertImageView.alpha = alpha;
    } completion:^(BOOL finished) {
        // if we showed the alert, hide it after 3 seconds
        // you can make this duration a parameter
        if (!hidden) {
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 3*NSEC_PER_SEC), dispatch_get_main_queue(), ^{
                [self setAlertHidden:YES animated:YES];
            });
        }     
    }];
}

All you need other than this is to build the image view lazily...

- (UIImageView *)alertImageView {
    UIImageView *alertImageView = (UIImageView *)[self.view viewWithTag:999];
    if (!alertImageView) {
        alertImageView = [[UIImageView alloc] initWithFrame:self.view.bounds];
        alertImageView.image = [UIImage imageNamed:@"fullscreen-volume-looking-thing.png"];
        alertImageView.tag = 999;
        [self.view addSubview:alertImageView];
    }
    return alertImageView;
}

Realize it's not exactly what you need, but this was pretty easy to paste together. It's the volume thing on a screen sized transparent background...

Answer 3

This is a quick implementation of a subview that will do what you want

#import "BellAlert.h"

@implementation BellAlert

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor clearColor];
        UIImageView *bell = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Bell.png"]];
        bell.frame = CGRectMake(0, 0, 50, 50);
        bell.center = self.center;
        [self addSubview:bell];
    }
    return self;
}

- (void)drawRect:(CGRect)rect {

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.1].CGColor);

    CGContextMoveToPoint(context, 5, 0);
    CGContextAddLineToPoint(context, 95, 0);
    CGContextAddArcToPoint(context, 100, 0, 100, 5, 10);
    CGContextAddLineToPoint(context, 100, 95);
    CGContextAddArcToPoint(context, 100, 100, 95, 100, 10);
    CGContextAddLineToPoint(context, 5, 100);
    CGContextAddArcToPoint(context, 0, 100, 0, 95, 10);
    CGContextAddLineToPoint(context, 0, 5);
    CGContextAddArcToPoint(context, 0, 0, 5, 0, 10);

    CGContextFillPath(context);
}

@end

If you want more complex functionality, you can implement public properties and a protocols

If you want to check it working look at it at GitHub... https://github.com/eharo2/BellAlert

Answer 4

for aesthetic reasons it would be preferable to implement something similar to the round cornered fade in/out alert view used in IOS7

Rounding the corners of any view is incredibly easy:

someView.layer.cornerRadius = 5.0;

Making a view fade in and out is also trivial using Core Animation . For example, if you want to fade in someView , set its alpha property to 0 and then animate setting it to 1:

someView.alpha = 0.0;
[UIView animateWithDuration:1.0 animations:^{
    someView.alpha = 1.0;
}];

With those tools at your disposal, you'll find it very easy to roll your own version of Apple's display.