如何在接口构建器中向UITableViewController添加导航条?

时间:2023-01-23 17:25:10

Interface builder does not let me click and drag a Navigation Bar onto a Table View Controller!!! It is super frustrating.

界面建设者不让我点击和拖动导航栏到一个表格视图控制器!!!这是非常令人沮丧的。

All I want is a table view with an edit button (done in interface-builder). If this is not possible, then how do I add a navbar progammatically?

我只想要一个带有编辑按钮的表视图(在接口构造器中完成)。如果这是不可能的,那么如何添加导航条?

Thanks in advance.

提前谢谢。

7 个解决方案

#1


41  

From the outline view, make sure your Table View Controller is selected.

从outline视图中,确保选择了表视图控制器。

Then go to the Editor menu, and click on the Embed In submenu, and choose Navigation Controller and voila. You have your navigation controller pointing to your tableview controller with a relationship built in.

然后转到编辑器菜单,单击“嵌入子菜单”,然后选择导航控制器。你有你的导航控制器指向你的tableview控制器,它有一个内建的关系。

#2


17  

For a table view with an edit button at the top, use a UINavigationController, with a UITableView as the rootView. That means you're going to make a custom UITableView subclass for your table view, and use that as the rootView of your UINavigationController instance. (Programatically, it's set with UINavigationController's -(id)initWithRootViewController. It's also settable through IB.)

对于顶部有编辑按钮的表视图,使用UINavigationController,使用UITableView作为rootView。这意味着要为表视图创建一个定制的UITableView子类,并将其用作UINavigationController实例的rootView。(编程上,它是用UINavigationController的-(id)initWithRootViewController设置的。它也可以通过IB设置)

Then, in your UITableView subclass, uncomment the following line:

然后,在UITableView子类中,取消注释如下一行:

- (void)viewDidLoad {
    [super viewDidLoad];
    // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
    self.navigationItem.rightBarButtonItem = self.editButtonItem;
}

and voilà, your UINavigationController's view shows up as a table view with an edit button on the right side of the navigation bar.

瞧,UINavigationController的视图显示为一个表格视图,在导航栏的右边有一个编辑按钮。

Since the controller is at the top of the stack, there's no "back" button on the left, so you can use self.navigationItem.leftBarButtonItem for whatever UIBarButtonItem you create.

由于控制器位于堆栈的顶部,所以在左侧没有“后退”按钮,因此可以使用self.navigationItem。为您创建的任何UIBarButtonItem设置leftBarButtonItem。

#3


10  

I agree that it's difficult to figure out how to do things like this in Interface Builder, but luckily it is possible to add a Navigation Bar and Bar Button Item to a Table View this way. Here's how to do it:

我同意,在接口构建器中很难找到这样做的方法,但幸运的是,可以通过这种方式向表视图添加导航条和栏按钮项。这是如何做到的:

  1. Drag a blank View (an instance of UIView) from the Library to the area near the top of the Table View. As you drag near the target area, Interface Builder will highlight it in blue to show you where to drop the View. Let go, and the View will be added as a subview of the Table View's header view.
  2. 从库中拖出一个空白视图(一个UIView的实例)到表视图顶部附近的区域。当您在目标区域附近拖拽时,接口构建器将用蓝色突出显示它,以显示在何处放置视图。Let go,视图将作为表视图头视图的子视图添加。
  3. Drag a Navigation Bar from the Library and drop it on the blank View you just added.
  4. 从库中拖拽一个导航条,并将其放到刚才添加的空白视图中。
  5. Drag a Bar Button Item from the Library and drop it onto the Navigation Bar.
  6. 从库中拖出一个Bar按钮项并将其拖放到导航栏中。

EDIT

编辑

The problem with the above approach is that, as Bogatyr points out, the Navigation Bar will then scroll along with the Table View. Apple recommends using a custom subclass of UIViewController that owns both the Navigation Bar and an instance of UITableView resized to fit. Unfortunately, that means you would have to implement the UITableViewController behavior needed by your UIViewController subclass yourself.

上述方法的问题在于,正如Bogatyr所指出的,导航条将与Table视图一起滚动。苹果建议使用UIViewController的一个自定义子类,它既拥有导航条,又拥有UITableView的一个实例,该实例被调整为适合的大小。不幸的是,这意味着你必须实现你的UIViewController子类需要的UITableViewController行为。

