在iOS中创建可伸缩的图像按钮。没有模糊的图像。

时间:2013-12-29 19:45:34

标签: ios uibutton uiimage blurry scalable

我想做什么:

我想制作一个按比例放大或缩小的按钮,取决于它的当前状态,该状态由大小决定。

当按钮很大并按下它时,它会变小。当按钮很小并按下它时,它会变大。

按钮必须包含QR码的图像,然后才能由QR阅读器扫描。

我的问题:

大的时候图像模糊吗?如果我将图像放在ImageView而不是按钮内,则情况并非如此。

这里最好描述效果: http://imgur.com/a/h3rJg#0

守则:

按钮/图像声明

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];

按钮/图像比例功能

- (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;

}

2 个答案:

答案 0 :(得分:0)

如果您需要在调整大小时使视图更清晰,那么您需要将CALayer类作为CATiledLayer。您可以对其进行子类化,以便定义如何填充切片。 Check this question if you want to go this road 检查this question if you don't want to use CATiledLayer

答案 1 :(得分:0)

由于ImageView很清晰而且ButtonImage模糊不清。使用顶部的隐形按钮缩放图像视图作为实际工作是有意义的,而不是试图使图像在按钮中清晰。