如何使用按钮动画实现自动布局

Posted 2023-03-11

【中文标题】如何使用按钮动画实现自动布局

【英文标题】：How to implement Auto Layout with Button Animations

【发布时间】：2017-01-30 19:22:37

【问题描述】：

我有一个以编程方式在屏幕上向上移动三个按钮的动画。但是，当我在 iPhone 6 或 4 的模拟器上对其进行测试时，按钮的位置都是错误的（但仅在 iPhone 5 上是正确的）。我该如何解决。这些按钮是以编程方式构建的，所以我不能真正使用自动布局将它们定位在视图控制器上。

 -(IBAction)Search:(id)sender 

self.button.frame = CGRectMake(124, 475, 78, 72);

self.buttonTwo.frame = CGRectMake(124, 475, 78, 76);

self.buttonThree.frame = CGRectMake(124, 475, 78, 76);

// animate
[UIView animateWithDuration:0.75 animations:^
    self.button.frame = CGRectMake(13, 403, 78, 72);
    self.buttonTwo.frame = CGRectMake(124, 347, 78, 76);
    self.buttonThree.frame = CGRectMake(232, 403, 78, 76);

【问题讨论】：

为什么不能使用自动布局？即使以编程方式创建，您仍然可以定位它们。你可以创建 NSLayoutConstraints 的实例。

【参考方案1】：

您正在为框架使用固定值，但屏幕的宽度和/或高度不同。

如果它们适用于 iPhone 5-5s（也称为 iPhone 4"），那么处理它的一种方法是：

-(IBAction)Search:(id)sender 

CGFloat screenWidth = self.view.bounds.size.width;
CGFloat screenHeight = self.view.bounds.size.height;

CGFloat normalizedX = (124 / 320) // You calculate these 'normalized' numbers, possibly from a designer's spec. 
                                  // it's the percent the amount should be over, as number from 0-1. 
                                  // This number is based on screen width of 320 having x 124 pt. 

CGFloat startingX = normalizedX * screenWidth;
CGFloat startingY = (475 / 588) * screenHeight;
CGFloat width = (78 / 320) * screenWidth;
CGFloat height = (72 / 588) * screenHeight;

CGRect startingRect = CGRectMake(startingX, startingY, width, height)

self.button.frame = startingRect;
self.buttonTwo.frame = startingRect;
self.buttonThree.frame = startingRect;

// animate
[UIView animateWithDuration:0.75 animations:^
    CGFloat firstX = (13 / 320) * screenWidth;
    CGFloat lowerY = (403 / 588) * screenHeight;
    self.button.frame = CGRectMake(firstX, lowerY, width, height);

    CGFloat secondX = (124 / 320) * screenWidth;
    CGFloat upperY = (347 / 588) * screenHeight;
    self.buttonTwo.frame = CGRectMake(secondX, upperY, width, height);

    CGFloat thirdX = (233 / 320) * ScreenWidth;
    self.buttonThree.frame = CGRectMake(thirdX, lowerY, width, height);
];

这将放大所有内容的大小并保持相对位置。注意 UIButtons 将具有相同的文本大小。你可以玩这些数字，直到你得到你想要的效果。希望这会有所帮助！

【讨论】：

我在 Objective-C 中需要这个。谢谢！

是相同的代码，只是语法稍有变化。完成。