CRNetworkButton新手教程3步在Storyboard中拖拽出网络请求动画按钮【免费下载链接】CRNetworkButtonSend Button for iOS项目地址: https://gitcode.com/gh_mirrors/cr/CRNetworkButton当用户点击 App 里的发送提交按钮后如果界面没有任何反馈很多人会以为 App 卡死了甚至反复点击造成重复请求。CRNetworkButton就是这样一款开源的 iOS 网络请求动画按钮组件它把普通的 UIButton 升级成自带加载中 → 成功/失败动画的按钮用户一眼就能看懂请求状态。本教程面向新手带你用最简单的 3 步在 Storyboard 中拖拽出属于自己的网络请求动画按钮。CRNetworkButton 是什么为什么新手首选它CRNetworkButton 来自 Cleveroad 团队核心源码只有一个文件 CRNetworkButton.swift却把网络请求按钮这件事做到了极致纯 IB 设计基于IBDesignable和IBInspectable在 Storyboard 里就能实时预览、可视化配置开箱即用所有属性都有默认值拖进界面即可运行✅状态完整支持加载中、成功对勾、失败叉号、进度模式四种展示兼容性好最低支持 iOS 8几乎覆盖所有存量设备。一句话总结想让按钮会说话告诉用户请求正在进行、成功还是失败用它准没错。第1步一行命令安装 CRNetworkButton安装走的是 CocoaPods非常标准。首先在项目的 Podfile 中加上这一行pod CRNetworkButton然后在终端执行pod install完成后记得用.xcworkspace打开工程并在需要使用的位置导入import CRNetworkButton 想先看效果可以git clone https://gitcode.com/gh_mirrors/cr/CRNetworkButton克隆仓库进入Example目录执行pod install就能跑起官方示例工程。示例代码在 ViewController.swift还附带一个模拟真实网络请求的 FakeNetworkManager.swift成功与失败会交替出现非常适合体验。第2步在 Storyboard 中拖拽并配置网络按钮安装完成后的配置几乎是零门槛全程可视化操作从控件库拖一个UIButton到 Storyboard 中在 Identity Inspector 里把Class改成CRNetworkButton此时 Attributes Inspector 中就会出现一排可配置属性源码见 CRNetworkButton.swift按需修改即可。常用属性速查表属性作用默认值StartText动画开始前的文字GoEndText请求成功后的文字DoneerrorText请求失败时显示的文字ErrorcrDotColor加载动画圆点与线条颜色绿色crErrorColor失败状态的颜色红色crLineWidth圆形边框与线条的宽度5velocity加载动画转一圈的秒数1linesCount加载动画线条的数量2animateOnTap点击时是否自动触发加载动画trueshouldAutoReverse结束后是否自动回到初始状态falseprogressMode是否开启进度显示模式false这些属性全部有默认值所以即使一行都不改拖进去的按钮也能正常工作。第3步用一行代码触发网络请求动画把按钮的 Touch Up Inside 事件连到代码里核心逻辑只有三句话IBAction func sendButtonTapped(_ sender: CRNetworkButton) { // 1. 开始加载动画按钮收缩成圆形出现旋转加载指示 sender.startAnimate() // 2. 请求成功显示对勾和 EndText NetworkManager.post(text) { sender.stopAnimate() } failure: { error in // 3. 请求失败显示叉号和红色 Error 状态 sender.stopByError() } }对应的三个方法定义在 CRNetworkButton.swift 中startAnimate()负责启动动画stopAnimate()以成功样式收尾stopByError()则以错误样式收尾。动画期间按钮会自动isEnabled false从源头杜绝用户重复点击。进阶玩法进度模式、自动复位与完成回调如果觉得普通的旋转加载不够用CRNetworkButton 还提供了几个非常实用的进阶能力显示真实进度把progressMode设为 true然后用updateProgress(_:)同步下载/上传进度按钮就会变成圆形进度环源码见 CRNetworkButton.swiftsender.updateProgress(0.5) // 进度到 50%自动复位把shouldAutoReverse设为 true动画完成后按钮会自动变回初始状态适合需要连续操作的场景。完成回调通过completionHandler在动画全部结束后执行后续逻辑比如跳转页面见 CRNetworkButton.swift想手动恢复初始状态调用resetToReady()即可源码位置。总结CRNetworkButton 把网络请求中等待这件小事做得足够优雅而且对新手极度友好CocoaPods 一行安装、Storyboard 拖拽配置、三行代码触发动画。如果你正在开发需要登录、上传、提交等操作的 iOS App不妨试试把按钮换成它让用户对每一次请求都心中有数。【免费下载链接】CRNetworkButtonSend Button for iOS项目地址: https://gitcode.com/gh_mirrors/cr/CRNetworkButton创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
