swift UICollectionView 的使用:横向滚动视

1.首先你需要继承于 UICollectionViewCell 实现自定义的 CusCollectionCell ,当然你也可以直接使用系统的 UICollectionViewCell

class CusCollectionCell: UICollectionViewCell {
  
  var logoImage: UIImageView!
  var nameLabel:UILabel!
  var bottomLabel:UILabel!

  override init(frame: CGRect) {
    super.init(frame: frame)
    let space:CGFloat = 5.0
    let ImageSide = self.frame.height-50
    logoImage = UIImageView.init(frame: CGRectMake(0, 0, ImageSide, ImageSide))
    logoImage.image = UIImage.init(named: "placeholder")
    logoImage.layer.cornerRadius = 3.0
    self.addSubview(logoImage)
    
    nameLabel = UILabel.init(frame: CGRectMake(0, space+ImageSide, self.frame.width, 20))
    nameLabel.text = "名称"
    nameLabel.textAlignment = .Center
    nameLabel.textColor = UIColor.darkGrayColor()
    nameLabel.font = UIFont.systemFontOfSize(15)
    self.addSubview(nameLabel)
    
    bottomLabel = UILabel.init(frame: CGRectMake(0, space*2+ImageSide+20, self.frame.width, 20))
    bottomLabel.text = "底部文字"
    bottomLabel.font = UIFont.systemFontOfSize(14)
    bottomLabel.textAlignment = .Center
    self.addSubview(bottomLabel)
  }
  required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }
  
}

2.之后便可以实现横向滚动视图类 HorizontalCollectionView

class HorizontalCollectionView: UIView ,UICollectionViewDelegate,UICollectionViewDataSource{
  var dataArray:[Model] = []{ //数据源数组
    didSet{
      collectionView.reloadData()
    }
  }
  var collectionView:UICollectionView!
  // MARK: - system method
  override func awakeFromNib() {
    super.awakeFromNib()
    self.setUp()
  }
  override init(frame: CGRect) {
    super.init(frame: frame)
    self.setUp()
  }
  required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }
  // MARK: - public method
  func requestViewData() {
    //请求相关数据
    dataArray = [Model(),Model(),Model(),Model(),Model(),Model()]
  }
  // MARK: - private method
  private func setUp() {
    //创建布局对象
    let layout = UICollectionViewFlowLayout()
    //设置 cell 的大小
    layout.itemSize = CGSizeMake(self.frame.height-60, self.frame.height-10)
    //设置 cell 上下左右的间距
    layout.sectionInset = UIEdgeInsetsMake(5, 5, 5, 5)
    //设置滚动方向
    layout.scrollDirection = .Horizontal
    //创建网格视图
    collectionView = UICollectionView.init(frame: CGRectMake(0, 0, SCREEN_WIDTH, self.frame.height), collectionViewLayout: layout)
    collectionView.scrollsToTop = false
    collectionView.delegate = self
    collectionView.dataSource = self
    collectionView.backgroundColor = UIColor.whiteColor()
    self.addSubview(collectionView)
    //注册 cell
    collectionView.registerClass(CusCollectionCell.classForCoder(), forCellWithReuseIdentifier: "CusCollectionCell")
  }
  
  // MARK: - UICollectionViewDelegate
  func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return dataArray.count
  }
  func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("CusCollectionCell", forIndexPath: indexPath)
    return cell
  }
  func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
    print("点击了 cell")
  }
}
    let horizontalView = HorizontalCollectionView.init(frame: CGRectMake(0, 64, SCREEN_WIDTH, 120))
    self.view.addSubview(horizontalView)
    horizontalView.requestViewData()

注:
不论是使用系统 cell 或者纯代码自定义 cell ,都必须注册 ReuseIdentifier . 在 xib 中创建 cell ,则需要设置 Identifier

设置 Identifier .png
当你在控制台看到如下提示时,你需要检查你所设置的 layout 的总高度是否超出了 UICollectionView 的高度,如果没有超出,请继续看下一条

 CustomTabbar_S[12595:343448] the behavior of the UICollectionViewFlowLayout is not defined because:
 CustomTabbar_S[12595:343448] the item height must be less than the height of the UICollectionView minus the section insets top and bottom values, minus the content insets top and bottom values.
 CustomTabbar_S[12595:343448] The relevant UICollectionViewFlowLayout instance is <UICollectionViewFlowLayout: 0x7fdfd8c0d750>, and it is attached to <UICollectionView: 0x7fdfda817200; frame = (0 0; 375 120); clipsToBounds = YES; gestureRecognizers = <NSArray: 0x7fdfd8c10440>; layer = <CALayer: 0x7fdfd8c08bf0>; contentOffset: {0, 0}; contentSize: {0, 0}> collection view layout: <UICollectionViewFlowLayout: 0x7fdfd8c0d750>.
 CustomTabbar_S[12595:343448] Make a symbolic breakpoint at UICollectionViewFlowLayoutBreakForInvalidSizes to catch this in the debugger.

如果你在控制台看到了以上提示,同时看到了如下情况(如果你没隐藏水平滚动指示器的话),在对应的视图控制器中设置 self. automaticallyAdjustsScrollViewInsets = false 即可

属性 automaticallyAdjustsScrollViewInsets 的坑.png

期待你的评论建议O(∩_∩)O~