有没有一种方法可以在 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 中的视图之间切换并在横向模式下手动移动元素时，切换回纵向模式后，它们位于错误的位置。我尽可能创造性地使用了“弹簧和支柱”，但我的大多数元素都需要精确的手动放置，超出了自动调整尺寸的范围。

我的问题是： 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”方法中。