旋转设备时,动画uiview会切换回原始状态

Tom*_*Tom 1 layout animation rotation uiview ios

我尝试在IOS7下制作一个小动画.我的视图控制器有2个视图:tableview和mapview.我有一个按钮,可以在"显示地图全屏"和"显示地图和桌面视图"状态之间切换.

这是我的实验代码:

float mapNewX =  self.mapView.frame.origin.x == 0 ? 375 : 0;
float mapNewWidth = mapNewX == 0 ? self.view.frame.size.width : self.view.frame.size.width - mapNewX;

[UIView animateKeyframesWithDuration:0.1 delay:0.0 options:UIViewAnimationCurveEaseOut animations:^
 {
     CGRect mapViewFrame = self.mapView.frame;
     mapViewFrame.origin.x = (mapNewX);
     mapViewFrame.size.width = mapNewWidth;
     self.mapView.frame = mapViewFrame;
 }
completion:^(BOOL finished)
 {
     NSLog(@"OK");
 }];
Run Code Online (Sandbox Code Playgroud)

它可以工作,但是当我旋转设备时,它会切换回原始状态.因此,当我有完整的地图显示时,当旋转设备时,它会切换回屏幕上的tableview + mapview.

如果我通过导航控制器从另一个视图控制器返回,也会发生同样的情况.如果我点击地图引脚的详细信息,它会切换回原始布局.

我该怎么办?非常感谢!

更新:这里是旋转之前/之后的屏幕截图(一些敏感数据被屏蔽掉)

在此输入图像描述

在此输入图像描述

vok*_*lam 6

如果旋转或屏幕导航后您宽松框架的变化,它可能涉及到浏览器的布局方法viewWillLayoutSubviews,viewDidLayoutSubviews或生命周期方法viewWillAppear:,viewDidAppear:.如果覆盖它们,请检查这些方法的实现.

因为您使用自动布局,所以最好为其约束而不是帧设置动画.

据我所知,你的任务是移动地图的左侧以显示下面的桌面视图(打开/关闭状态).使用自动布局,您的屏幕可能看起来像这样简单:

在此输入图像描述

(UIImageView视图扮演地图的角色)

UITableView 限制

  • 恒定宽度约束
  • top,leading和bottom space将superview约束设置为零

UIImageView 限制

  • top,bottom和trailing空间将superview约束设置为零
  • 超前视图的前导空间设置为表格宽度(打开状态,为此约束设置动画)

为了实现期望的效果,我们需要将前导空间设置为超视图约束(在屏幕截图上选择).我们为此约束创建了一个出口,并将其constant属性更改为打开/关闭状态.

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *mapLeadingSpace;
Run Code Online (Sandbox Code Playgroud)

在菜单显示在屏幕上之前设置菜单的初始状态.我们设置了默认值,但您可以从中恢复适当的布尔值设置NSUserDefaults.

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];

    self.mapLeadingSpace.constant = 0; // default is closed
}
Run Code Online (Sandbox Code Playgroud)

接下来,按下按钮上的切换动画.

- (IBAction)toggle:(id)sender
{
    self.mapLeadingSpace.constant = self.mapLeadingSpace.constant == 0
        ? self.tableView.frame.size.width    // opened
        : 0;                                 // closed

    [UIView animateWithDuration:.2 animations:^{
        [self.imageView layoutIfNeeded];
    }];
}
Run Code Online (Sandbox Code Playgroud)