Another approach that seems to work well is to create a custom subclass of UIViewController that owns a blank background view containing the Navigation Bar as well as a blank content view (an instance of UIView) that fits under the Navigation Bar. Your custom subclass would have an outlet pointing to an instance of UITableViewController in the same nib file.

另一种似乎很有效的方法是创建一个UIViewController的自定义子类,它拥有一个包含导航栏的空白背景视图,以及一个空白内容视图(UIView的一个实例),该视图适用于导航栏。您的自定义子类将有一个outlet指向同一个nib文件中的UITableViewController实例。

This has the advantage of allowing all the view components to be created and configured in Interface Builder, and doesn't require implementing UITableViewController methods from scratch. The only detail you'd need to take care of in the Table View Controller's parent would be to add Table View as a subview of the parent's content view in viewDidLoad.

这样做的好处是允许在接口构建器中创建和配置所有视图组件,并且不需要从头开始实现UITableViewController方法。在表视图控制器的父视图中,您需要处理的惟一细节是在viewDidLoad中将表视图添加为父视图内容视图的子视图。

The parent could implement the action methods for the Navigation Bar's button items, and implement the delegate pattern if necessary.

父类可以为导航条的按钮项实现操作方法,并在必要时实现委托模式。

#4


8  

From iOS6 onwards, you can use container view. So what you have to do is take View controller, add the navigation bar to it, then add a Container View to same view controller. It will automatically, add the new view controller link to your container view. Now simply delete that, and your table view controller in the story board. Now embed the table view controller to container view by control drag. Hope it helps.

从iOS6开始,您可以使用容器视图。所以你要做的是获取视图控制器,添加导航条,然后将容器视图添加到相同的视图控制器中。它将自动添加新的视图控制器链接到您的容器视图。现在简单地删除它,然后您的表视图控制器在故事板中。现在通过control拖动将表视图控制器嵌入到容器视图中。希望它可以帮助。

#5


3  

First add a navigation controller and put the table view controller (as root view controller) onto the navigation controller. This is how it is done in Code because I don't use IB.

首先添加一个导航控制器,并将表视图控制器(作为根视图控制器)放到导航控制器中。这是在代码中实现的方式,因为我不使用IB。

#6


2  

Why in the world you can't drag a navigationItem into a .xib file with File's Owner set to a subclass of UIViewController and hook the navigationItem up to the UIViewController's navigationItem outlet is beyond me. It seems like a real hole in IB / XCode integration. Because you can certainly drag an instance of ViewController to a xib file, and drag a navigationItem into the ViewController, and then set the title and barbuttonitems that way.

为什么在这个世界上你不能把一个navigationItem拖到一个。xib文件中文件的所有者被设置为UIViewController的子类并将navigationItem与UIViewController的navigationItem出口挂钩呢?在IB / XCode集成中,这似乎是一个真正的漏洞。因为您当然可以将一个ViewController实例拖到一个xib文件中,并将一个navigationItem拖到ViewController中,然后以这种方式设置title和barbuttonitems。

So if you want to define your UITableViewController subclass object's navigation bar in IB, you have to create your TableVC object in a xib file (not the one .xib file that contains the tableview for your UITableViewController, though!). You then either hook the TableVC object up to be an outlet of another object (like your application delegate), which works if you need just one instance of your TVC throughout the lifetime of your app, or if you want to dynamically create instances of your TableVC in code you load this extra .xib file manually via loadNibNamed:owner:options method of the NSBundle class.

如果你想在IB中定义你的UITableViewController子类的导航条,你必须在xib文件中创建你的TableVC对象(而不是包含UITableViewController的tableview的。xib文件!)然后要么钩TableVC对象是一个出口的另一个对象(比如应用程序委托),工作如果你只需要一个实例TVC整个应用程序的生命周期,或者如果你想要动态地创建你的TableVC实例代码加载这个额外的.xib文件手动通过loadNibNamed:老板:选项NSBundle类的方法。

#7


0  

These steps worked for me in iOS 9:

