Creating a scalable Image button in iOS. Without a blurry image.

Question

What am I trying to do:

I want to make a button that scales up or down depending on it's current state which is determined by it either being big or small.

When button is big and I press it, it becomes small. When the button is small and I press it, it becomes big.

The button must contain a image of a QR code and subsequently be scannable by a QR reader.

My problem:

Is that the image is blurry when big. This isn't the case if I put the image inside a ImageView instead of a button.

The effect is best described here: http://imgur.com/a/h3rJg#0

The Code:

Button/Image Declaration

UIImage* image = [QREncoder encode:user];
// declare image - QREncoder can be found on github
UIImage *strechedBackground = [image stretchableImageWithLeftCapWidth:220 topCapHeight:220];
UIImageView* imageView = [[UIImageView alloc] initWithImage:image];
CGFloat qrSize = self.view.bounds.size.width - kPadding * 2;
CGRect largeFrame = CGRectMake(kPadding, (self.view.bounds.size.height - qrSize) / 2,
                          qrSize, qrSize);
imageView.frame = largeFrame;
[imageView layer].magnificationFilter = kCAFilterNearest;

//[self.view addSubview:imageView];

// add qr button to the view
self.qrButton = [UIButton buttonWithType:UIButtonTypeCustom];
self.qrButton.frame = largeFrame;
[self.qrButton setBackgroundImage:image forState:UIControlStateNormal];
[self.qrButton addTarget:self
           action:@selector(aMethod)
 forControlEvents:UIControlEventTouchDown];
self.qrButton.contentMode = UIViewContentModeCenter;    


[self.view addSubview:self.qrButton];

Button/Image Scale Function

- (void)aMethod{
// some variables concerned with button sizes and dimensions
CGFloat qrSize = self.view.bounds.size.width - kPadding * 2;
CGRect largeFrame = CGRectMake(kPadding, (self.view.bounds.size.height - qrSize) / 2,
                               qrSize, qrSize);

CGFloat smallButtonWidth = 33.0;
CGFloat smallButtonHeight = 33.0;

CGFloat largeButtonWidth = 264.0;
CGFloat largeButtonHeight = 264.0;

CGRect smallFrame = CGRectMake(self.view.frame.size.width - smallButtonWidth - kPadding/2, self.view.frame.size.height - smallButtonHeight - kPadding/2, smallButtonWidth, smallButtonHeight);
// a boolean ivar indicates the size of the button
if (!self.qrButtonIsBig){

    NSLog(@"Button was Big");


    // animate the view...
    [UIView animateWithDuration:0.5
                          delay:0.0
                        options:UIViewAnimationOptionCurveEaseOut
                     animations:^{
                         //self.qrButton.transform = CGAffineTransformMakeScale(3, 3);
                         // resting positon after animation
                         self.qrButton.frame = smallFrame;
                     }
                     completion:nil];

    NSLog(@"Button is now Small");


}else{

    NSLog(@"Button was Small");

    // animate the view...
    [UIView animateWithDuration:0.5
                          delay:0.0
                        options:UIViewAnimationOptionCurveEaseOut
                     animations:^{
                         self.qrButton.transform = CGAffineTransformIdentity;
                         // resting positon after animation, bottom left with 20 px margin
                         self.qrButton.frame = largeFrame;
                     }
                     completion:nil];

    NSLog(@"Button is now Big");

}
self.qrButtonIsBig = !self.qrButtonIsBig;

}

Answer 1

Since the ImageView was sharp and ButtonImage blurry. It makes sense to scale the imageview with an invisible button on top as a practical work around rather than trying to get the image to be sharp in the button.

Answer 2

If you need your view to be sharper when it is resized then you need your CALayer class to be a CATiledLayer. you can subclass it in order to define how you will fill your tiles. Check this question if you want to go this road check this question if you don't want to use CATiledLayer