Swift - RxSwift的使用詳解59(DelegateProxy樣例2:圖片選擇功能 )

接下來介紹的同樣是 RxSwift 的官方樣例,演示的是如何對 UIImagePickerControllerDelegate 進行 Rx 封裝,方便我們在RxSwift項目中選擇圖片(可以通過拍照、或者從相簿中選取)

三、從本地相冊、或攝像頭獲取圖片

1,效果圖

(1)點擊“拍照”按鈕,會打開攝像頭進行拍照,拍照后自動將照片顯示在下方的 imageView 中。

(2)而點擊“選擇照片”或“選擇照片并裁剪”按鈕后,會打開本地相冊選擇照片,選擇后自動將照片顯示在下方的 imageView 中。不過后者在選擇完畢后還多了個編輯步驟,可以把照片裁剪成正方形再顯示。

2,準備工作

(1)RxImagePickerDelegateProxy.swift

首先我們繼承 DelegateProxy 創建一個關于圖片選擇的代理委托,同時它還要遵守 DelegateProxyTypeUIImagePickerControllerDelegateUINavigationControllerDelegate 協議。

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中添加 3Button 以及 1ImageView,并將它們與代碼做 @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)
    }
}

RxSwift使用詳解系列
原文出自:www.hangge.com轉載請保留原文鏈接

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,837評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,196評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,688評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,654評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,456評論 6 406
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,955評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,044評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,195評論 0 287
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,725評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,608評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,802評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,318評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,048評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,422評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,673評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,424評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,762評論 2 372

推薦閱讀更多精彩內容