在iOS 9中,这些步骤对我起了作用:

  1. Add a View Controller to the Storyboard. Make UITableViewController as base Class.
  2. 向故事板添加视图控制器。使UITableViewController成为基类。
  3. Add a Navigation Bar object onto view controller at the top.
  4. 在顶部的视图控制器上添加一个导航条对象。
  5. Add a Table View below Navigation bar.
  6. 在导航条下面添加一个表格视图。
  7. Add a Table View Cell into Table View.
  8. 将表视图单元格添加到表视图中。
  9. Add constraints.
  10. 添加约束。

#1


41  

From the outline view, make sure your Table View Controller is selected.

从outline视图中,确保选择了表视图控制器。

Then go to the Editor menu, and click on the Embed In submenu, and choose Navigation Controller and voila. You have your navigation controller pointing to your tableview controller with a relationship built in.

然后转到编辑器菜单,单击“嵌入子菜单”,然后选择导航控制器。你有你的导航控制器指向你的tableview控制器,它有一个内建的关系。

#2


17  

For a table view with an edit button at the top, use a UINavigationController, with a UITableView as the rootView. That means you're going to make a custom UITableView subclass for your table view, and use that as the rootView of your UINavigationController instance. (Programatically, it's set with UINavigationController's -(id)initWithRootViewController. It's also settable through IB.)

对于顶部有编辑按钮的表视图,使用UINavigationController,使用UITableView作为rootView。这意味着要为表视图创建一个定制的UITableView子类,并将其用作UINavigationController实例的rootView。(编程上,它是用UINavigationController的-(id)initWithRootViewController设置的。它也可以通过IB设置)

Then, in your UITableView subclass, uncomment the following line:

然后,在UITableView子类中,取消注释如下一行:

- (void)viewDidLoad {
    [super viewDidLoad];
    // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
    self.navigationItem.rightBarButtonItem = self.editButtonItem;
}

and voilà, your UINavigationController's view shows up as a table view with an edit button on the right side of the navigation bar.

瞧,UINavigationController的视图显示为一个表格视图,在导航栏的右边有一个编辑按钮。

Since the controller is at the top of the stack, there's no "back" button on the left, so you can use self.navigationItem.leftBarButtonItem for whatever UIBarButtonItem you create.

由于控制器位于堆栈的顶部,所以在左侧没有“后退”按钮,因此可以使用self.navigationItem。为您创建的任何UIBarButtonItem设置leftBarButtonItem。

#3


10  

I agree that it's difficult to figure out how to do things like this in Interface Builder, but luckily it is possible to add a Navigation Bar and Bar Button Item to a Table View this way. Here's how to do it:

我同意,在接口构建器中很难找到这样做的方法,但幸运的是,可以通过这种方式向表视图添加导航条和栏按钮项。这是如何做到的:

  1. Drag a blank View (an instance of UIView) from the Library to the area near the top of the Table View. As you drag near the target area, Interface Builder will highlight it in blue to show you where to drop the View. Let go, and the View will be added as a subview of the Table View's header view.
  2. 从库中拖出一个空白视图(一个UIView的实例)到表视图顶部附近的区域。当您在目标区域附近拖拽时,接口构建器将用蓝色突出显示它,以显示在何处放置视图。Let go,视图将作为表视图头视图的子视图添加。
  3. Drag a Navigation Bar from the Library and drop it on the blank View you just added.
  4. 从库中拖拽一个导航条,并将其放到刚才添加的空白视图中。
  5. Drag a Bar Button Item from the Library and drop it onto the Navigation Bar.
  6. 从库中拖出一个Bar按钮项并将其拖放到导航栏中。

EDIT

编辑

The problem with the above approach is that, as Bogatyr points out, the Navigation Bar will then scroll along with the Table View. Apple recommends using a custom subclass of UIViewController that owns both the Navigation Bar and an instance of UITableView resized to fit. Unfortunately, that means you would have to implement the UITableViewController behavior needed by your UIViewController subclass yourself.

上述方法的问题在于,正如Bogatyr所指出的,导航条将与Table视图一起滚动。苹果建议使用UIViewController的一个自定义子类,它既拥有导航条,又拥有UITableView的一个实例,该实例被调整为适合的大小。不幸的是,这意味着你必须实现你的UIViewController子类需要的UITableViewController行为。

Another approach that seems to work well is to create a custom subclass of UIViewController that owns a blank background view containing the Navigation Bar as well as a blank content view (an instance of UIView) that fits under the Navigation Bar. Your custom subclass would have an outlet pointing to an instance of UITableViewController in the same nib file.

