ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

SwiftyPickerPopover 实战:与 UITextField、UICollectionView、UIBarButtonItem 无缝集成

SwiftyPickerPopover 实战:与 UITextField、UICollectionView、UIBarButtonItem 无缝集成 SwiftyPickerPopover 实战与 UITextField、UICollectionView、UIBarButtonItem 无缝集成【免费下载链接】SwiftyPickerPopoverA more convenient way to display a popover with a built-in picker, on iPhone/iPad of iOS9.项目地址: https://gitcode.com/gh_mirrors/sw/SwiftyPickerPopoverSwiftyPickerPopover 是一个专为 iPhone/iPad 设计的 iOS 弹出选择器Popover Picker开源库支持 iOS 9 与 Swift 5它让你用几行链式代码就能弹出一个内置 UIPickerView 或 UIDatePicker 的优雅弹窗彻底告别手写 UIPopoverController 的繁琐。无论你是想在 UITextField 上弹出日期选择、在 UICollectionView 的 cell 上弹出选项列表还是从 UIBarButtonItem 触发选择器SwiftyPickerPopover 都能一键搞定。本文将通过 3 个实战案例带你快速掌握 SwiftyPickerPopover 的无缝集成技巧。为什么选择 SwiftyPickerPopover四个让人心动的理由超简单的链式 APIDatePickerPopover(title:).setDoneButton(action:).appear(...)一行链式调用即可完成配置与弹出。iPhone / iPad 全适配基于系统 Popover 特性箭头方向、弹出位置自动计算iPad 上体验尤其出色。四种内置选择器字符串、多列字符串、日期、倒计时覆盖绝大多数业务场景。⚡️Swift 5 iOS 9兼容老项目无需复杂的桥接配置。快速开始一分钟完成 SwiftyPickerPopover 安装配置CocoaPods 安装方法推荐在项目的Podfile中加入一行依赖platform :ios, 9.0 use_frameworks! target YourProjectTargetName do pod SwiftyPickerPopover end然后执行pod install在需要使用的地方导入模块即可import SwiftyPickerPopoverCarthage 安装方法在Cartfile中添加依赖后执行carthage update --platform iOS将生成的SwiftyPickerPopover.framework拖入工程并添加 Run Script 即可具体步骤可参考项目根目录的 SwiftyPickerPopover.podspec 与 README.md。想边看边学的朋友也可以直接克隆官方 Demo 仓库体验全部示例git clone https://gitcode.com/gh_mirrors/sw/SwiftyPickerPopover认识 SwiftyPickerPopover 的四种内置选择器所有弹出选择器的核心逻辑都封装在 AbstractPopover.swift 中它统一提供了appear()、disappear()、setSize()、setPermittedArrowDirections()等通用能力。在此基础上衍生出四种类型选择器类型用途核心类文件StringPickerPopover单选字符串选项StringPickerPopover.swiftColumnStringPickerPopover多列联动选择ColumnStringPickerPopover.swiftDatePickerPopover日期 / 时间选择DatePickerPopover.swiftCountdownPickerPopover倒计时选择CountdownPickerPopover.swift实战一SwiftyPickerPopover 与 UITextField 无缝集成这是最经典的使用场景点击输入框弹出选择器选中后把结果回填到文本框完全替代系统键盘。完整示例位于 SampleViewController.swift 的didTapStringPickerWithTextField方法中核心代码只需这样IBAction func didTapStringPickerWithTextField(_ sender: UITextField) { StringPickerPopover(title: TextField, choices: [, Text 1, Text 2, Text 3]) .setDoneButton(action: { popover, selectedRow, selectedString in sender.text selectedString // 把选中结果回填到 UITextField }) .appear(originView: sender, baseViewController: self) }要点提示originView直接传入 UITextField 本身弹窗的箭头会自动指向输入框在setDoneButton的回调中把selectedString赋值给sender.text就完成了输入框 → 选择器 → 回填的闭环。配合beginEditing事件触发即可打造类似 App Store 筛选条件的体验。如果想让选择器出现在 UITableViewCell 内部可以参考 TextFieldCel.swift 中的写法——在onEditingDidBegin时弹出DatePickerPopover并传入 cell 所属的UITableViewController作为baseViewController。实战二SwiftyPickerPopover 与 UICollectionView 集成当用户点击九宫格 / 瀑布流中的某个 cell 时弹出选择器是电商、点餐类 App 的高频需求。SwiftyPickerPopover 专门为此场景提供了baseViewWhenOriginViewHasNoSuperview参数用来处理cell 视图没有父视图的边界情况。func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) { let theCell collectionView.dequeueReusableCell(withReuseIdentifier: Cell, for: indexPath) let p StringPickerPopover(title: Cell indexPath.row.description, choices: [value 1, value 2, value 3]) .setSelectedRow(1) .setDoneButton(title: , action: { popover, row, string in print(done row \(row) \(string)) }) .setCancelButton(title: , action: { _, _, _ in print(cancel) }) p.appear(originView: theCell, baseViewWhenOriginViewHasNoSuperview: collectionView, baseViewController: self) }核心机制appear()内部会优先使用originView.superview作为弹出位置的参考视图如果 cell 的 superview 为空就会回退到baseViewWhenOriginViewHasNoSuperview即整个 collectionView从而保证箭头定位准确、永不崩溃。这段逻辑在 AbstractPopover.swift 的configureNavigationController中有清晰体现。实战三SwiftyPickerPopover 与 UIBarButtonItem 集成导航栏右上角的号、筛选按钮等通常都是 UIBarButtonItem如何让它成为弹窗的锚点SwiftyPickerPopover 提供了两种优雅方案。方案 A使用现成的 barButtonItem 方法推荐p.appear(barButtonItem: sender, baseViewController: self)库内部已封装好appear(barButtonItem:...)方法会自动获取按钮对应的 view 作为 origin。方案 B通过 KVC 手动转换let originView sender.value(forKey: view) as! UIView p.appear(originView: originView, baseViewController: self)两种方案效果一致方案 A 更简洁建议优先使用。进阶玩法带图片、多列与可清除的日期选择器掌握了三种基础集成再来看看 SwiftyPickerPopover 的进阶能力让你的选择器更专业。带图片的选项列表通过setImageNames()或setImages()给每个选项配图效果见下图适合做带国家国旗、分类图标的选项StringPickerPopover(title: with image, choices: [value 1, value 2, ]) .setImageNames([imageIcon, nil, thumbUpIcon]) .appear(originView: sender, baseViewController: self)带 Clear 按钮的日期选择器点击 Clear 一键重置日期效果如下let p DatePickerPopover(title: Clearable DatePicker) .setLocale(identifier: en_GB) .setClearButton(action: { popover, selectedDate in popover.setSelectedDate(Date()).reload() // 一键回退到当前时间 }) p.appear(originView: sender, baseViewController: self)多列联动选择ColumnStringPickerPopover支持多列 UIPickerView例如早餐/午餐/晚餐 × 菜品种类每列还能单独设置宽度比例、字体和颜色。SwiftyPickerPopover 实用小技巧与常见问题✨自动消失调用disappearAutomatically(after: 3.0)可让弹窗 3 秒后自动关闭适合提示类场景。箭头方向控制setPermittedArrowDirections(.down)可限定箭头朝向避免遮挡关键内容。视觉定制setSize(width:height:)调整尺寸、setCornerRadius()设置圆角、setArrowColor()修改箭头颜色默认宽高均为 300。实时回调setValueChange(action:)能在用户滚动 picker 的每一刻实时拿到当前值非常适合做联动预览。自定义 Storyboard将 StringPickerPopover.storyboard 等文件加入工程即可完全重绘界面库会自动优先使用主 Bundle 中的同名 storyboard。常见问题若弹出位置异常优先检查baseViewController是否传对若 cell 作为 origin 时箭头消失记得补上baseViewWhenOriginViewHasNoSuperview参数。总结通过本文的 3 个实战案例可以看到SwiftyPickerPopover 用极简的链式 API 解决了 iOS 开发中弹出选择器这一高频需求与 UITextField 集成实现输入回填、与 UICollectionView 集成实现 cell 级弹出、与 UIBarButtonItem 集成实现导航栏触发。加上四种内置选择器和丰富的自定义能力它完全能成为你 iOS 工具箱里的得力助手。动手把 Demo 克隆下来跑一遍相信你很快就能在自己的项目里用上它【免费下载链接】SwiftyPickerPopoverA more convenient way to display a popover with a built-in picker, on iPhone/iPad of iOS9.项目地址: https://gitcode.com/gh_mirrors/sw/SwiftyPickerPopover创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表