使用Xcode,Swift滑出菜单。

  • 返回Main.storyboard,然后将导航栏按钮项拖到导航栏的左上方:
  • 让我们给导航栏添加一个标题,转到Attributes Inspector并为您命名任意标题,在这种情况下,我将其命名为Slide Out Menu。
  • 接下来,我将更改背景色,以便您可以在点击“滑动菜单”时注意到它。 您可以将颜色更改为自己喜欢的任何颜色,或者将其添加到另一个项目中,只需按原样保留颜色即可(在以下步骤中将了解原因)。 要更改背景颜色,请选择“ 视图”,然后转到“ 属性”检查器,然后选择“ 背景”以更改颜色。 到目前为止,它应该是这样:
  • 由于我们希望用户能够点击“菜单”图标,因此我们需要调出一个可以与其交互的视图 。 接下来,我们将放置对象库中视图 并将其放置在左侧导航栏的下方,如下所示:
  • 现在,让我们在刚创建的视图上设置一些约束
  • 我们还可以通过转到视图的“ 属性”检查器并单击“ 背景”来更改视图的颜色 随便更改颜色。 就我而言,我选择了较深的颜色,因此在视觉上对用户有吸引力。
  • 现在从对象库中拖动一个按钮 ,并将其放在我们刚刚创建的侧视图中。 PROtip-您可以添加任意数量的按钮,并且每个按钮都需要一个不同的ViewController(DUH!自我说明)。
  • 不要忘记为所有按钮添加约束
  • 是时候弄脏我们的双手了! 让我们添加一些代码,以便我们的用户可以与我们刚创建的所有内容进行交互! 听起来很有趣吧?! 好吧放手,转到您的ViewController.swift文件,并使用Control-drag选项并创建IBOutlet来连接侧面View的主要约束,如下所示:
  • 让我们通过选择图标(在我的情况下是“汉堡菜单”图标)并将其拖动到“助理编辑器”中,为“ 条形按钮项”添加动作:
  • 现在,我们创建一个变量来跟踪是否显示或不显示“滑出菜单”: var menuShowing = false (第13行)
  • 在上图中,我们将菜单设置为在点击时显示,而在用户再次点击菜单图标时不显示。 现在,让我们变得更加时髦,并向“滑出菜单”添加动画:

这是滑出菜单的视频!