接下來介紹的同樣是 RxSwift
的官方樣例,演示的是如何對 UIImagePickerControllerDelegate
進行 Rx
封裝,方便我們在RxSwift
項目中選擇圖片(可以通過拍照、或者從相簿中選取)
三、從本地相冊、或攝像頭獲取圖片
1,效果圖
(1)點擊“拍照”按鈕,會打開攝像頭進行拍照,拍照后自動將照片顯示在下方的 imageView
中。
(2)而點擊“選擇照片”或“選擇照片并裁剪”按鈕后,會打開本地相冊選擇照片,選擇后自動將照片顯示在下方的 imageView
中。不過后者在選擇完畢后還多了個編輯步驟,可以把照片裁剪成正方形再顯示。
2,準備工作
(1)RxImagePickerDelegateProxy.swift
首先我們繼承 DelegateProxy
創建一個關于圖片選擇的代理委托,同時它還要遵守 DelegateProxyType
、UIImagePickerControllerDelegate
、UINavigationControllerDelegate
協議。
import RxSwift
import RxCocoa
import UIKit
//圖片選擇控制器(UIImagePickerController)代理委托
public class RxImagePickerDelegateProxy :
DelegateProxy<UIImagePickerController,
UIImagePickerControllerDelegate & UINavigationControllerDelegate>,
DelegateProxyType,
UIImagePickerControllerDelegate,
UINavigationControllerDelegate {
public init(imagePicker: UIImagePickerController) {
super.init(parentObject: imagePicker,
delegateProxy: RxImagePickerDelegateProxy.self)
}
public static func registerKnownImplementations() {
self.register { RxImagePickerDelegateProxy(imagePicker: $0) }
}
public static func currentDelegate(for object: UIImagePickerController)
-> (UIImagePickerControllerDelegate & UINavigationControllerDelegate)? {
return object.delegate
}
public static func setCurrentDelegate(_ delegate: (UIImagePickerControllerDelegate
& UINavigationControllerDelegate)?, to object: UIImagePickerController) {
object.delegate = delegate
}
}
(2)UIImagePickerController+Rx.swift
接著我們對 UIImagePickerController
進行 Rx
擴展,作用是將 UIImagePickerController
與前面創建的代理委托關聯起來,將圖片選擇相關的 delegate
方法轉為可觀察序列。
注意:下面代碼中將 methodInvoked
方法替換成 sentMessage
其實也可以,它們的區別可以看我的另一篇文章:
import RxSwift
import RxCocoa
import UIKit
//圖片選擇控制器(UIImagePickerController)的Rx擴展
extension Reactive where Base: UIImagePickerController {
//代理委托
public var pickerDelegate: DelegateProxy<UIImagePickerController,
UIImagePickerControllerDelegate & UINavigationControllerDelegate > {
return RxImagePickerDelegateProxy.proxy(for: base)
}
//圖片選擇完畢代理方法的封裝
public var didFinishPickingMediaWithInfo: Observable<[String : AnyObject]> {
return pickerDelegate
.methodInvoked(#selector(UIImagePickerControllerDelegate
.imagePickerController(_:didFinishPickingMediaWithInfo:)))
.map({ (a) in
return try castOrThrow(Dictionary<String, AnyObject>.self, a[1])
})
}
//圖片取消選擇代理方法的封裝
public var didCancel: Observable<()> {
return pickerDelegate
.methodInvoked(#selector(UIImagePickerControllerDelegate
.imagePickerControllerDidCancel(_:)))
.map {_ in () }
}
}
//轉類型的函數(轉換失敗后,會發出Error)
fileprivate func castOrThrow<T>(_ resultType: T.Type, _ object: Any) throws -> T {
guard let returnValue = object as? T else {
throw RxCocoaError.castingError(object: object, targetType: resultType)
}
return returnValue
}
3,使用樣例
(1)要獲取照片或者進行拍照,首先我們需要在 info.plist
里加入相關的描述:
-
Privacy - Camera Usage Description
:App 需要訪問您的相機 -
Privacy - Photo Library Usage Description
:App 需要訪問您的照片
(2)Main.storyboard
在 StoryBoard
中添加 3 個 Button
以及 1 個 ImageView
,并將它們與代碼做 @IBOutlet
綁定。
(3)ViewController.swift
主視圖控制器代碼如下,可以看到原來圖片選擇完畢這個代理方法現在已經變成響應式的了。
import UIKit
import RxSwift
import RxCocoa
class ViewController: UIViewController {
//拍照按鈕
@IBOutlet weak var cameraButton: UIButton!
//選擇照片按鈕
@IBOutlet weak var galleryButton: UIButton!
//選擇照片并裁剪按鈕
@IBOutlet weak var cropButton: UIButton!
//顯示照片的imageView
@IBOutlet weak var imageView: UIImageView!
let disposeBag = DisposeBag()
override func viewDidLoad() {
super.viewDidLoad()
//初始化圖片控制器
let imagePicker = UIImagePickerController()
//判斷并決定"拍照"按鈕是否可用
cameraButton.isEnabled = UIImagePickerController.isSourceTypeAvailable(.camera)
//“拍照”按鈕點擊
cameraButton.rx.tap
.bind { [weak self] _ -> Void in
imagePicker.sourceType = .camera //來源為相機
imagePicker.allowsEditing = false //不可編輯
//彈出控制器,顯示界面
self?.present(imagePicker, animated: true)
}
.disposed(by: disposeBag)
//“選擇照片”按鈕點擊
galleryButton.rx.tap
.bind { [weak self] _ -> Void in
imagePicker.sourceType = .photoLibrary //來源為相冊
imagePicker.allowsEditing = false //不可編輯
//彈出控制器,顯示界面
self?.present(imagePicker, animated: true)
}
.disposed(by: disposeBag)
//“選擇照片并裁剪”按鈕點擊
cropButton.rx.tap
.bind { [weak self] _ -> Void in
imagePicker.sourceType = .photoLibrary //來源為相冊
imagePicker.allowsEditing = true //不可編輯
//彈出控制器,顯示界面
self?.present(imagePicker, animated: true)
}
.disposed(by: disposeBag)
//圖片選擇完畢后,將其綁定到imageView上顯示
imagePicker.rx.didFinishPickingMediaWithInfo
.map { info in
//根據情況選擇是使用原始圖片還是編輯后的圖片
if imagePicker.allowsEditing {
return info[UIImagePickerControllerEditedImage] as! UIImage
} else {
return info[UIImagePickerControllerOriginalImage] as! UIImage
}
}
.bind(to: imageView.rx.image)
.disposed(by: disposeBag)
//圖片選擇完畢后,退出圖片控制器
imagePicker.rx.didFinishPickingMediaWithInfo
.subscribe(onNext: { _ in
imagePicker.dismiss(animated: true)
})
.disposed(by: disposeBag)
}
}
附:功能改進
雖然前面我們對 UIImagePickerController
進行了 Rx
擴展,但使用起來還是有些不便,比如圖片選擇完畢后還需要在代碼中手動退出選擇器。下面對它做個功能改進,讓其可以自動關閉退出。
1,UIImagePickerController+RxCreate.swift
這里再一次對 UIImagePickerController
進行 Rx
擴展,增加一個創建圖片選擇控制器的靜態方法,后面當我們使用該方法初始化 ImagePickerController
時會自動將其彈出顯示,并且在選擇完畢后會自動關閉。
import UIKit
import RxSwift
import RxCocoa
//取消指定視圖控制器函數
func dismissViewController(_ viewController: UIViewController, animated: Bool) {
if viewController.isBeingDismissed || viewController.isBeingPresented {
DispatchQueue.main.async {
dismissViewController(viewController, animated: animated)
}
return
}
if viewController.presentingViewController != nil {
viewController.dismiss(animated: animated, completion: nil)
}
}
//對UIImagePickerController進行Rx擴展
extension Reactive where Base: UIImagePickerController {
//用于創建并自動顯示圖片選擇控制器的靜態方法
static func createWithParent(_ parent: UIViewController?,
animated: Bool = true,
configureImagePicker: @escaping (UIImagePickerController) throws -> () = { x in })
-> Observable<UIImagePickerController> {
//返回可觀察序列
return Observable.create { [weak parent] observer in
//初始化一個圖片選擇控制器
let imagePicker = UIImagePickerController()
//不管圖片選擇完畢還是取消選擇,都會發出.completed事件
let dismissDisposable = Observable.merge(
imagePicker.rx.didFinishPickingMediaWithInfo.map{_ in ()},
imagePicker.rx.didCancel
)
.subscribe(onNext: { _ in
observer.on(.completed)
})
//設置圖片選擇控制器初始參數,參數不正確則發出.error事件
do {
try configureImagePicker(imagePicker)
}
catch let error {
observer.on(.error(error))
return Disposables.create()
}
//判斷parent是否存在,不存在則發出.completed事件
guard let parent = parent else {
observer.on(.completed)
return Disposables.create()
}
//彈出控制器,顯示界面
parent.present(imagePicker, animated: animated, completion: nil)
//發出.next事件(攜帶的是控制器對象)
observer.on(.next(imagePicker))
//銷毀時自動退出圖片控制器
return Disposables.create(dismissDisposable, Disposables.create {
dismissViewController(imagePicker, animated: animated)
})
}
}
}
2,ViewController.swift
主視圖控制器代碼如下,可以看到我們現在不需要去關心圖片選擇界面如何關閉了。
import UIKit
import RxSwift
import RxCocoa
class ViewController: UIViewController {
//拍照按鈕
@IBOutlet weak var cameraButton: UIButton!
//選擇照片按鈕
@IBOutlet weak var galleryButton: UIButton!
//選擇照片并裁剪按鈕
@IBOutlet weak var cropButton: UIButton!
//顯示照片的imageView
@IBOutlet weak var imageView: UIImageView!
let disposeBag = DisposeBag()
override func viewDidLoad() {
super.viewDidLoad()
//判斷并決定"拍照"按鈕是否可用
cameraButton.isEnabled = UIImagePickerController.isSourceTypeAvailable(.camera)
//“拍照”按鈕點擊
cameraButton.rx.tap
.flatMapLatest { [weak self] _ in
return UIImagePickerController.rx.createWithParent(self) { picker in
picker.sourceType = .camera
picker.allowsEditing = false
}
.flatMap { $0.rx.didFinishPickingMediaWithInfo }
}
.map { info in
return info[UIImagePickerControllerOriginalImage] as? UIImage
}
.bind(to: imageView.rx.image)
.disposed(by: disposeBag)
//“選擇照片”按鈕點擊
galleryButton.rx.tap
.flatMapLatest { [weak self] _ in
return UIImagePickerController.rx.createWithParent(self) { picker in
picker.sourceType = .photoLibrary
picker.allowsEditing = false
}
.flatMap { $0.rx.didFinishPickingMediaWithInfo }
}
.map { info in
return info[UIImagePickerControllerOriginalImage] as? UIImage
}
.bind(to: imageView.rx.image)
.disposed(by: disposeBag)
//“選擇照片并裁剪”按鈕點擊
cropButton.rx.tap
.flatMapLatest { [weak self] _ in
return UIImagePickerController.rx.createWithParent(self) { picker in
picker.sourceType = .photoLibrary
picker.allowsEditing = true
}
.flatMap { $0.rx.didFinishPickingMediaWithInfo }
}
.map { info in
return info[UIImagePickerControllerEditedImage] as? UIImage
}
.bind(to: imageView.rx.image)
.disposed(by: disposeBag)
}
}