另一种似乎很有效的方法是创建一个UIViewController的自定义子类,它拥有一个包含导航栏的空白背景视图,以及一个空白内容视图(UIView的一个实例),该视图适用于导航栏。您的自定义子类将有一个outlet指向同一个nib文件中的UITableViewController实例。

This has the advantage of allowing all the view components to be created and configured in Interface Builder, and doesn't require implementing UITableViewController methods from scratch. The only detail you'd need to take care of in the Table View Controller's parent would be to add Table View as a subview of the parent's content view in viewDidLoad.

这样做的好处是允许在接口构建器中创建和配置所有视图组件,并且不需要从头开始实现UITableViewController方法。在表视图控制器的父视图中,您需要处理的惟一细节是在viewDidLoad中将表视图添加为父视图内容视图的子视图。

The parent could implement the action methods for the Navigation Bar's button items, and implement the delegate pattern if necessary.

父类可以为导航条的按钮项实现操作方法,并在必要时实现委托模式。

#4


8  

From iOS6 onwards, you can use container view. So what you have to do is take View controller, add the navigation bar to it, then add a Container View to same view controller. It will automatically, add the new view controller link to your container view. Now simply delete that, and your table view controller in the story board. Now embed the table view controller to container view by control drag. Hope it helps.

从iOS6开始,您可以使用容器视图。所以你要做的是获取视图控制器,添加导航条,然后将容器视图添加到相同的视图控制器中。它将自动添加新的视图控制器链接到您的容器视图。现在简单地删除它,然后您的表视图控制器在故事板中。现在通过control拖动将表视图控制器嵌入到容器视图中。希望它可以帮助。

#5


3  

First add a navigation controller and put the table view controller (as root view controller) onto the navigation controller. This is how it is done in Code because I don't use IB.

首先添加一个导航控制器,并将表视图控制器(作为根视图控制器)放到导航控制器中。这是在代码中实现的方式,因为我不使用IB。

#6


2  

Why in the world you can't drag a navigationItem into a .xib file with File's Owner set to a subclass of UIViewController and hook the navigationItem up to the UIViewController's navigationItem outlet is beyond me. It seems like a real hole in IB / XCode integration. Because you can certainly drag an instance of ViewController to a xib file, and drag a navigationItem into the ViewController, and then set the title and barbuttonitems that way.

为什么在这个世界上你不能把一个navigationItem拖到一个。xib文件中文件的所有者被设置为UIViewController的子类并将navigationItem与UIViewController的navigationItem出口挂钩呢?在IB / XCode集成中,这似乎是一个真正的漏洞。因为您当然可以将一个ViewController实例拖到一个xib文件中,并将一个navigationItem拖到ViewController中,然后以这种方式设置title和barbuttonitems。

So if you want to define your UITableViewController subclass object's navigation bar in IB, you have to create your TableVC object in a xib file (not the one .xib file that contains the tableview for your UITableViewController, though!). You then either hook the TableVC object up to be an outlet of another object (like your application delegate), which works if you need just one instance of your TVC throughout the lifetime of your app, or if you want to dynamically create instances of your TableVC in code you load this extra .xib file manually via loadNibNamed:owner:options method of the NSBundle class.

如果你想在IB中定义你的UITableViewController子类的导航条,你必须在xib文件中创建你的TableVC对象(而不是包含UITableViewController的tableview的。xib文件!)然后要么钩TableVC对象是一个出口的另一个对象(比如应用程序委托),工作如果你只需要一个实例TVC整个应用程序的生命周期,或者如果你想要动态地创建你的TableVC实例代码加载这个额外的.xib文件手动通过loadNibNamed:老板:选项NSBundle类的方法。

#7


0  

These steps worked for me in iOS 9:

在iOS 9中,这些步骤对我起了作用:

  1. Add a View Controller to the Storyboard. Make UITableViewController as base Class.
  2. 向故事板添加视图控制器。使UITableViewController成为基类。
  3. Add a Navigation Bar object onto view controller at the top.
  4. 在顶部的视图控制器上添加一个导航条对象。
  5. Add a Table View below Navigation bar.
  6. 在导航条下面添加一个表格视图。
  7. Add a Table View Cell into Table View.
  8. 将表视图单元格添加到表视图中。
  9. Add constraints.
  10. 添加约束。