Using an LSR image on a UIButton

Question

I am creating a tvOS app and I want to use parallax images on a couple of buttons. From the docs:

To incorporate parallax images in your app:

Create a UIImage object.

You load the image differently depending on whether the image is included in your app bundle or whether you have downloaded the image.

Bundle—Load images using imageNamed:.

Downloaded file—Load images using imageWithContentsOfFile:.

Create a new UIImageView object using the loaded images.

If the UIImageView is part of another view, set adjustsImageWhenAncestorFocused to YES on the UIImageView.

I know it says UIImageView there, but I was hoping to make the same effect happen on a UIButton, like the home screen app icons.

I've created the artwork, made a stack in the asset catalog, and loaded the image with imageNamed:, but the UIButton does not behave like a parallax image. It does not sway around like the home-screen icons do. It just looks like a flat image.

Is there something else I have to enable in order for the UIButton to behave like the home screen app icons?

UIButton* quitGame = [[UIButton alloc] initWithFrame:rectWithNewX(playAgain.frame, 985)];
[quitGame setImage:[UIImage imageNamed:@"quit.lsr"] forState:UIControlStateNormal];
[quitGame setAdjustsImageWhenHighlighted:YES];
fadeIn(quitGame, self.view, 0.5);

`adjustsImageWhenHighlighted` is really the key here, and it's only available on UIImageView. You could implement it yourself, but that would be a pain. You might have better luck making a custom control that's a UIImageView which acts like a button. And/or you could [file a feature request](https://bugreport.apple.com). — jtbandes, Sep 23 '15 at 02:17
@jtbandes I'll probably submit a feature request, **but** I did find a workaround. If you make an LSR UIImageView and then make that a subview of the button, it works. — Liftoff, Sep 23 '15 at 02:20
2022 you can now just set that on a button. You have to do it programmatically. `testButton.imageView?.adjustsImageWhenAncestorFocused = true` — Fattie, Jul 05 '22 at 16:54

score 5 · Accepted Answer · answered Sep 23 '15 at 05:01

As of right now, this is not possible with just UIButtons, however, I did find a workaround.

Instead, create a UIImageView that will fill the size of the UIButton and make it a subview of the UIButton. Then call the adjustsImageWhenAncestorFocused: and set it to true. Voila!

UIButton* playAgain = [[UIButton alloc] initWithFrame:CGRectMake(centerX(650, self.view), sh() - 250, 300, 180)];
[playAgain setAdjustsImageWhenHighlighted:YES];
[playAgain addTarget:self action:@selector(playAgain) forControlEvents:UIControlEventPrimaryActionTriggered];
fadeIn(playAgain, self.view, 0.5);

UIImageView* playAgainIGV = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 300, 180)];
[playAgainIGV setImage:[UIImage imageNamed:@"playagain.lsr"]];
[playAgainIGV setAdjustsImageWhenAncestorFocused:YES];
[playAgain addSubview:playAgainIGV];

Why add an extra `UIImageView` as a subview? Just use `-setImage:forState:` and set `playAgain.imageView.adjustsImageWhenAncestorFocused` to `YES`. — bio, Nov 30 '15 at 21:28

score 1 · Answer 2 · answered Sep 23 '15 at 12:24

I've had issues when setting files or precompiled LSRs.

Creating the LSR in XCode Asset Catalogue through Asset Catalogue -> New Apple TV Image Stack and dragging in the PNGs, then setting the image either through Interface Builder or through this works:

-(void) setLsr:(UIButton *)button lsrNamed:(NSString *)lsr {
    [button setAdjustsImageWhenHighlighted:YES];

    UIImageView *biv = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, button.frame.size.width, button.frame.size.height)];
    [biv setImage:[UIImage imageNamed:lsr]];
    [biv setAdjustsImageWhenAncestorFocused:YES];
    [button addSubview:biv];
}

No need to add your own `UIImageView`, you can use the built-in `button.imageView`. (see my other comment somewhere above) — bio, Nov 30 '15 at 21:29

score 1 · Answer 3 · edited May 23 '17 at 12:22

Regarding the answer of david I made a simple Swift method to create a parallax effect button:

func createParallaxButton(button: UIButton, imageNamed: String) {
        button.adjustsImageWhenHighlighted = true
        let buttonBg = UIImageView(image: UIImage(named: imageNamed))
        buttonBg.adjustsImageWhenAncestorFocused = true
        buttonBg.frame = button.bounds
        button.addSubview(buttonBg)
    }
createParallaxButton(myButton, imageNamed: "myButtonimage.lsr")

Using an LSR image on a UIButton

3 Answers3