Swift 实现多样式列表

2017-09-11 本文已影响0人浅寒

设计图.jpeg

如图，我们在开发中经常需要完成这样的多样式的列表，特别是电商行业，不知道大家都是怎么实现的？接下来我来说说我的实现方式，不足之处或有好的想法的欢迎也分享我下，谢谢。限于篇幅和保密问题，文章中会有些地方省略掉，这里主要讲的是思路。

创建每个section布局结构协议 RecommentDataProtocol.swift

  // 数据结构类型
  enum RecommemtDataType {
      case banner             // 轮播图
      case shoseIcon          // 图标选项
  }
  // 表头信息
  struct SectionHeader {
      var sectionTitle: String
      init(sectionTitle: String) {
           self.sectionTitle =  sectionTitle
      }
      // 这里可以根据需求增加标题属性，比如
      // var height: CGFloat {
      //    return 10.0
      // }
  }
  // 每个 section 对应的数据属性
  protocol RecommentDataProtocol {
      var dataType: RecommemtDataType { get }
      var rowCount: Int { get set }   // 每个 section 显示的行数，set 方法可以用 mutating func setRowCount(rowCount: Int) 代替
      var size: CGSize { get }        // 每一行的大小，用 UICollectionView 所以是 size
      var sectionHeader: SectionHeader { get }
  }
  // 设置默认值
  extension RecommentDateProtocol {
       var rowCount: Int {
           get {
               return 1
           }
           set {
               rowCount = newValue
           }
      } 
      var size: CGSize {
           return CGSize(width: 0.0, height: 0.0)
      }
  }

创建 RecommemtDataType 对应的数据模型：BannerModel.swift、ShosenIconModel.swift，这里的代码没啥好说的，根据服务器返回的数据结构解析就OK

创建整个列表的数据模型 RecommentBaseModel.swift，这里包含了所有要显示的数据集合

class RecommentBaseModel: BaseModel { 
    var banners: [BannerModel]         = [BannerModel]()
    var shoseIcons: [ShosenIconModel]  = [ShosenIconModel]()
    // 网络请求，这里使用的 MVVM 设计模式，我选择数据请求放在这里（model）
    func loadRecommentData(completeHandler: @escaping (_ message: String, _ isSuccess: Bool) -> Void) -> Void {
    // 解析数据得到 banners、shoseIcons 数据集 
    。。。。。。
    }
}

创建 viewModel 协议 RecommentViewModelProtocol.swift，关于面向协议编程的理解可以看这里

protocol RecommentViewModelProtocol {
    var items: [RecommentDataProtocol] { get set }
    var recommentModel: RecommentBaseModel { get set }
}

创建 viewModel：RecommentBannerViewModel.swift、RecommentShosenIconViewModel.swift、RecommentViewModel.swift

/* *
 * RecommentBannerViewModel.swift、RecommentShosenIconViewModel.swift 要实现 RecommentDataProtocol 协议 
 */
// 轮播图 viewModel
final class RecommentBannerViewModel: RecommentDataProtocol {
    var dataType: RecommemtDateType {
        return .banner
    }
    var size: CGSize {
       return CGSize(width: SYSTEMMACROS_SCREEN_WIDTH, height: FITSCREEN(f: 190.0))
    }
   var sectionHeader: SectionHeader = SectionHeader(sectionTitle: "")
   var banners: [BannerModel] = []
}
// icon 选项 viewModel
final class RecommentShosenIconViewModel: RecommentDataProtocol { 
   var dataType: RecommemtDateType {
       return .shoseIcon
   }
   var sectionHeader: SectionHeader = SectionHeader( sectionTitle: "")
   var size: CGSize {
       return CGSize(width: SYSTEMMACROS_SCREEN_WIDTH, height: FITSCREEN(f: 90.0))
   }
   var shoseIcons: [ShosenIconModel] = [ShosenIconModel]()
}
// 推荐列表 viewModel
final class RecommentViewModel: RecommentViewModelProtocol {
    var items: [RecommentDateProtocol]     = []
    var recommentModel: RecommentBaseModel = RecommentBaseModel()  // viewModel 关联 Model
    func loadRecommentData(completeHandler: @escaping (_ message: String, _ isSuccess: Bool) -> Void) -> Void {
          // 加载数据
          self.recommentModel.loadRecommentDate { (message: String, isSuccess: Bool) in
          self.items.removeAll()
          // 获取轮播图信息
          let bannerViewModel: RecommentBannerViewModel = RecommentBannerViewModel()
          bannerViewModel.banners                       = self.recommentModel.banners
          self.items.append(bannerViewModel)
          // 获取选项信息
          let shoseIconViewModel        = RecommentShosenIconViewModel()
          shoseIconViewModel.shoseIcons = self.recommentModel.shoseIcons
          self.items.append(shoseIconViewModel)
          completeHandler(message, isSuccess)
      }
    }
}

创建 banner 和 shoseIcon 要显示的 View

/**
 * 列表用的是 UICollectionView 所以这里的 View 都继承自 UICollectionViewCell
 */
