尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

KYDrawerController Storyboard可视化装配指南:拖2条Segue零代码搞定侧边抽屉

KYDrawerController Storyboard可视化装配指南:拖2条Segue零代码搞定侧边抽屉 KYDrawerController Storyboard可视化装配指南拖2条Segue零代码搞定侧边抽屉【免费下载链接】KYDrawerControllerSide Drawer Navigation Controller similar to Android项目地址: https://gitcode.com/gh_mirrors/ky/KYDrawerController想给 iOS 应用加一个像 Android 那样的侧边抽屉Drawer导航KYDrawerController 是专为 iOS 打造的侧滑抽屉导航容器控制器支持 Storyboard 可视化装配与 AutoLayout。本指南带你用 Xcode 拖拽 2 条 Segue几乎不写一行装配代码就能完成主界面与侧边菜单的绑定新手也能 10 分钟上手。一、KYDrawerController 能帮你做什么KYDrawerController 是一个容器控制器它把 App 分成两层——主内容区MainViewController你日常浏览的页面可以是 NavigationController侧边抽屉DrawerViewController从屏幕左/右侧滑出的菜单栏默认宽度 280pt。它自带这些开箱即用的交互能力说明手势滑动开合从屏幕边缘滑动即可呼出抽屉抽屉打开时反向滑动收起点击遮罩关闭抽屉打开后点击半透明遮罩层自动收回方向可配置drawerDirection支持左侧默认或右侧状态回调通过委托Delegate监听抽屉即将/已经改变的状态纯界面装配Storyboard 模式下无需手写容器接线代码核心实现集中在 KYDrawerController/Classes/KYDrawerController.swift 中两条 Segue 的装配逻辑分别由 KYEmbedDrawerControllerSegue.swift 和 KYEmbedMainControllerSegue.swift 两个轻量类完成。二、最快装配方法4 步可视化流程以下流程以官方 Storyboard 示例工程 Example/Storyboard/Storyboard/Base.lproj/Main.storyboard 为标准参考所有操作都在 Xcode 界面里点选完成。第 1 步把 KYDrawerController 引入工程方式一推荐在 Podfile 中添加依赖后执行pod installpod KYDrawerController方式二手动直接把 KYDrawerController/Classes/ 目录下的 3 个 Swift 源文件拖进工程即可无第三方依赖。第 2 步设置初始控制器为 KYDrawerController打开主 Storyboard选中最左侧的初始 ViewController箭头起点那个打开右侧 Attributes Inspector属性检查器在 Module 中选择你的 Target在Custom Class一栏填入KYDrawerController。这样整个 Storyboard 的根就变成了抽屉容器其他界面都会被它包裹。第 3 步拖出 2 条自定义 Segue核心操作这是零代码装配的关键——你只需要画两条线连接抽屉按住 Ctrl 从初始控制器拖一条线到抽屉界面示例中是 Menu 表格的 NavigationController在弹出的菜单中选择Custom在 Custom Class 中填入KYEmbedDrawerControllerSegue连接主界面同样从初始控制器拖一条线到主内容界面示例中是 MainViewController 的 NavigationControllerCustom Class 填入KYEmbedMainControllerSegue。这两条 Segue 执行时会自动完成drawerViewController和mainViewController属性的赋值相当于替你把 AppDelegate 里的手动装配代码都省掉了。第 4 步在检查器中设置标识符与参数回到初始控制器在 Attributes Inspector 底部找到 Custom Properties自定义属性填写属性示例值作用drawerSegueIdentifierdrawer抽屉 Segue 的 Identifier需与第 3 步中一致mainSegueIdentifiermain主界面 Segue 的 IdentifierdrawerWidth300抽屉宽度ptdrawerDirectionleft/right抽屉滑出方向drawerAnimationDuration0.25开合动画时长秒containerViewMaxAlpha0.2遮罩层最大透明度 提示drawerSegueIdentifier和mainSegueIdentifier必须与你在 Segue Inspector 中给两条线起的 Identifier 完全一致否则抽屉和主界面不会显示。装配完成后直接运行你就会看到一个带侧边菜单的完整 App——全程没有写任何装配代码。三、如何以编程方式打开和关闭抽屉装配是零代码但触发开合通常还需要一行调用。KYDrawerController 对外提供统一的状态切换入口drawerController.setDrawerState(.opened, animated: true)在业务页面中最常见的做法是找到父级抽屉控制器后调用参考 Example/Code/Code/MainViewController.swift 第 41-45 行if let drawerController navigationController?.parent as? KYDrawerController { drawerController.setDrawerState(.opened, animated: true) }除了按钮触发你什么都不用做用户已经可以直接 从屏幕左边缘向右滑动 → 呼出抽屉screenEdgePanGesture默认开启抽屉打开时向左滑动→ 收起抽屉点击遮罩层任意位置 → 自动关闭。如果需要监听开合时机比如关闭抽屉时刷新数据可实现KYDrawerControllerDelegate协议的两个回调willChangeState/didChangeState接口定义见 KYDrawerController.swift 第 25-31 行。四、新手常见问题清单Q1运行后抽屉点不动/不出现99% 是drawerSegueIdentifier或mainSegueIdentifier没有填、或与 Segue 的实际 Identifier 不一致。去两条线的 Segue Inspector 里核对拼写。Q2主界面必须是 NavigationController 吗不强制但强烈建议。抽屉里放菜单栏 NavigationController、主区放业务页 NavigationController是示例工程的标准结构便于各自独立管理导航栈。Q3想让抽屉从右侧滑出怎么改把drawerDirection设为right即可边缘滑动手势会自动跟随切换到右边缘。Q4想用纯代码方式而不是 Storyboard完全可以参考 Example/Code/Code/AppDelegate.swift创建KYDrawerController后分别赋值mainViewController和drawerViewController再设为window.rootViewController即可两种方式效果一致。五、写在最后KYDrawerController 的价值在于把容器接线这件最繁琐的事交给了界面Custom Class 一填、两条 Segue 一拖、Identifier 一对侧边抽屉就跑起来了。配合 LICENSE 的 MIT 协议它可以放心地用于任何商业项目。现在就打开 Xcode用 4 步给你的手机 App 装上 Android 味道的抽屉导航吧【免费下载链接】KYDrawerControllerSide Drawer Navigation Controller similar to Android项目地址: https://gitcode.com/gh_mirrors/ky/KYDrawerController创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表