UICollectionView 網格視圖

一、新增UICollectionViewCell

• 宣告資料

  var colorview = UIView()
  var title = UILabel()
  var imageview = UIImageView()
  let WIDTH = UIScreen.main.bounds.size.width
  

• 建立資料

  override init(frame: CGRect) {
    super.init(frame: frame)
  
        colorview = UIView(frame: CGRect(x: 5,
                                         y: 5,
                                         width: (WIDTH - 10) / 5 - 15,
                                         height: 90))
    contentView.addSubview(colorview)
        title = UILabel(frame: CGRect(x: 0,
                                      y: 0,
                                      width: (WIDTH - 10) / 5 - 10,
                                      height: 40))
        title.textAlignment = .center
        title.textColor = UIColor.black
    contentView.addSubview(title)
        imageview = UIImageView(frame: CGRect(x: 5,
                                              y: 5,
                                              width: WIDTH / 3 - 20,
                                              height: WIDTH / 3 - 20))
        imageview.contentMode = .scaleToFill
    contentView.addSubview(imageview)
  }
  required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }
  

二、ViewController

• 加入協定

  class ViewControllertest: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
  

• 宣告資料

  var collectionview: UICollectionView!
  let WIDTH = UIScreen.main.bounds.size.width
  let HEIGHT = UIScreen.main.bounds.size.height
  

• viewDidLoad

  view.backgroundColor = UIColor.lightGray    
      // frame
      collectionview = UICollectionView(frame: CGRect(x: 0,
                                                    y: 0,
                                                    width: WIDTH,
                                                    height: HEIGHT),
                                      collectionViewLayout: UICollectionViewFlowLayout.self())
      // 委任
      collectionview.delegate = self
      collectionview.dataSource = self
      // 註冊cell, header, footer
      collectionview.register(collectionviewcell.self,
                              forCellWithReuseIdentifier: "cell")
      collectionview.register(UICollectionReusableView.self,
                              forSupplementaryViewOfKind: UICollectionElementKindSectionHeader,
                              withReuseIdentifier: "header")
      collectionview.register(UICollectionReusableView.self,
                              forSupplementaryViewOfKind: UICollectionElementKindSectionFooter,
                              withReuseIdentifier: "footer")
      // 背景
      collectionview.backgroundColor = UIColor.lightGray
      // 背景圖片
      //collectionview.backgroundView = UIImageView(image: UIImage?)
      // 允許點擊
      collectionview.allowsSelection = true
      // 允許雙點擊
      collectionview.allowsMultipleSelection = false
      // 垂直指示器
      collectionview.showsVerticalScrollIndicator = true
      // 水平指示器
      collectionview.showsHorizontalScrollIndicator = true
      // 指示器樣式
      collectionview.indicatorStyle = .default
      /*
      UIScrollViewIndicatorStyle
       .black       黑
       .white       白
       .default     預設
       */
      // 點選狀態列跳至最上方
      collectionview.scrollsToTop = true
      // 可否滑動
       / /collectionview.isScrollEnabled = false
     // 預加載
      collectionview.isPrefetchingEnabled = false
  view.addSubview(collectionview)
  

• UICollectionViewDelegate、UICollectionViewDataSource

  // 位置(top, left, bottom, right)
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
      return UIEdgeInsetsMake(5, 5, 5, 5)
  }
  // header frame
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
      return CGSize(width: 0,
                    height: 40)
  }
  // footer frame
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {
      if section == 2 {
          return CGSize(width: 0,
                        height: 40)
      }
      else {
          return CGSize(width: 0,
                        height: 0)
      }
  }
  // cell frame
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
      if indexPath.section == 0 {
          return CGSize(width: WIDTH / 3 - 10,
                        height: WIDTH / 3 - 10)
      }
      else {
          return  CGSize(width: (WIDTH - 10) / 5 - 4,
                         height: 100)
      }
  }
  // 垂直間距
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat{
      return 10
  }
  // 水平間距
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat{
      return 2.5
  }
  // header, footer 內容
  func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
      var tipview = UICollectionReusableView()
      let label = UILabel()
          label.frame.size = CGSize(width: WIDTH, height: 40)
          label.backgroundColor = UIColor.white
          label.layer.borderColor = UIColor.black.cgColor
          label.layer.borderWidth = 1
      if kind == UICollectionElementKindSectionHeader {
          tipview = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader,
                                                                    withReuseIdentifier: "header",
                                                                    for: indexPath)
          label.text = "   標題\(indexPath.section + 1)"
    }
    else if kind == UICollectionElementKindSectionFooter {
          tipview = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionFooter,
                                                                    withReuseIdentifier: "footer",
                                                                    for: indexPath)
          label.text = "   結尾"
      }
      tipview.addSubview(label)
      return tipview
  }
  // 組數
  func numberOfSections(in collectionView: UICollectionView) -> Int {
      return 3
  }
  // 內容數
  func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
      if section == 0 {
          return 9
      }
      else if section == 1{
          return 10
      } 
      else {
          return 5
      }
  }
  // 內容
  func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
      let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell",
                                                    for: indexPath) as! collectionviewcell
      cell.colorview.isHidden = indexPath.section == 0 ? true : false
      cell.title.isHidden = indexPath.section == 0 ? true : false
      cell.imageview.isHidden = indexPath.section == 0 ? false : true
  
      if indexPath.section == 0 {
          cell.imageview.image = UIImage(named: "\(indexPath.row + 1)")
      }
      else {
          cell.title.text = indexPath.section == 1 ? "\(indexPath.row + 1)" : "無標題"
          cell.colorview.backgroundColor = indexPath.section == 1 ? UIColor.brown : UIColor.cyan
      }
      cell.backgroundColor = .black
    return cell
  }
  // 點選觸發
  func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
      let alert = UIAlertController(title: "第 \(indexPath.section + 1) 部分",
                                    message: "第 \(indexPath.row + 1) 個",
                                    preferredStyle: .alert)
          let cancel = UIAlertAction(title: "取消",
                                     style: .cancel,
                                     handler: nil)
          alert.addAction(cancel)
      present(alert,
              animated: true,
              completion: nil)
  }
  

  圖片來源：NegativeSpace