RxSwift で作る UITableView

D8103087b0fd03029bef298b7f9ddfb9?s=47 Takeo CHIBA
September 23, 2017

RxSwift で作る UITableView

RxSwift 初心者が RxSwift を使って、UITableView を構築してみました。
発表後にアドバイスをいただき、大きなデータを扱う UITableView には RxSwift は向かないという結論になりました。

サンプルはこちら。Xcode8.3.3 です。
https://github.com/taketomato/rxTableViewSample

D8103087b0fd03029bef298b7f9ddfb9?s=128

Takeo CHIBA

September 23, 2017
Tweet

Transcript

  1. RxSwift Ͱ࡞Δ UITableView ϦίʔITιϦϡʔγϣϯζגࣜձࣾ Taketo CHIBA

  2. ࣗݾ঺հ • ઍ༿ݐਓ • twitter: @taketomato • 2006೥ೖࣾͣͬͱϓϩάϥϜͤͣ • 2014೥͔ΒiOSΤϯδχΞ

  3. Why RxSwfit ? • ࠓ೥3݄ try! Swift ͷલ೔ʹαΠόʔΤʔδΣϯτͷ ษڧձʹࢀՃ •

    ൃද͕΄΅ RxSwift ʹؔ͢Δ಺༰
  4. Why RxSwfit ? ʮ࣌୅͸ϦΞΫςΟϒͳͷ͔ʁʯ

  5. Why RxSwfit ? ࣍ʹ࡞ΔΞϓϦͰ࢖͏͔͠ͳ͍ʂʂ

  6. What is RxSwfit ? • ReactiveX (Reactive Extensions) ͷ Swift

    ࣮૷ • ϦΞΫςΟϒϓϩάϥϛϯάΛ࣮ݱ͢Δͨ ΊͷσβΠϯͱɺͦͷ࣮૷ϥΠϒϥϦ • RxJAVA ΍ RxJS ͳͲ֤ݴޠ/ϓϥοτϑΥʔ Ϝ༻ͷ࣮૷͕͋Δ
  7. • ஋ͷؔ܎ੑΛهड़ͯ͠ϓϩάϥϛϯά͢Δ • ैདྷͷํ๏ΑΓهड़͕γϯϓϧʹͳΔ͜ͱ ͕ଟ͍ What is RxSwfit ?

  8. Πϝʔδͱͯ͠͸ ໋ྩܕ ϦΞΫςΟϒ ※࣮ࡍͷίʔυͰ͸͋Γ·ͤΜ

  9. Πϝʔδͱͯ͠͸ ໋ྩܕ ϦΞΫςΟϒ ※࣮ࡍͷίʔυͰ͸͋Γ·ͤΜ ؔ܎Λهड़͓ͯ͘͠ͱɺ มߋ͕͋Δͨͼʹมߋ͕఻ൖ͞Εਖ਼͍݁͠Ռ͕ಘΒΕΔ

  10. Words • Πϕϯτ: ௨৴΍UI෦඼ͷλοϓɺσʔλͷߋ৽ͳͲ • Observable: ΠϕϯτΛഉग़͢ΔݩͱͳΔ΋ͷ • Observer: ΠϕϯτΛ؍ଌ͢Δ΋ͷ

    • Subscribe: Observer ͕؍ଌΛ࢝ΊΔ͜ͱ • bind: Observable ͱ Observer Λඥ͚ͮΔ͜ͱ
  11. ͖͞΄ͲͷΠϝʔδͩͱ

  12. ͖͞΄ͲͷΠϝʔδͩͱ Observable

  13. ͖͞΄ͲͷΠϝʔδͩͱ Observable Observer

  14. ͖͞΄ͲͷΠϝʔδͩͱ Observable Observer bind

  15. ͖͞΄ͲͷΠϝʔδͩͱ Observable Observer bind Πϕϯτ(஋ͷมߋ)

  16. RxSwift Λ࢖ͬͯ Let’s ࣮૷ ΍Δ͜ͱ 1. ഑ྻσʔλΛ UITableView ʹදࣔͰ͖ΔΑ͏ʹ͢Δ 2.

    Realm ͷσʔλΛ UITableView ʹදࣔͰ͖ΔΑ͏ʹ͢Δ 3. Realm ͷσʔλΛηΫγϣϯදࣔͰ͖ΔΑ͏ʹ͢Δ * Realm…ϞόΠϧ޲͚σʔλϕʔε
  17. ࣄલ४උ • RxSwift / RxRealm / RxDataSources ͷಋೖ͕ඞཁ • CocoaPods

    / Carthage ͰಋೖͰ͖·͢ github "ReactiveX/RxSwift" ~> 3.0 github “RxSwiftCommunity/RxRealm" github "RxSwiftCommunity/RxDataSources" ~> 1.0 <Carthage ͷ৔߹> Cartfile ίϚϯυ $ carthage update
  18. 1. ഑ྻσʔλΛ UITableView ʹදࣔͰ͖Δ Α͏ʹ͢Δ arrayObservable .bind(to: tableView.rx.items(cellIdentifier: “Cell")) {

    row, element, cell in // セルの設定 } .addDisposableTo(disposeBag)
  19. 1. ഑ྻσʔλΛ UITableView ʹදࣔͰ͖Δ Α͏ʹ͢Δ arrayObservable .bind(to: tableView.rx.items(cellIdentifier: “Cell")) {

    row, element, cell in // セルの設定 } .addDisposableTo(disposeBag) Observable Observer
  20. 1. ഑ྻσʔλΛ UITableView ʹදࣔͰ͖Δ Α͏ʹ͢Δ arrayObservable .bind(to: tableView.rx.items) { tableView,

    row, element in // セルの設定 } .addDisposableTo(disposeBag) arrayObservable .bind(to: tableView.rx.items(dataSource: dataSource)) .addDisposableTo(disposeBag)
  21. 2. Realm ͷ σʔλΛ UITableView ʹද ࣔͰ͖ΔΑ͏ʹ͢Δ Observable.changeset(from: realmResult) .subscribe(onNext:

    { [weak self] results, changes in // tableView の更新 }) .addDisposableTo(disposeBag) • RxRealm Ͱ༻ҙ͞Ε͍ͯΔϝιουΛ࢖͏͜ͱͰɺRealm ͷมߋΛ؂ࢹ͢Δ͜ͱ͕Ͱ͖·͢
  22. 2. Realm ͷ σʔλΛ UITableView ʹද ࣔͰ͖ΔΑ͏ʹ͢Δ Observable.changeset(from: realmResult) .subscribe(onNext:

    { [weak self] results, changes in // tableView の更新 }) .addDisposableTo(disposeBag) • RxRealm Ͱ༻ҙ͞Ε͍ͯΔϝιουΛ࢖͏͜ͱͰɺRealm ͷมߋΛ؂ࢹ͢Δ͜ͱ͕Ͱ͖·͢ Observable Observer
  23. 3. Realm ͷσʔλΛηΫγϣϯදࣔͰ ͖ΔΑ͏ʹ͢Δ • ઐ༻ͷ datasource Λ༻ҙ͢Δ • Realm

    σʔλΛखಈͰηΫγϣϯ෼ྨ͢Δ (=SectionModel) • SectionModel ͷ Observable Λ bind ͢Δ
  24. 3. Realm ͷσʔλΛηΫγϣϯදࣔͰ ͖ΔΑ͏ʹ͢Δ let dataSource = RxTableViewSectionedReloadDataSource <SectionModel<String, String>>()

    sectionModelObservable .bind(to: tableView.rx.items(dataSource: dataSource)) .addDisposableTo(disposeBag)
  25. 3. Realm ͷσʔλΛηΫγϣϯදࣔͰ ͖ΔΑ͏ʹ͢Δ let dataSource = RxTableViewSectionedReloadDataSource <SectionModel<String, String>>()

    sectionModelObservable .bind(to: tableView.rx.items(dataSource: dataSource)) .addDisposableTo(disposeBag) datasource sectionModel ͷ Observable
  26. 3. Realm ͷσʔλΛηΫγϣϯදࣔͰ ͖ΔΑ͏ʹ͢Δ let dataSource = RxTableViewSectionedReloadDataSource <SectionModel<String, String>>()

    sectionModelObservable .bind(to: tableView.rx.items(dataSource: dataSource)) .addDisposableTo(disposeBag) ·ͩࣗಈߋ৽Ͱ͖͍ͯ·ͤΜ (; _ ;)
  27. ·ͱΊ • RxSwift Λ࢖͏͜ͱͰ UITableView ͕؆ܿʹߏஙͰ ͖Δ • UIߋ৽ͱσʔλͷ؅ཧΛ෼཭͢Δ͜ͱ͕Ͱ͖Δ •

    ධ൑௨Γֶशίετ͸ߴ͍…·ͩ·ͩษڧ͕ඞཁ
  28. αϯϓϧίʔυ • ͷͪ΄Ͳ Github Ͱެ։͠·͢

  29. Library ReactiveX : http://reactivex.io/ RxSwift: https://github.com/ReactiveX/RxSwift RxRealm: https://github.com/RxSwiftCommunity/RxRealm RxDataSources: https://github.com/RxSwiftCommunity/RxDataSources

  30. ࢀߟ Link ϦΞΫςΟϒϓϩάϥϛϯά΁ͷཧղ͕ΠϚΠνͩͬͨͷͰ·ͱΊͯΈ ͨ http://system.blog.uuum.jp/entry/ %E3%83%AA%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96%E3 %83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82 %B0%E3%81%B8%E3%81%AE%E7%90%86%E8%A7%A3%E3%81%8C%E3%82%A 4%E3%83%9E%E3%82%A4%E3%83%81%E3%81%A0%E3%81%A3 SwiftͰRealmΛ࢖͏࣌ͷTips

    - Qiita http://qiita.com/nakau1/items/ a591d9cc34e5b575ceb5 RxSwiftͷUITableViewͱͷόΠϯσΟϯά·ͱΊ - Qiita http://qiita.com/ hironytic/items/71bc729abe73ab9f0879
  31. THANKS!!