MaterialKit 侧滑抽屉完整指南：MKSideDrawerViewController + Segue，如何 2 步搭建可拖拽的 Material 侧边栏

【免费下载链接】MaterialKitMaterial design components for iOS written in Swift项目地址: https://gitcode.com/gh_mirrors/ma/MaterialKit

MaterialKit 是一个用 Swift 编写的 iOS 版 Material Design 组件库，其中的MKSideDrawerViewController提供了一套开箱即用的侧滑抽屉容器：支持屏幕边缘滑出、手指跟随拖拽、点击遮罩关闭。本文以零代码基础也能看懂的方式，带你在 Storyboard 中通过2 个 Segue完成接线，再配上汉堡按钮，就能得到一个可拖拽的 Material 风格侧边栏。

🧭 先看功能：它能做什么

在看搭建步骤之前，先了解 MKSideDrawerViewController.swift 内置的能力：

💡 这个组件的设计参考了经典的 KYDrawerController，代码里也标注了出处（见文件头部注释 Source/MKSideDrawerViewController.swift#L8）。

📦 第 0 步：把 MaterialKit 装进项目

两种任选其一：

• CocoaPods：在 Podfile 中添加pod 'MaterialKit', '0.4'后安装。组件源码统一位于 Source/ 目录，由 MaterialKit.podspec#L17 指定；
• 直接拷贝：把Source/下的 Swift 文件拖进自己的工程即可。

环境要求：iOS 8.0+（见 MaterialKit.podspec#L14）。

🛠 第 1 步：Storyboard 中用 2 个 Segue 完成接线

这是整个搭建过程的核心，全程拖拽操作，不写一行代码：

1. 替换根控制器：把 Storyboard 的初始 ViewController 的 Class 改为MKSideDrawerViewController（Custom Class 填类名，Module 填MaterialKit）；
2. 接入主内容：拖入你的主界面（比如一个 Navigation Controller），按住Control从抽屉控制器拖出连接，选Custom类型，Class 填MKEmbedMainControllerSegue，把 Identifier 设为main；
3. 接入抽屉：再拖入一个普通 ViewController 作为侧边栏内容，同样用CustomSegue，Class 填MKEmbedDrawerControllerSegue，Identifier 设为drawer；
4. 绑定标识符：选中抽屉控制器，在 Attribute Inspector 的 User Defined Runtime Attributes 中填入：
   • mainSegueIdentifier=main
   • drawerSegueIdentifier=drawer

两个 Segue 的"分工"其实一目了然：

• MKEmbedMainControllerSegue.swift：把 Segue 目标设为主内容（mainViewController）；
• MKEmbedDrawerControllerSegue.swift：把 Segue 目标设为抽屉内容（drawerViewController）。

抽屉控制器加载视图时会自动读取这两个标识符并完成内嵌（见 Source/MKSideDrawerViewController.swift#L252-L257）。官方示例工程里完整的接线方式可以参考 Example/MaterialKit/Base.lproj/Main.storyboard#L22-L29。

🍔 第 2 步：汉堡按钮一键开关 + 边缘滑动

接线完成后抽屉已经能用了（边缘滑动即可打开），最后给主界面加一个导航栏汉堡按钮。MaterialKit 的示例代码里用的是自带水波纹的MKButton（见 Example/MaterialKit/ViewController.swift#L13-L27），核心逻辑只有两行：

func toggleDrawer() { if let sideDrawerViewController = self.sideDrawerViewController { sideDrawerViewController.toggleDrawer() } }

这里有两个小设计值得一提：

• sideDrawerViewController是便捷属性：它在父控制器链上逐级向上查找，任何子页面都能直接拿到抽屉容器（实现见 Source/MKSideDrawerViewController.swift#L12-L28）；
• toggleDrawer()负责切换开/关（见 Source/MKSideDrawerViewController.swift#L317-L321），也可以调用setDrawerState(_:animated:)指定明确状态。

到这里，一个可拖拽的 Material 侧边栏就搭好了 ✅ 屏幕边缘滑出、手指拖拽、遮罩点击关闭全部自动生效。

⚙️ 关键参数速查表

💡 实用技巧与常见问题

1️⃣ 想在抽屉打开/关闭时做点什么？实现MKSideDrawerControllerDelegate协议，在动画结束时你会收到回调，比如刷新数据、隐藏浮层：

func drawerController(_ drawerController: MKSideDrawerViewController, stateChanged state: MKSideDrawerViewController.DrawerState)

2️⃣ 边缘滑动和列表左右滑动手势冲突？抽屉已做了手势仲裁：抽屉关闭时只响应边缘手势，打开后才响应拖拽关闭（见 Source/MKSideDrawerViewController.swift#L392-L401）。若与个别控件仍冲突，可设screenEdgePanGestreEnabled = false关闭边缘滑出。

3️⃣ 想换成右侧抽屉？把drawerDirection改为.Right，边缘手势会自动切到右边，约束方向也同步调整（见 L103-L112）。

4️⃣ 主内容想整体换掉？除了静态 Segue，还可以运行时调用transitionFromMainViewController(_:duration:options:animations:completion:)做带动画的内容切换（见 L297-L315）。

📚 相关文件参考

• 抽屉容器主类：Source/MKSideDrawerViewController.swift
• 主内容 Segue：Source/MKEmbedMainControllerSegue.swift
• 抽屉内容 Segue：Source/MKEmbedDrawerControllerSegue.swift
• 示例 Storyboard（2 步接线的完整参考）：Example/MaterialKit/Base.lproj/Main.storyboard
• 示例入口（汉堡按钮开关）：Example/MaterialKit/ViewController.swift
• 组件总览与安装说明：README.md

✅ 小结

用 MaterialKit 搭侧滑抽屉的完整流程只有两步：

1. Storyboard 接线——一个MKSideDrawerViewController+ 两条 Custom Segue（MKEmbedMainControllerSegue/MKEmbedDrawerControllerSegue）；
2. 汉堡按钮开关——子页面里通过sideDrawerViewController?.toggleDrawer()一行搞定。

边缘滑出、拖拽跟随、遮罩关闭、方向切换全部内置，剩下的就是设计你的抽屉内容了 🎉

【免费下载链接】MaterialKitMaterial design components for iOS written in Swift项目地址: https://gitcode.com/gh_mirrors/ma/MaterialKit