在按钮顶部拉伸图像以推动视图控制器

Posted 2023-03-21

【中文标题】在按钮顶部拉伸图像以推动视图控制器

【英文标题】：Stretch image on top of a button in order to push view controller

【发布时间】：2013-06-19 14:55:18

【问题描述】：

我有这张 UIButton 的图片：

我想添加某种手势（平移手势）将其向右滑动，并且我希望图像也向右拉伸：

它与 iPhone 的“滑动解锁”方法非常相似，但没有从左到右移动的相同图像。

有可能吗？

编辑：

我在按钮中添加了一个 UIPanGestureRecognizer，如下所示：

UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(buttonDidDragged:)];
[self.buttonAbout addGestureRecognizer:panGesture];

self.buttonFrame = self.buttonAbout.frame;

我还将按钮框架保存到 CGRect 中。

现在这是 'buttonDidDragged' 方法，但我也有一个问题，按钮似乎向右移动，但图像保持不变。它不会拉伸。

- (IBAction)buttonDidDragged:(UIPanGestureRecognizer*)gesture

    CGPoint translation = [gesture translationInView:self.view];

//    gesture.view.center = CGPointMake(gesture.view.center.x + translation.x, gesture.view.center.y);

    NSLog(@"%f",gesture.view.frame.origin.x + gesture.view.frame.size.width);
    gesture.view.frame = CGRectMake(gesture.view.frame.origin.x,
                                    gesture.view.frame.origin.y,
                                    gesture.view.frame.size.width + translation.x,
                                    gesture.view.frame.size.height);

    UIButton *button = (UIButton*)gesture.view;
    UIImage *buttonImage = [UIImage imageNamed:@"about_us_button.png"];
    buttonImage = [buttonImage resizableImageWithCapInsets:UIEdgeInsetsMake(0, 80, 0, 0)];
    [button setImage:buttonImage forState:UIControlStateNormal];
    [button setImage:buttonImage forState:UIControlStateHighlighted];

    if (gesture.state == UIGestureRecognizerStateEnded)
    
        [UIView animateWithDuration:0.5
                              delay:0
                            options:UIViewAnimationOptionCurveEaseOut
                         animations:^
                             CGPoint finalPoint = CGPointMake(self.buttonFrame.origin.x + (self.buttonFrame.size.width / 2),
                                                              self.buttonFrame.origin.y + (self.buttonFrame.size.height / 2));
//                             gesture.view.center = finalPoint;
                             button.frame = newFrame; // This is where you change the frame of the button to make it stretch.
                          completion:nil];
    


    [gesture setTranslation:CGPointMake(0, 0) inView:self.view];

【问题讨论】：

伙计们，我下班了，但周日第一件事我会检查答案。非常感谢大家！

【参考方案1】：

好主意！是的，这是可能的。您可以拥有三个图像，左、右和中心，中心的一个只有一个像素宽。

您可以在touchesMoved 中调整图像。在那里，您可以根据触摸位置计算必要的拉伸宽度。

使用像

这样的方法很容易拉伸

[UIImage stretchableImageWithLeftCapWidth:topCapHeight]

(UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets 
                          resizingMode:(UIImageResizingMode)resizingMode

【讨论】：

顺便说一句，使用[[UIImage imageNamed:@""] resizableImageWithCapInsets:UIEdgeInsetsMake(topEdge, leftEdge, bottomEdge, rightEdge)]; 方法可以更好地控制如何拉伸图像。

@YossiTsafar：- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight 已弃用。所以使用它是不明智的。如果您需要 ios 5 支持或使用- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode for iOS 6+，请按照@msgambel 的建议进行操作

@msgambel 仍然无法弄清楚如何做到这一点。它行不通。按钮向右滑动，但图像仍然相同。你能告诉我这是为什么吗？

@YossiTsafar，看起来您正在为中心点设置动画，而不是框架本身。如果您增加动画块中按钮图像的宽度，则应该允许图像拉伸。

又改回来了，但什么也没有。我编辑了我的代码，请检查一下。我不知道为什么图像没有拉伸。

【参考方案2】：

这样做， 在.h

CGSize dragViewSize;

那么，

-(IBAction)buttonDidDragged:(UIPanGestureRecognizer*)gesture

    CGPoint translation = [gesture translationInView:self.view];

    if (gesture.state == UIGestureRecognizerStateBegan) 

        dragViewSize = gesture.view.frame.size;

     else if (gesture.state == UIGestureRecognizerStateChanged) 

        CGRect _rect = gesture.view.frame;
        _rect.size.width=dragViewSize.width+translation.x;
        gesture.view.frame = _rect;

    
    else if (gesture.state == UIGestureRecognizerStateEnded) 

    

它工作正常...希望它会帮助你...

【参考方案3】：

正如我在对 Mundi 的评论中所写，- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight 方法已被弃用，因此在任何新开发中使用它都是不明智的。

因此，您应该按照@msgambel 的建议继续使用- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets 以获得iOS 5+ 兼容性，或者更好地使用- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode 以获得iOS 6+ 兼容性。

永远不要使用过时的方法:)

【参考方案4】：

最后，这就是我所做的，而且效果很好。非常感谢大家！

CGPoint translation = [gesture translationInView:self.view];
UIButton *button = (UIButton*)gesture.view;

if (translation.x < kTranslationMaximum && translation.x > kTranslationMinimum)

    self.aboutCenterImage.frame = CGRectMake(self.aboutCenterImage.frame.origin.x,
    self.aboutCenterImage.frame.origin.y,
    translation.x,
    self.aboutCenterImage.frame.size.height);

    gesture.view.frame = CGRectMake(self.aboutCenterImage.frame.origin.x + self.aboutCenterImage.frame.size.width,
    self.aboutCenterImage.frame.origin.y,
    self.buttonAbout.frame.size.width,
    self.aboutCenterImage.frame.size.height);

else if (translation.x > kTranslationMaximum)

    // Push ViewController or do whatever you like to do :)