// 轮播图界面
class RecommentBannerCollectionViewCell: UICollectionViewCell { 
    // TODO：关于界面的实现细节这里就不写了
    var bannerViewModel: RecommentBannerViewModel? {        // 关联viewModel
       didSet {
           guard (bannerViewModel?.banners.count)! > 0 else {
              return
           }
           // TODO：给界面赋值刷新显示
       }
}
// icon 选项界面
class ShoseIconsCollectionViewCell: UICollectionViewCell { 
    // TODO：关于界面的实现细节这里就不写了
    var shoseIconViewModel: RecommentShosenIconViewModel = RecommentShosenIconViewModel() {
       didSet { 
          // TODO：给界面赋值刷新显示
       }
    }
}

创建 RecommentViewController.swift

fileprivate let kBannerCellIdentifier        = "kBannerCellIdentifier"
fileprivate let kShoseCellIdentifier         = "kShoseCellIdentifier" 
// MARK:  - life cyclic
class RecommentViewController: BaseViewController {
    var viewModel: RecommentViewModel = RecommentViewModel()   // 关联viewModel
    var recommentCollectionView: UICollectionView?             // 实现细节省略。。。
    override func viewDidLoad() {
        super.viewDidLoad()
        setupView()  // 初始化添加 recommentCollectionView
    }
    func setupView() {
       initRecommentCollectionView()
    }
   // MARK: init subview
   private func initRecommentCollectionView() -> Void {
      let layout = UICollectionViewFlowLayout()
      recommentCollectionView = UICollectionView(frame: view.bounds, collectionViewLayout: layout)
      recommentCollectionView?.backgroundColor  = .white
      recommentCollectionView?.autoresizingMask = [.flexibleHeight, .flexibleWidth]
      recommentCollectionView?.showsVerticalScrollIndicator   = false
      recommentCollectionView?.showsHorizontalScrollIndicator = false
      recommentCollectionView?.alwaysBounceVertical = true
      recommentCollectionView?.delegate   = self
      recommentCollectionView?.dataSource = self
  
      recommentCollectionView?.register(RecommentBannerCollectionViewCell.self, forCellWithReuseIdentifier: kBannerCellIdentifier)
      recommentCollectionView?.register(ShoseIconsCollectionViewCell.self, forCellWithReuseIdentifier: kShoseCellIdentifier)
      recommentCollectionView?.es_addPullToRefresh { 
         // 下拉刷新
         ProgressHub.show()
         self.viewModel.loadRecommentData(completeHandler: { (message: String, isSuccess: Bool) in
             self.recommentCollectionView?.es_stopPullToRefresh()
             guard isSuccess else {
                 ProgressHub.showStatus(statusString: message)
                 return
             }
             ProgressHub.dismiss()
             self.recommentCollectionView?.reloadData()
         })
      }
      recommentCollectionView?.es_startPullToRefresh()
      recommentCollectionView?.es_addInfiniteScrolling { 
          // TODO:上拉加载更多（这里只加载推荐商品）
          self.recommentCollectionView?.es_stopLoadingMore()
       }
      view.addSubview(recommentCollectionView!)
   }
}
// 布局
extension RecommentViewController: UICollectionViewDelegateFlowLayout { 
   func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { 
       // 关键点，省略大量 if 或 switch
       let item: RecommentDateProtocol = viewModel.items[indexPath.section]
       return item.size
   }
} 
// 实现代理
extension RecommentViewController: UICollectionViewDataSource { 
    func numberOfSections(in collectionView: UICollectionView) -> Int { 
        // 关键点，省略大量 if 或 switch
        return viewModel.items.count
    } 
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {  
        // 关键点，省略大量 if 或 switch
        let item: RecommentDateProtocol = viewModel.items[section]
        return item.rowCount
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let item: RecommentDateProtocol = viewModel.items[indexPath.section]
        // 这里也可以用抽象类代替 switch 的实现，但考虑到 cell 可能存在的各种操作事件交互，增加数据与事件关联的复杂度，暂时选择 switch
        switch item.dateType {
           case .banner: 
               let cell: RecommentBannerCollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: kBannerCellIdentifier, for: indexPath) as! RecommentBannerCollectionViewCell
               cell.bannerViewModel = item as? RecommentBannerViewModel
               return cell
           case .shoseIcon: 
               let cell: ShoseIconsCollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: kShoseCellIdentifier, for: indexPath) as! ShoseIconsCollectionViewCell
               cell.shoseIconViewModel = item as! RecommentShosenIconViewModel
               return cell
           default:
               break
        }
        return UICollectionViewCell()
    }
}

好啦，主要的过程已经实现完成，其实这个过程主要实现思想就是状态设计模式（statue pattern），大家可以去具体了解下该设计模式。任何时候抽象的目的都是解耦、易扩展，这里减少了数据与界面的耦合性，同时当需要增加新的类型的时候，只要在 RecommemtDataType 增加类型，实现对应的 viewModel 实现 RecommentDataProtocol 协议，然后再在 UICollectionViewDataSource 的代理中实现对应的 switch 分支即可，更易扩展。当然在抽象时也会增加文件量，需要维护更多的文件，所以我们在写代码过程中需要根据需求，自我衡量，选择适当的方式，同时定期 review 和重构是有必要的。

Swift 实现多样式列表

猜你喜欢

热点阅读