在Interface Builder中是否有实际*视觉设计*双视​​图（横向+纵向）的方法？

Question

我目前的设计需要在数据的纵向和横向视图之间进行一些很酷的动画。数据表示相当复杂，因此在图形和数据元素之间，屏幕上可能同时有大约30个按钮和标签。我创建了一个设计非常紧密的界面......现在我正在为景观视图布置元素。到目前为止，我发现这样做的唯一方法是在代码中实际布局横向视图，例如：

-(void) positionViews {
    UIInterfaceOrientation destOrientation = self.interfaceOrientation;
    if (destOrientation == UIInterfaceOrientationPortrait || destOrientation == UIInterfaceOrientationPortraitUpsideDown) {
        //---if rotating into PORTRAIT mode
        timeBGbox.frame = CGRectMake(14, 88, 134, 14);
        targetTime.frame = CGRectMake(0, 99, 150, 29);
        energyBGbox.frame = CGRectMake(156, 88, 68, 14);
        targetEnergy.frame = CGRectMake(154, 99, 70, 29);
        speedBGbox.frame = CGRectMake(234, 88, 68, 14);
        targetSpeed.frame = CGRectMake(226, 99, 48, 29);
        speedLabel.frame = CGRectMake(264, 99, 40, 36);
    } else {
        //---if rotating to LANDSCAPE mode
        timeBGbox.frame = CGRectMake(156, 12, 152, 14);
        targetTime.frame = CGRectMake(160, 23, 150, 29);
        energyBGbox.frame = CGRectMake(156, 50, 68, 14);
        targetEnergy.frame = CGRectMake(154, 61, 70, 29);
        speedBGbox.frame = CGRectMake(234, 50, 74, 14);
        targetSpeed.frame = CGRectMake(228, 61, 48, 29);
        speedLabel.frame = CGRectMake(269, 61, 40, 36);
    }
}

这是一个艰苦的过程，需要多次试验来完成我在IB中可以在几秒钟内完成的视觉效果。目前，当我在IB中的视图之间切换，并在横向模式下手动移动元素时，在切换回肖像时，它们位于错误的位置。我尽可能创造性地使用了“弹簧和支柱”，但我的大多数元素都需要超出AutoSizing范围的精确手动放置。

我的问题是： IB中是否存在切换模式，可以使用可视化布局工具开发视图的两个图形布局，还是数字代码是唯一的方法？

Answer 1

您可以在nib文件中创建任意数量的视图。您可以将其中一个称为“纵向视图”（例如，也是连接到文件所有者的“视图”插座的那个），其中一个是“横向视图”。将它们定义为UIViewController类中的出口：

@property (nonatomic, retain) IBOutlet UIView *portraitView;
@property (nonatomic, retain) IBOutlet UIView *landscapeView;

根据您的喜好布置IB中的字段。那么诀窍是你需要在头文件中加倍出口：

@property (nonatomic, retain) IBOutlet UIView *myLabel_portrait;
@property (nonatomic, retain) IBOutlet UIView *myLabel_landscape;

并且在您的代码中，您需要保持两个版本都是最新的。最好是在更新其中一个时更新它们。

然后自动旋转的代码非常简单，只需：

if ( switchingToPortrait)
    self.view = self.portraitView;
else
    self.view = self.landscapeView;

Answer 2

我能想到的最好的方法是拥有两个视图，然后在didRotateFromInterfaceOrientation:中切换它们。

Answer 3

AFAIK在Interface Builder中无法做到这一点。由于视图是从nib文件中实例化的，所以无论如何最终会有两个实例。

如开发人员文档中所述，您可以使用layoutSubviews，或者只是在视图控制器中使用自定义方法，就像您在这里一样。

Answer 4

在界面构建器中创建横向和纵向视图。对于每个方向位置，您的元素就像您想要的那样。如果您对外观感到满意，请将坐标复制到“positionViews”方法中。