MaterialKit 侧滑抽屉完整指南MKSideDrawerViewController Segue如何 2 步搭建可拖拽的 Material 侧边栏【免费下载链接】MaterialKitMaterial design components for iOS written in Swift项目地址: https://gitcode.com/gh_mirrors/ma/MaterialKitMaterialKit 是一个用 Swift 编写的 iOS 版 Material Design 组件库其中的MKSideDrawerViewController提供了一套开箱即用的侧滑抽屉容器支持屏幕边缘滑出、手指跟随拖拽、点击遮罩关闭。本文以零代码基础也能看懂的方式带你在 Storyboard 中通过2 个 Segue完成接线再配上汉堡按钮就能得到一个可拖拽的 Material 风格侧边栏。 先看功能它能做什么在看搭建步骤之前先了解 MKSideDrawerViewController.swift 内置的能力能力说明️ 边缘手势滑出手指从屏幕左/右边缘向内滑动即可拉出抽屉可一键关闭 手指跟随拖拽抽屉打开后按住拖动松手后自动吸附到开/关状态 点击遮罩关闭抽屉打开时背景变暗点一下空白区即收起↔️ 左右方向切换通过drawerDirection切换抽屉从左侧还是右侧滑出 宽度可调drawerWidth默认 240pt支持在 Storyboard 中直接改 状态回调实现MKSideDrawerControllerDelegate监听开/关事件 这个组件的设计参考了经典的 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 完成接线这是整个搭建过程的核心全程拖拽操作不写一行代码替换根控制器把 Storyboard 的初始 ViewController 的 Class 改为MKSideDrawerViewControllerCustom Class 填类名Module 填MaterialKit接入主内容拖入你的主界面比如一个 Navigation Controller按住Control从抽屉控制器拖出连接选Custom类型Class 填MKEmbedMainControllerSegue把 Identifier 设为main接入抽屉再拖入一个普通 ViewController 作为侧边栏内容同样用CustomSegueClass 填MKEmbedDrawerControllerSegueIdentifier 设为drawer绑定标识符选中抽屉控制器在 Attribute Inspector 的 User Defined Runtime Attributes 中填入mainSegueIdentifiermaindrawerSegueIdentifierdrawer两个 Segue 的分工其实一目了然MKEmbedMainControllerSegue.swift把 Segue 目标设为主内容mainViewControllerMKEmbedDrawerControllerSegue.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-L28toggleDrawer()负责切换开/关见 Source/MKSideDrawerViewController.swift#L317-L321也可以调用setDrawerState(_:animated:)指定明确状态。到这里一个可拖拽的 Material 侧边栏就搭好了 ✅ 屏幕边缘滑出、手指拖拽、遮罩点击关闭全部自动生效。⚙️ 关键参数速查表属性默认值作用出处drawerWidth240抽屉宽度IBInspectable可在 Storyboard 改L119-L121drawerDirection.Left抽屉方向.Left/.RightL103-L112screenEdgePanGestreEnabledtrue是否启用边缘滑动手势L77delegate—监听抽屉开/关状态变化L30-L32mainViewController—主内容控制器可随时替换L123-L153 实用技巧与常见问题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主内容 SegueSource/MKEmbedMainControllerSegue.swift抽屉内容 SegueSource/MKEmbedDrawerControllerSegue.swift示例 Storyboard2 步接线的完整参考Example/MaterialKit/Base.lproj/Main.storyboard示例入口汉堡按钮开关Example/MaterialKit/ViewController.swift组件总览与安装说明README.md✅ 小结用 MaterialKit 搭侧滑抽屉的完整流程只有两步Storyboard 接线——一个MKSideDrawerViewController 两条 Custom SegueMKEmbedMainControllerSegue/MKEmbedDrawerControllerSegue汉堡按钮开关——子页面里通过sideDrawerViewController?.toggleDrawer()一行搞定。边缘滑出、拖拽跟随、遮罩关闭、方向切换全部内置剩下的就是设计你的抽屉内容了 【免费下载链接】MaterialKitMaterial design components for iOS written in Swift项目地址: https://gitcode.com/gh_mirrors/ma/MaterialKit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考