ios 带有 Storyboard 的自定义视图

Custom views with Storyboard

提问by znq

In complex screens (View Controllers) I used to separate the whole thing in smaller pieces (I call them widgets). These widgets consist basically of a MyWidget.hand a MyWidget.mfile as well as a MyWidget.xibfile, where the root element is a UIViewand the MyWidget class is the File Owner of the UIView. In the init of this widget I do a loadNibNamed.

在复杂的屏幕（视图控制器）中，我曾经将整个事物分成较小的部分（我称之为小部件）。这些小部件基本上由一个MyWidget.h和一个MyWidget.m文件以及一个MyWidget.xib文件组成，其中根元素是一个UIView，而 MyWidget 类是 UIView 的文件所有者。在这个小部件的初始化中，我做了一个loadNibNamed.

In my View Controller I then do a [[MyWidget alloc] init], which I add to View's Controller main view as a sub view. This, so far, works perfectly.

在我的视图控制器中，我做了一个[[MyWidget alloc] init]，我将它作为子视图添加到视图的控制器主视图中。到目前为止，这完美地工作。

I'm now wondering, how to do the same with storyboard, because I cannot really start to drag in a UIViewsomewhere, I always have to start with an UIViewController, which I don't want to.

我现在想知道，如何对故事板做同样的事情，因为我无法真正开始拖入UIView某个地方，我总是必须从一个 开始UIViewController，我不想这样做。

If there is no possible way doing this with a Storyboard, can I simply do it the old way, by using the Storyboard for my main screens and segues, and use a separate .xib file to define custom views?

如果使用 Storyboard 无法做到这一点，我是否可以简单地按照旧方式进行操作，将 Storyboard 用于我的主屏幕和 segue，并使用单独的 .xib 文件来定义自定义视图？

回答by nioq

Putting the widget/view in a separate .xib file works, and is appropriate especially if you might want to reference that same view from multiple View Controllers.

将小部件/视图放在单独的 .xib 文件中是可行的，特别是如果您可能想从多个视图控制器引用同一个视图。

However, sometimes you do want to see the additional view/widget within the same storyboard, and it is possible. Here's how you do it:

但是，有时您确实希望在同一个故事板中看到额外的视图/小部件，这是可能的。这是你如何做到的：

1. Select your view controller in IB (click on the black bar below the view), then drag a UIView from the Object Library into the black bar:

   

2. When a view is in the black bar, it's instantiated like any other view in IB but just isn't added to your view hierarchy until you do so in code. Change the view's class to match your own subclass if necessary:

   

3. You can hook it up to your view controller like you would hook up any other view:

4. The added view shows up in your Document Outline and you can hook up actions and references there too:

   

1. 在 IB 中选择您的视图控制器（单击视图下方的黑条），然后将一个 UIView 从对象库拖到黑条中：

   

2. 当一个视图位于黑条中时，它会像 IB 中的任何其他视图一样被实例化，但不会添加到您的视图层次结构中，直到您在代码中这样做。如有必要，更改视图的类以匹配您自己的子类：

   

3. 您可以将它连接到您的视图控制器，就像连接任何其他视图一样：

4. 添加的视图显示在您的文档大纲中，您也可以在那里连接操作和引用：

   

---

---

Now, the problem that remains is that you can't actually see the view no matter how many times you try to click or double click, which would defeat the whole purpose of putting it in the same storyboard. Fortunately there are two workarounds that I know of.

现在，仍然存在的问题是，无论您尝试单击或双击多少次，您实际上都无法看到视图，这将破坏将其放入同一个故事板的全部目的。幸运的是，我知道有两种解决方法。

The first workaround is to drag the view from the black bar back into your view controller's view, edit it, then drag it back into the black bar once you're done. This is troublesome but reliable.

第一个解决方法是将视图从黑条拖回视图控制器的视图中，编辑它，然后在完成后将其拖回黑条。这很麻烦但很可靠。

