Advanced TableView/CollectionView Design

This document describes a new design method of TableView which is the foundation of iOS.

Transcript

1. Advanced TableView / CollectionView Design nori Jun 2017 @1amageek Hello. #WWDC2017 Thank you Yahoo Japan
2. About 1amageek System Device Technology LSI design engineer iOS engineer iOS engineer 2017.5 ~ 2015.10 ~ 2009.4 ~ Bio
3. Bleu Salada OSS Library Bluetooth Library Firebase Library https://github.com/1amageek AssemblyLine Multitask Library
4. TableView is the basis of Mobile design. Facebook Twitter
5. Things to think about Mock UI Network Model API Sort ActionCount Scheme Pull to reload REST Background Kingfisher SDWebImage APIKit Session Cache
6. Design flow UI Network Model Load and Reload Bad network REST API Scheme Data Populate Version Migration Cache Non Blocking Frame rate Easy & Simple Latency
7. Design flow UI Network Model Load and Reload Bad network REST API Scheme Data Populate Version Migration Cache Non Blocking Frame rate Easy & Simple Latency
8. Solution AutoSync Database
9. Advanced TableView Design ≒ TableView Design with AutoSync Database
10. Reactive Cell Layout Without REST API Realtime reload TableView Design with AutoSync Database
11. Realtime reload 1. Write load function in viewDidLoad 2. Pull to refresh
12. Realtime reload 1. Write load function in viewDidLoad 2. Pull to refresh
13. Without REST API 1. Use mock until API is created 2. Parsing JSON / Model Mapping 3. AFNetworking / Alamofire / APIKit 4. Server engineer
14. Without REST API 1. Use mock until API is created 2. Parsing JSON / Model Mapping 3. AFNetworking / Alamofire / APIKit 4. Server engineer
15. Reactive Cell Layout 1. Create an API for user action 2. Parsing JSON / Model Mapping 3. Latency 4. Consistency ※ Firebase Realtime Databaseͱ͸ͳΜͳͷ͔ʁ
16. Reactive Cell Layout 1. Create an API for user action 2. Parsing JSON / Model Mapping 3. Latency 4. Consistency ※ Firebase Realtime Databaseͱ͸ͳΜͳͷ͔ʁ
17. DEMO
18. Feed Feed Feed Feed Sample App
19. class User: Object { dynamic var name: String? dynamic var profileImage: File? dynamic var bio: String? dynamic var feedIDs: Set<String> = [] dynamic var photoIDs: Set<String> = [] }
20. class Photo: Object { dynamic var data: File? dynamic var text: String? }
21. class Feed: Object { @objc enum ContentType: Int { case unknown case photo case movie } dynamic var userID: String? dynamic var contentType: ContentType = .unknown dynamic var contentID: String? dynamic var likeCount: Int = 0 override func encode(_ key: String, value: Any?) -> Any? { if key == "contentType" { return self.contentType.rawValue as Int } return nil } override func decode(_ key: String, value: Any?) -> Any? { if key == "contentType" { if let type: Int = value as? Int { self.contentType = ContentType(rawValue: type)! return self.contentType } } return nil } }
22. // Make photo sample (0..<6).forEach { (index) in let name: String = "\(index)" let image: UIImage = UIImage(named: name)! let data: Data = UIImageJPEGRepresentation(image, 0.7)! let file: File = File(data: data) let photo: Photo = Photo() photo.text = "This picture \(index) is very beautiful " photo.data = file photo.save({ (ref, error) in if let error = error { debugPrint(error) return } // relationship to user user.photoIDs.insert(ref!.key) // Make Feed sample let feed: Feed = Feed() feed.userID = user.key feed.contentType = .photo feed.contentID = ref!.key feed.save({ (ref, error) in if let error = error { debugPrint(error) return } // relationship to user user.feedIDs.insert(ref!.key) }) }) }
23. let options: SaladaOptions = SaladaOptions() options.limit = 10 options.ascending = false self.datasource = DataSource(parentKey: userID, referenceKey: "feedIDs", options: options, block: { [weak self](changes) in guard let tableView: UITableView = self?.tableView else { return } switch changes { case .initial: tableView.reloadData() case .update(let deletions, let insertions, let modifications): tableView.beginUpdates() tableView.insertRows(at: insertions.map { IndexPath(item: 0, section: $0) }, with: .automatic) tableView.deleteRows(at: deletions.map { IndexPath(item: 0, section: $0) }, with: .automatic) tableView.reloadRows(at: modifications.map { IndexPath(item: 0, section: $0) }, with: .automatic tableView.insertSections(IndexSet(insertions), with: .automatic) tableView.deleteSections(IndexSet(deletions), with: .automatic) tableView.reloadSections(IndexSet(modifications), with: .automatic) tableView.endUpdates() case .error(let error): print(error) } })
24. func configure(cell: TableViewCell, at indexPath: IndexPath) { self.datasource?.observeObject(at: indexPath.section, block: { (feed) in guard let feed: Feed = feed else { return } // Get user data User.observeSingle(feed.userID!, eventType: .value, block: { (user) in guard let user: User = user else { return } cell.titleView.titleLabel.text = user.name cell.titleView.dateLabel.text = self.dateFormatter.string(from: feed.updatedAt) if let ref: StorageReference = user.profileImage?.ref { cell.titleView.imageView.sd_setImage(with: ref, placeholderImage: nil) } }) // Switch content type switch feed.contentType { // Photo case .photo: // Get photo data Photo.observeSingle(feed.contentID!, eventType: .value, block: { (photo) in guard let photo: Photo = photo else { return } cell.detailView.detailLabel.text = photo.text cell.setNeedsLayout() if let ref: StorageReference = photo.data?.ref { cell.photoView.imageView.sd_setImage(with: ref, placeholderImage: nil) } }) // TODO: hide content default: break } }) }
25. var likeCount: Int = feed.likeCount cell.actionView.likeCountLabel.text = String(likeCount) cell.actionView.actionBlock = { likeCount += 1 cell.actionView.likeCountLabel.text = String(likeCount) feed.likeCount = likeCount }
26. Ads PXL Your photos will be born again as a wonderful art. This photo collage is what makes you feel more happy and pleased. Let's share the pixel art to all over the world. $0.99
28. Thank you '