What a week it has been with all of the new WWDC content. I was blown away at all the new features and have spent most of week watching videos and learning new topics so this will be a short one.

Recently, I was working on a project where I wanted to animate hiding a UIView. The goal was to have a UIView that would animated and fade out, I was hoping that the .hidden BOOL would work for me. Sadly, this property isn’t able to be animated as I expected so I ended up using categories to animate the .alpha value. Here is how you can do the same to achieve a slow fade out on any UIView.

We are using objective-c categories to create new methods on UIView, when doing this you should always prefix your methods with your class prefix, this prevents collisions in case Apple ever decides to implement the same method name. For more information out the great documentation from Apple

1
2
3
4
5
6

@interface UIView (ACAAnimateHidden)

-(void)ACA_setHidden:(BOOL)hidden animate:(BOOL)animated;
-(void)ACA_setHidden:(BOOL)hidden animate:(BOOL)animated duration:(float)duration;

@end

All we need to do is animate the alpha value from 1 to 0 to hide or 0 to 1 to show the UIView again. This will only work for projects greater than iOS4 but you probably should be targeting iOS6 and greater at this point.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

#import "UIView+ACAAnimateHidden.h"

@implementation UIView (ACAAnimateHidden)

-(void)ACA_setHidden:(BOOL)hidden animate:(BOOL)animated
{
    [self ACA_setHidden:hidden animate:animated duration:0.5];
}

-(void)ACA_setHidden:(BOOL)hidden animate:(BOOL)animated duration:(float)duration
{
    if(!animated) {
        [self setHidden:hidden];
        return;
    }

    if(self.hidden)
    {
        self.alpha = 0;
    }

    [UIView animateWithDuration:duration
                          delay:0.0
                        options:UIViewAnimationCurveEaseInOut
                     animations:^{
                         if(hidden)
                             self.alpha=0;
                         else {
                             self.hidden=NO;
                             self.alpha=1;
                         }
                     }
                     completion:^(BOOL b) {
                         if(hidden)
                             self.hidden=YES;
                     }];
}

@end

Now we have a simple way to animate hiding our UIViews!

1

[self.factsBackground ACA_setHidden:NO animate:YES];

One bonus might be to capture the alpha value during hiding an restore it during showing again. My current method only sets the alpha to 1.0 always because I usually try to follow YAGNI. Add the functionality when you need it.

Cheers! -Kevin

Things I read this week:

Most of my week has been following WWDC, I am particularly excited about HealthKit and Widgets. I think this will open a huge amount of opportunity for new applications. Nothing much to share but if you haven’t (who hasn’t?) you should definitely checkout at least the WWDC Keynote for all the great new features.

What are you most excited about from the new WWDC announcements? Email me your comments and lets chat!