CRNetworkButton与URLSession集成教程：从发送按钮到网络请求的完整闭环

CRNetworkButton与URLSession集成教程：从发送按钮到网络请求的完整闭环

【免费下载链接】CRNetworkButtonSend Button for iOS项目地址: https://gitcode.com/gh_mirrors/cr/CRNetworkButton

CRNetworkButton 是一款专为 iOS 打造的发送按钮动画库：当用户点击按钮触发网络请求时，它会把普通的 UIButton 自动"变身"成加载动画、成功对勾或失败提示，将枯燥的等待过程变成直观的视觉反馈。这篇教程将带你一步步把 CRNetworkButton 与 URLSession 深度集成，打通从"点击发送"到"请求返回"的完整闭环，让 App 的交互体验直接提升一个档次。全文面向新手，代码量精简，跟着做就能跑通。

为什么需要一个会"思考"的发送按钮？

很多 App 里，用户点了"发送"后，按钮没有任何反应，用户不知道请求是成功还是失败，也不知道该不该再点一次。CRNetworkButton 正是为解决这个痛点而生，它把网络请求的三种状态全部"演"出来：

• ⏳加载中：按钮收缩成圆形，内部线条旋转，一眼就知道"请求在进行中"
• ✅成功：播放对勾动画，按钮文字从StartText切换为EndText
• ❌失败：播放叉号动画，以红色错误样式提示用户

整个动画机制封装在 CRNetworkButton.swift 这一个文件里，内部通过CRState状态机管理ready → loading → finishing → finished四个阶段，你用起来只需要调用几个简单方法，非常省心。

快速开始：CocoaPods 一行命令集成 CRNetworkButton

CRNetworkButton 支持 iOS 8 及以上系统，通过 CocoaPods 安装只需两步。

第一步，在 Podfile 中添加一行：

pod "CRNetworkButton"

第二步，在终端执行pod install，然后在需要使用的地方引入：

import CRNetworkButton

想跑官方 Demo 的话，可以克隆仓库后进入 Example 目录执行pod install：

git clone https://gitcode.com/gh_mirrors/cr/CRNetworkButton

三步上手：从 Storyboard 配置第一个网络按钮

CRNetworkButton 充分利用了@IBDesignable和@IBInspectable特性，绝大多数配置项都能在 Storyboard 的右侧面板直接设置，无需写一行代码。

第 1 步：把按钮的 Class 改成CRNetworkButton；第 2 步：设置关键文案属性，加载前的文字、成功后的文字、失败时的文字；第 3 步：按需调整外观与行为。

最常用的几个配置属性如下：

核心 API 速览：记住 4 个方法就够了

CRNetworkButton 对外暴露的方法极少，全部记住也很轻松：

• startAnimate()：开始加载动画
• stopAnimate()：请求成功，停止动画并展示对勾
• stopByError()：请求失败，停止动画并展示错误样式
• updateProgress(_:)：进度模式下更新进度（0 ~ 1）
• resetToReady()：手动复位到初始状态

具体实现见 CRNetworkButton.swift，每个方法都短小精悍。

CRNetworkButton 与 URLSession 集成实战：完整闭环

下面这段代码就是"从发送按钮到网络请求"的完整闭环核心，整个流程只有三步：

@IBAction func sendButtonTapped(_ sender: CRNetworkButton) { guard let url = URL(string: "https://api.example.com/send") else { return } sender.startAnimate() // ① 点击瞬间，按钮进入加载动画 var request = URLRequest(url: url) request.httpMethod = "POST" request.httpBody = "hello".data(using: .utf8) let task = URLSession.shared.dataTask(with: request) { data, response, error in DispatchQueue.main.async { if error != nil { sender.stopByError() // ② 请求失败 → 红色错误反馈 } else { sender.stopAnimate() // ③ 请求成功 → 对勾动画 + endText } } } task.resume() }

拆开来看，闭环其实只有三个关键动作：

1. startAnimate()：用户点击的瞬间立刻给出反馈，告诉用户"请求已发出"；
2. stopAnimate()：URLSession 回调成功时调用，展示对勾和完成文案；
3. stopByError()：URLSession 回调出错时调用，用红色叉号提示失败。

注意回调要切回主线程（DispatchQueue.main.async），因为动画操作必须在主线程执行。官方示例 ViewController.swift 和 FakeNetworkManager.swift 也是同样的回调模式，可以直接参考。

进阶玩法：用 URLSession 下载进度驱动按钮进度环

如果请求耗时较长（比如上传/下载大文件），默认的旋转动画就不够用了。把progressMode设为true，再配合 URLSession 的下载代理，就能让按钮变成一个实时进度环。

func urlSession(_ session: URLSession, downloadTask: URLSessionDownloadTask, didWriteData bytesWritten: Int64, totalBytesWritten: Int64, totalBytesExpectedToWrite: Int64) { let progress = CGFloat(totalBytesWritten) / CGFloat(totalBytesExpectedToWrite) DispatchQueue.main.async { self.networkButton.updateProgress(progress) // 进度实时驱动按钮圆弧 } }

当进度到达 1.0 时调用stopAnimate()，按钮会收起进度环并播放完成动画，整个交互流畅自然。这正是 CRNetworkButton 相比普通按钮最出彩的地方：让用户对请求进展一目了然。

失败处理与状态复位：别忘了 resetToReady

在真实项目中，用户可能想"再试一次"。如果设置了shouldAutoReverse = true，按钮会在动画结束后自动恢复初始状态；否则你需要手动调用resetToReady()让按钮回到可点击状态。建议在按钮的点击事件里做一次兜底判断，官方示例的做法很值得借鉴：

if sender.currState == .finished { sender.resetToReady() sender.isSelected = false }

常见坑与最佳实践

• 🧵线程：所有动画方法都必须在主线程调用，URLSession 回调里记得DispatchQueue.main.async
• 🔒防重复点击：加载期间按钮会自动isEnabled = false，不必担心用户连点
• 🔄状态复位：请求结束后如需再次使用，务必resetToReady()或开启shouldAutoReverse
• 🎨配色统一：通过crDotColor/crErrorColor与 App 主题色保持一致

结语

从按钮点击到网络请求返回，CRNetworkButton 用一套简洁优雅的状态机，把加载、成功、失败三种反馈串成了完整的交互闭环。配合 URLSession 的 dataTask 与 downloadTask，无论是普通请求还是带进度的下载，都能轻松驾驭。赶紧把这段 CRNetworkButton 与 URLSession 集成教程里的代码跑起来，让你的发送按钮从此"会说话"！

【免费下载链接】CRNetworkButtonSend Button for iOS项目地址: https://gitcode.com/gh_mirrors/cr/CRNetworkButton