Parallax Image on System UIButton?

Okay, here's how I got it. Probably overly-complicated, but since there's not much else on the web (yet) it's a start.. Please post if you have anything better.

Create your System UIbutton, either programatically or in Storyboard. Wire it up to a UIViewController and and in the .m file viewDidLoad assign the parallax image to a UIImageView and then assign it as a subView to the button:

- (void)viewDidLoad {

[super viewDidLoad];

//set image to same size as button

UIImageView* myParallaxImage = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, _myButton.frame.size.width, _myButton.frame.size.height)];

[myParallaxImage setImage:[UIImage imageNamed:@"parallaxStack.lsr"]];

[myParallaxImage setAdjustsImageWhenAncestorFocused:YES];

self.myButton.imageView.clipsToBounds = NO;

[_myButton addSubview:myParallaxImage];

}

Now this gives you the parallax image on the UIButton, but the button does not animate when pressed. So I do this manually: in a subclass file I created for the button:

-(void)pressesBegan:(NSSet<UIPress *> *)presses withEvent:(UIPressesEvent *)event {

NSLog(@"press!");

//whatever scale you feel looks good here

CGAffineTransform zoom = CGAffineTransformMakeScale(.95, .95);

[UIView animateWithDuration:0.2

animations:^{

self.transform = zoom;

}];

}

Undo the transform in pressesEnded and also pressesCancelled with a scale back to 1.00.

Disclaimer: I've only done a quick test on the Dev Kit with this, so no gurantees. ;-)

Hi, could you, please, share your solution although complex? I'm getting the same result you indicated in your previous post. I've tried with different lsr layers configurations, etc. but without success. Many thanks.

Hey, check out my edited reply above. Feel free to make suggestions...

I don't know why creating buttons remains such a black art, but hopefully this thread will help... 🙂

Hi,

yes, it's working! And it's not too much complex... :-)

Just a couple of additions: it's not necessary to set clipsToBounds to NO, since it's the default setting, and it's working also with Custom buttons. The missing zoom animation when pressed it's not a big problem. If I'm not wrong it's the same behaviour of iOS (no zoom out), except from the fact that in such case the button became a little more dark to provide a feedback for the pressure. Anyway, I'll check this and share the result if positive.

Many thanks for the help.

The press animation your from results from the UIImageView being highlighted. I wrote a UIButton subclass to handle this when a button is pressed.

@interface ALButton : UIButton
@end
@implementation ALButton
-(instancetype)initWithCoder:(NSCoder *)aDecoder {
    if (self = [super initWithCoder:aDecoder]) {
        self.imageView.adjustsImageWhenAncestorFocused = YES;
        self.imageView.clipsToBounds = NO;
        self.imageView.contentMode = UIViewContentModeScaleAspectFill;
    }
    return self;
}
-(void)pressesBegan:(NSSet<UIPress *> *)presses withEvent:(UIPressesEvent *)event {
    self.imageView.highlighted = YES;
}
-(void)pressesCancelled:(NSSet<UIPress *> *)presses withEvent:(UIPressesEvent *)event {
    self.imageView.highlighted = NO;
}
-(void)pressesChanged:(NSSet<UIPress *> *)presses withEvent:(UIPressesEvent *)event {
    self.imageView.highlighted = NO;
}
-(void)pressesEnded:(NSSet<UIPress *> *)presses withEvent:(UIPressesEvent *)event {
    self.imageView.highlighted = NO;
}
@end

UIButton already has a UIImageView subview. Just set the UIImage for the UIImageView and this should work. I set my image to test this in a storyboard.