? ? ? ? 當(dāng)我們發(fā)起網(wǎng)絡(luò)請(qǐng)求，或者進(jìn)行其他一些比較耗時(shí)的操作時(shí)哲身，最好給用戶一個(gè)指示辩涝。比如上文的用戶注冊(cè)樣例，當(dāng)點(diǎn)擊注冊(cè)按鈕后會(huì)等待 1.5 秒才返回結(jié)果勘天，那么為了更好的用戶體驗(yàn)這時(shí)就可以顯示個(gè)活動(dòng)指示器怔揩。
? ? ? ? 下面我通過樣例演示幾種不同的活動(dòng)指示器用法，以及他們?nèi)绾胃鶕?jù)請(qǐng)求操作自動(dòng)進(jìn)行隱藏和顯示脯丝。
一商膊、準(zhǔn)備工作
1，引入 ActivityIndicator
（1）ActivityIndicator 類可不是蘋果自帶的 UIActivityIndicator宠进，它是一個(gè)用來監(jiān)測(cè)是否有序列正在發(fā)送元素的類：
- 如果至少還有一個(gè)序列正在工作晕拆，那么它會(huì)返回一個(gè)
true。 - 如果沒有序列在工作了材蹬，那么它會(huì)返回一個(gè)
false值实幕。
（2）默認(rèn)情況下項(xiàng)目引入的 RxSwift 和 RxCocoa 庫中是不會(huì)有個(gè)類的吝镣，我們需要手動(dòng)將 RxSwift 源碼包中的 RxExample/Services/ActivityIndicator.swift 這個(gè)文件添加到我們項(xiàng)目中來。
2昆庇，修改 ViewModel
（1）接著對(duì)前文的 GitHubSignupViewModel 做個(gè)修改末贾，增加了個(gè) signingIn 序列，用于表示當(dāng)前是否正在“發(fā)請(qǐng)求注冊(cè)中”整吆。
（2）我們?cè)谡?qǐng)求序列中使用 trackActivity 方法可以把這個(gè)請(qǐng)求序列放入制定的 activityIndicator 中進(jìn)行監(jiān)測(cè)未舟，監(jiān)測(cè)結(jié)果則做為 signingIn 序列。
import RxSwift
import RxCocoa
class GitHubSignupViewModel {
//用戶名驗(yàn)證結(jié)果
let validatedUsername: Driver<ValidationResult>
//密碼驗(yàn)證結(jié)果
let validatedPassword: Driver<ValidationResult>
//再次輸入密碼驗(yàn)證結(jié)果
let validatedPasswordRepeated: Driver<ValidationResult>
//注冊(cè)按鈕是否可用
let signupEnabled: Driver<Bool>
//正在注冊(cè)中
let signingIn: Driver<Bool>
//注冊(cè)結(jié)果
let signupResult: Driver<Bool>
//ViewModel初始化（根據(jù)輸入實(shí)現(xiàn)對(duì)應(yīng)的輸出）
init(
input: (
username: Driver<String>,
password: Driver<String>,
repeatedPassword: Driver<String>,
loginTaps: Signal<Void>
),
dependency: (
networkService: GitHubNetworkService,
signupService: GitHubSignupService
)) {
//用戶名驗(yàn)證
validatedUsername = input.username
.flatMapLatest { username in
return dependency.signupService.validateUsername(username)
.asDriver(onErrorJustReturn: .failed(message: "服務(wù)器發(fā)生錯(cuò)誤!"))
}
//用戶名密碼驗(yàn)證
validatedPassword = input.password
.map { password in
return dependency.signupService.validatePassword(password)
}
//重復(fù)輸入密碼驗(yàn)證
validatedPasswordRepeated = Driver.combineLatest(
input.password,
input.repeatedPassword,
resultSelector: dependency.signupService.validateRepeatedPassword)
//注冊(cè)按鈕是否可用
signupEnabled = Driver.combineLatest(
validatedUsername,
validatedPassword,
validatedPasswordRepeated
) { username, password, repeatPassword in
username.isValid && password.isValid && repeatPassword.isValid
}
.distinctUntilChanged()
//獲取最新的用戶名和密碼
let usernameAndPassword = Driver.combineLatest(input.username, input.password) {
(username: $0, password: $1) }
//用于檢測(cè)是否正在請(qǐng)求數(shù)據(jù)
let activityIndicator = ActivityIndicator()
self.signingIn = activityIndicator.asDriver()
//注冊(cè)按鈕點(diǎn)擊結(jié)果
signupResult = input.loginTaps.withLatestFrom(usernameAndPassword)
.flatMapLatest { pair in
return dependency.networkService.signup(pair.username,
password: pair.password)
.trackActivity(activityIndicator) //把當(dāng)前序列放入signing序列中進(jìn)行檢測(cè)
.asDriver(onErrorJustReturn: false)
}
}
}
二掂为、頂部狀態(tài)欄聯(lián)網(wǎng)指示器的綁定
1裕膀，效果圖
（1）當(dāng)我們點(diǎn)擊注冊(cè)按鈕發(fā)起請(qǐng)求時(shí)，頂部狀態(tài)欄會(huì)顯示菊花狀的網(wǎng)絡(luò)請(qǐng)求指示器勇哗。
（2）當(dāng)注冊(cè)結(jié)果返回時(shí)昼扛，頂部的網(wǎng)絡(luò)請(qǐng)求指示器消失。
2欲诺，樣例代碼
這個(gè)只需要在主視圖控制器中將 signingIn 綁定到 UIApplication 的 isNetworkActivityIndicatorVisible 屬性上即可抄谐。
import UIKit
import RxSwift
import RxCocoa
class ViewController: UIViewController {
//用戶名輸入框、以及驗(yàn)證結(jié)果顯示標(biāo)簽
@IBOutlet weak var usernameOutlet: UITextField!
@IBOutlet weak var usernameValidationOutlet: UILabel!
//密碼輸入框扰法、以及驗(yàn)證結(jié)果顯示標(biāo)簽
@IBOutlet weak var passwordOutlet: UITextField!
@IBOutlet weak var passwordValidationOutlet: UILabel!
//重復(fù)密碼輸入框蛹含、以及驗(yàn)證結(jié)果顯示標(biāo)簽
@IBOutlet weak var repeatedPasswordOutlet: UITextField!
@IBOutlet weak var repeatedPasswordValidationOutlet: UILabel!
//注冊(cè)按鈕
@IBOutlet weak var signupOutlet: UIButton!
let disposeBag = DisposeBag()
override func viewDidLoad() {
super.viewDidLoad()
//初始化ViewModel
let viewModel = GitHubSignupViewModel(
input: (
username: usernameOutlet.rx.text.orEmpty.asDriver(),
password: passwordOutlet.rx.text.orEmpty.asDriver(),
repeatedPassword: repeatedPasswordOutlet.rx.text.orEmpty.asDriver(),
loginTaps: signupOutlet.rx.tap.asSignal()
),
dependency: (
networkService: GitHubNetworkService(),
signupService: GitHubSignupService()
)
)
//用戶名驗(yàn)證結(jié)果綁定
viewModel.validatedUsername
.drive(usernameValidationOutlet.rx.validationResult)
.disposed(by: disposeBag)
//密碼驗(yàn)證結(jié)果綁定
viewModel.validatedPassword
.drive(passwordValidationOutlet.rx.validationResult)
.disposed(by: disposeBag)
//再次輸入密碼驗(yàn)證結(jié)果綁定
viewModel.validatedPasswordRepeated
.drive(repeatedPasswordValidationOutlet.rx.validationResult)
.disposed(by: disposeBag)
//注冊(cè)按鈕是否可用
viewModel.signupEnabled
.drive(onNext: { [weak self] valid in
self?.signupOutlet.isEnabled = valid
self?.signupOutlet.alpha = valid ? 1.0 : 0.3
})
.disposed(by: disposeBag)
//當(dāng)前是否正在注冊(cè)
viewModel.signingIn
.drive(UIApplication.shared.rx.isNetworkActivityIndicatorVisible)
.disposed(by: disposeBag)
//注冊(cè)結(jié)果綁定
viewModel.signupResult
.drive(onNext: { [unowned self] result in
self.showMessage("注冊(cè)" + (result ? "成功" : "失敗") + "!")
})
.disposed(by: disposeBag)
}
//詳細(xì)提示框
func showMessage(_ message: String) {
let alertController = UIAlertController(title: nil,
message: message, preferredStyle: .alert)
let okAction = UIAlertAction(title: "確定", style: .cancel, handler: nil)
alertController.addAction(okAction)
self.present(alertController, animated: true, completion: nil)
}
}
三、UIActivityIndicatorView 的綁定
1塞颁，效果圖
（1）當(dāng)我們點(diǎn)擊注冊(cè)按鈕發(fā)起請(qǐng)求時(shí)浦箱，按鈕左側(cè)會(huì)顯示一個(gè)菊花狀的網(wǎng)絡(luò)請(qǐng)求指示器。
（2）當(dāng)注冊(cè)結(jié)果返回時(shí)祠锣，按鈕左側(cè)的網(wǎng)絡(luò)請(qǐng)求指示器消失酷窥。
2，樣例代碼
（1）首先打開 StoryBoard伴网，在注冊(cè)按鈕的左側(cè)放置一個(gè) Activity Indicator View蓬推，同時(shí)設(shè)置當(dāng)其動(dòng)畫停止時(shí)自動(dòng)隱藏，并將其與代碼做 @IBOutlet 綁定澡腾。
（2）最后只需要在主視圖控制器中將 signingIn 綁定到 Activity Indicator View 的 isAnimating 屬性上即可沸伏。
import UIKit
import RxSwift
import RxCocoa
class ViewController: UIViewController {
//用戶名輸入框、以及驗(yàn)證結(jié)果顯示標(biāo)簽
@IBOutlet weak var usernameOutlet: UITextField!
@IBOutlet weak var usernameValidationOutlet: UILabel!
//密碼輸入框动分、以及驗(yàn)證結(jié)果顯示標(biāo)簽
@IBOutlet weak var passwordOutlet: UITextField!
@IBOutlet weak var passwordValidationOutlet: UILabel!
//重復(fù)密碼輸入框毅糟、以及驗(yàn)證結(jié)果顯示標(biāo)簽
@IBOutlet weak var repeatedPasswordOutlet: UITextField!
@IBOutlet weak var repeatedPasswordValidationOutlet: UILabel!
//注冊(cè)按鈕
@IBOutlet weak var signupOutlet: UIButton!
//注冊(cè)時(shí)的活動(dòng)指示器
@IBOutlet weak var signInActivityIndicator: UIActivityIndicatorView!
let disposeBag = DisposeBag()
override func viewDidLoad() {
super.viewDidLoad()
//初始化ViewModel
let viewModel = GitHubSignupViewModel(
input: (
username: usernameOutlet.rx.text.orEmpty.asDriver(),
password: passwordOutlet.rx.text.orEmpty.asDriver(),
repeatedPassword: repeatedPasswordOutlet.rx.text.orEmpty.asDriver(),
loginTaps: signupOutlet.rx.tap.asSignal()
),
dependency: (
networkService: GitHubNetworkService(),
signupService: GitHubSignupService()
)
)
//用戶名驗(yàn)證結(jié)果綁定
viewModel.validatedUsername
.drive(usernameValidationOutlet.rx.validationResult)
.disposed(by: disposeBag)
//密碼驗(yàn)證結(jié)果綁定
viewModel.validatedPassword
.drive(passwordValidationOutlet.rx.validationResult)
.disposed(by: disposeBag)
//再次輸入密碼驗(yàn)證結(jié)果綁定
viewModel.validatedPasswordRepeated
.drive(repeatedPasswordValidationOutlet.rx.validationResult)
.disposed(by: disposeBag)
//注冊(cè)按鈕是否可用
viewModel.signupEnabled
.drive(onNext: { [weak self] valid in
self?.signupOutlet.isEnabled = valid
self?.signupOutlet.alpha = valid ? 1.0 : 0.3
})
.disposed(by: disposeBag)
//當(dāng)前是否正在注冊(cè)
viewModel.signingIn
.drive(signInActivityIndicator.rx.isAnimating)
.disposed(by: disposeBag)
//注冊(cè)結(jié)果綁定
viewModel.signupResult
.drive(onNext: { [unowned self] result in
self.showMessage("注冊(cè)" + (result ? "成功" : "失敗") + "!")
})
.disposed(by: disposeBag)
}
//詳細(xì)提示框
func showMessage(_ message: String) {
let alertController = UIAlertController(title: nil,
message: message, preferredStyle: .alert)
let okAction = UIAlertAction(title: "確定", style: .cancel, handler: nil)
alertController.addAction(okAction)
self.present(alertController, animated: true, completion: nil)
}
}
四、第三方指示器的綁定
這里我以 MBProgressHUD 這個(gè)第三方透明指示器為例做演示刺啦，關(guān)于 MBProgressHUD 相關(guān)介紹和配置方法留特，可以參考這篇文章：
1，效果圖
（1）當(dāng)我們點(diǎn)擊注冊(cè)按鈕發(fā)起請(qǐng)求時(shí)蜕青，頁面中央會(huì)顯示一個(gè)菊花狀的網(wǎng)絡(luò)請(qǐng)求指示器苟蹈。
（2）當(dāng)注冊(cè)結(jié)果返回時(shí)，頁面中央的網(wǎng)絡(luò)請(qǐng)求指示器消失右核。
2慧脱，樣例代碼
我們同樣地將 signingIn 綁定到指示器地顯示隱藏屬性上即可。
import UIKit
import RxSwift
import RxCocoa
class ViewController: UIViewController {
//用戶名輸入框贺喝、以及驗(yàn)證結(jié)果顯示標(biāo)簽
@IBOutlet weak var usernameOutlet: UITextField!
@IBOutlet weak var usernameValidationOutlet: UILabel!
//密碼輸入框菱鸥、以及驗(yàn)證結(jié)果顯示標(biāo)簽
@IBOutlet weak var passwordOutlet: UITextField!
@IBOutlet weak var passwordValidationOutlet: UILabel!
//重復(fù)密碼輸入框、以及驗(yàn)證結(jié)果顯示標(biāo)簽
@IBOutlet weak var repeatedPasswordOutlet: UITextField!
@IBOutlet weak var repeatedPasswordValidationOutlet: UILabel!
//注冊(cè)按鈕
@IBOutlet weak var signupOutlet: UIButton!
let disposeBag = DisposeBag()
override func viewDidLoad() {
super.viewDidLoad()
//初始化ViewModel
let viewModel = GitHubSignupViewModel(
input: (
username: usernameOutlet.rx.text.orEmpty.asDriver(),
password: passwordOutlet.rx.text.orEmpty.asDriver(),
repeatedPassword: repeatedPasswordOutlet.rx.text.orEmpty.asDriver(),
loginTaps: signupOutlet.rx.tap.asSignal()
),
dependency: (
networkService: GitHubNetworkService(),
signupService: GitHubSignupService()
)
)
//用戶名驗(yàn)證結(jié)果綁定
viewModel.validatedUsername
.drive(usernameValidationOutlet.rx.validationResult)
.disposed(by: disposeBag)
//密碼驗(yàn)證結(jié)果綁定
viewModel.validatedPassword
.drive(passwordValidationOutlet.rx.validationResult)
.disposed(by: disposeBag)
//再次輸入密碼驗(yàn)證結(jié)果綁定
viewModel.validatedPasswordRepeated
.drive(repeatedPasswordValidationOutlet.rx.validationResult)
.disposed(by: disposeBag)
//注冊(cè)按鈕是否可用
viewModel.signupEnabled
.drive(onNext: { [weak self] valid in
self?.signupOutlet.isEnabled = valid
self?.signupOutlet.alpha = valid ? 1.0 : 0.3
})
.disposed(by: disposeBag)
//創(chuàng)建一個(gè)指示器
let hud = MBProgressHUD.showAdded(to: self.view, animated: true)
//當(dāng)前是否正在注冊(cè)躏鱼，決定指示器是否顯示
viewModel.signingIn
.map{ !$0 }
.drive(hud.rx.isHidden)
.disposed(by: disposeBag)
//注冊(cè)結(jié)果綁定
viewModel.signupResult
.drive(onNext: { [unowned self] result in
self.showMessage("注冊(cè)" + (result ? "成功" : "失敗") + "!")
})
.disposed(by: disposeBag)
}
//詳細(xì)提示框
func showMessage(_ message: String) {
let alertController = UIAlertController(title: nil,
message: message, preferredStyle: .alert)
let okAction = UIAlertAction(title: "確定", style: .cancel, handler: nil)
alertController.addAction(okAction)
self.present(alertController, animated: true, completion: nil)
}
}