The other workaround is more finicky, but I prefer it because it lets me see all my views at the same time:

另一种解决方法更挑剔，但我更喜欢它，因为它可以让我同时看到我的所有视图：

1. Drag a UITableView from the Object Library into your newly added view.

2. Then drag a UITableViewCell into that UITableView.

   

3. Once you do that, your view pops out magically by the side, but you have a UITableView that you don't want. You can either resize that to 0x0, or you can delete it and your UIView will (usually) still stay visible.

4. Occasionally the secondary view will become hidden again in IB. You can repeat the above steps if you deleted the UITableView, or if the UITableView is still in the hierarchy you just need to click on the UITableViewCell and the view will appear again.

1. 将 UITableView 从对象库拖到新添加的视图中。

2. 然后将 UITableViewCell 拖入该 UITableView。

   

3. 一旦你这样做了，你的视图就会神奇地从旁边弹出，但是你有一个你不想要的 UITableView 。您可以将其调整为 0x0，也可以将其删除，并且您的 UIView 将（通常）仍然可见。

4. 有时，次要视图将再次隐藏在 IB 中。如果您删除了 UITableView，或者 UITableView 仍在层次结构中，您可以重复上述步骤，您只需要单击 UITableViewCell 并且视图将再次出现。

The second method works for UIViews but not so well for UIToolbars and is impossible for UIButtons, so the cleanest solution I've found when you need to include lots of different subviews is to attach a single secondary UIView to your view controller as a container that never gets shown, put all your secondary views in there, and use the UITableViewCell trick to make everything visible. I resize my dummy UITableView to 0x0 to make that invisible. Here's a screenshot of how it all looks like together:

第二种方法适用于 UIViews，但不适用于 UIToolbars 并且不适用于 UIButtons，因此当您需要包含许多不同的子视图时，我找到的最干净的解决方案是将单个辅助 UIView 作为容器附加到您的视图控制器永远不会显示，将所有辅助视图放在那里，并使用 UITableViewCell 技巧使所有内容都可见。我将我的虚拟 UITableView 调整为 0x0 以使其不可见。这是所有内容组合在一起的屏幕截图：

回答by tipycalFlow

If you're just looking to make your view controllers else-where(and not in your story-board), then there's a pretty simple way to accomplish this:

如果你只是想让你的视图控制器在其他地方（而不是在你的故事板中），那么有一个非常简单的方法来完成这个：

1) Create your CustomViewControllers(abcdControllerin the code I tried) with their individual xibs as usual.

1）像往常一样用他们的个人s创建你的CustomViewControllers（abcdController在我试过的代码中）xib。

2) Add a UIViewController(or whatever was the superclass of your CustomViewController) to the story-board.

2)向故事板添加一个UIViewController（或任何你的超类CustomViewController）。

3) Set the CustomClass to CustomViewControllerinstead of UIViewControlleras shown here:

3) 将 CustomClass 设置为CustomViewController而不是UIViewController如下所示：

4) Finally, in your viewDidLoad, load the custom xiband you're done.

4) 最后，在你的viewDidLoad，加载自定义xib，你就完成了。

- (void)viewDidLoad
{
    [super viewDidLoad];
    [[NSBundle mainBundle] loadNibNamed:@"abcdController" owner:self options:nil];
    // Do any additional setup after loading the view from its nib.
}

回答by vijay_hrd

I think you can do something like this to get instance of specific viewcontroller from Storyboard and use view on top of it.

我认为你可以做这样的事情来从 Storyboard 获取特定视图控制器的实例并在它上面使用视图。

ex:
MyViewController* myViewController = [[UIStoryboard storyboardWithName:@"Main"  bundle:nil] instantiateViewControllerWithIdentifier:@"myViewController"];
UIView* view = myViewController.view; //Get the view from your StoryBoard.

Hope this helps

希望这可以帮助

Thanks Vijay

谢谢维杰