PagingKit 三步上手:自定义菜单分页控件+避坑清单

发布时间:2026/8/24 10:45:16
PagingKit 三步上手:自定义菜单分页控件+避坑清单 PagingKit 三步上手自定义菜单分页控件避坑清单【免费下载链接】PagingKitPagingKit provides customizable menu UI. It has more flexible layout and design than the other libraries.项目地址: https://gitcode.com/gh_mirrors/pa/PagingKitPagingKit 是一款可定制的 iOS 分页控件库它只管“菜单与内容双向同步”这一件事把布局排布和样式设计完全留给你。只要实现数据源并注册好单元格与焦点视图就能搭出任意形态的菜单。 从一个痛点说起布局对不上的分页页设计给你画了一个 Tab 页焦点位置要自定义动画菜单高度和内容区要自由排布右侧还得加个悬浮按钮。可UIPageViewController等通用分页方案给的是成品布局对不上设计就只能重写整个 controller 或者换组件想换焦点动画也得连界面一起改。PagingKit 的思路一句话行为归库界面归你。菜单和内容是两条独立线——PagingMenuViewController管菜单项与焦点视图PagingContentViewController管页面横滑两者通过数据源和代理协议接起来菜单嵌在哪、长什么样都由你定。 接入三种主流方式环境要求iOS 9.0、Xcode 11、Swift 5.1。CocoaPodsPodfile 加依赖执行pod install后打开生成的 .xcworkspaceuse_frameworks! pod PagingKitSPMXcode 里 File Add Package Dependencies仓库地址填下面第 3 条 clone 用的同一地址选中PagingKit产品即可。CarthageCartfile 里登记 PagingKitcarthage update后把产物 framework 链进工程并加一条 copy-frameworks run script。想直接看示例工作区的话clone 一下git clone https://gitcode.com/gh_mirrors/pa/PagingKit一个最小可跑示例下面是纯代码版、不依赖 Storyboard 的接入骨架四行数据源方法和两个代理方法从简完整版见 iOS Sample/iOS Sample/SimpleViewController.swiftimport PagingKit class PagingDemo: UIViewController { let menuVC PagingMenuViewController() // ← 菜单半边 let contentVC PagingContentViewController() // ← 内容半边 override func viewDidLoad() { super.viewDidLoad() menuVC.register(type: TitleLabelMenuViewCell.self, forCellWithReuseIdentifier: cell) // ← 内置文字 cell menuVC.registerFocusView(view: UnderlineFocusView()) // ← 内置下划线焦点视图 menuVC.dataSource self; menuVC.delegate self contentVC.dataSource self; contentVC.delegate self addChild(menuVC); view.addSubview(menuVC.view); menuVC.didMove(toParent: self) addChild(contentVC); view.addSubview(contentVC.view); contentVC.didMove(toParent: self) menuVC.reloadData(); contentVC.reloadData() } } 四个核心能力拆解菜单单元格样式怎么换菜单项都是PagingMenuViewCell的子类注册流程和UITableViewCell一样选中态改样式靠重写isSelectedmenuVC.register(type: YourCell.self, forCellWithReuseIdentifier: cell)胶囊标签风格的菜单可以参考 TagMenuCell.swift。焦点视图动画怎么换焦点视图是PagingMenuFocusView子类注册 API 自带isBehindCell参数控制焦点视图画在单元格前层还是后层menuVC.registerFocusView(view: yourFocus, isBehindCell: true)“单元格抬起压住焦点条”的效果就是这么来的焦点视图垫底cell 盖在上面。完整实现看 OverlayViewController.swift。菜单和内容双向同步怎么做只有两个代理回调各喂一次滚动给对面点菜单 →contentVC.scroll(to:animated:)内容区横滑 →menuVC.scroll(index:percent:animated:)其中percent是滑动进度焦点视图因此能跟着手指走。布局怎么调cell 总宽不足屏幕时cellAlignment决定左对齐还是居中contentVC.scrollView是公开的UIScrollViewisScrollEnabled、bounces、delaysContentTouches都能直接改不需要动库的代码。![PagingKit 分页控件示例内容页效果](https://raw.gitcode.com/gh_mirrors/pa/PagingKit/raw/d44f420cabf11b6f9cbbad7c9dda307c9d440df0/iOS Sample/iOS Sample/Assets.xcassets/Photo1.imageset/37274950864_b36306a36c_o.jpg?utm_sourcegitcode_repo_files)三个实际组合方案菜单嵌进导航栏。不用PagingMenuViewController直接new一个PagingMenuView它本身是 UIView赋给navigationItem.titleView内容区照旧用PagingContentViewController。写法见 NavigationBarViewController.swift。不写 Storyboard 纯代码初始化。两个控制器就是普通UIViewControlleraddChild加 Auto Layout 约束即可示例里展示了完整约束写法InitializingWithoutStoryboardViewController.swift。焦点视图带动自定义动画。在willAnimateFocusViewTo回调里拿PagingMenuFocusViewAnimationCoordinator让自家动画和焦点位移并行执行Overlay 示例靠它做遮罩过渡。![PagingKit 自定义菜单示例页演示](https://raw.gitcode.com/gh_mirrors/pa/PagingKit/raw/d44f420cabf11b6f9cbbad7c9dda307c9d440df0/iOS Sample/iOS Sample/Assets.xcassets/Photo2.imageset/37931809772_ec73384a4c_o.jpg?utm_sourcegitcode_repo_files)⚠️ 容易踩的坑⚠️ 在viewDidLoad里调reloadData()会因视图尚未布局导致菜单错位把调用挪到viewDidLayoutSubviews即可。⚠️ 内容页里放了UISlider之类的控件、滑动发涩时设contentVC.scrollView.delaysContentTouches false。 RTL 没有内置支持要做从右到左布局得用transform翻转菜单、cell、内容视图三层Tips.md 里有完整做法。 想深入再看这几处Documentation/Tips.md内置组件、焦点动画、RTL 等技巧汇总适合接新需求前翻一遍。iOS Sample/标签菜单、覆盖菜单等十余个场景适合先跑起来看效果再读代码。Sources/菜单与同步逻辑集中在寥寥几个文件适合想弄代理回调内部实现的人。tools/CodeSnippets/四套数据源/代理协议模板适合想省样板代码的人。建议先 clone 下来跑通 Tag 菜单场景确认双向同步没问题后再逐个替换 cell 和焦点视图。【免费下载链接】PagingKitPagingKit provides customizable menu UI. It has more flexible layout and design than the other libraries.项目地址: https://gitcode.com/gh_mirrors/pa/PagingKit创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

相关新闻