iOS Swift5从0到1系列(十三):走入 UICollectionView(二):自定义组件(二):轮播图(BannerView)

·  阅读 1188

一、前言

上篇,我们简单了解了 UICollectionView,本篇,我们将基于 UICollectionView 来封装我们的第二个组件:轮播图(BannerView);BannerView 是我们最常见的一种 UI组件,通常,最吸睛的就是它,比如:广告运营、商品活动等,都会使用,是一个核心流量入口。

说起 BannerView 我这里再稍微废话一点 iOS 历史:

  • 曾经,在 iOS 6.0 之前,如果要写一个 BannerView,我们只能用 UIScrollView 来完成(需要自己设计 View 复用);
  • iOS 6.0 之后,有了 UICollectionView (上篇大家如果注意到源码,就应该知道,它实际是继承于 UIScrollView),我们就可以简单的直接用它来开发,系统提供了复用 Cell 的方式,不会担心内存 OOM;

二、轮播图(BannerView)效果

老规矩,正式进入开发之前,我们先来直观看一下效果(程序中的图片来自一个朋友所在的跨境电商公司,直接给找的图,欧美口味):

BannerView.gif

效果如上,一个简单的左右无限轮播图组件。

三、手动创建组件

我们在学习《圆形进度条》组件时,已经和大家聊过,如何使用手动方式创建库,这里我就不再累述,大家忘记了的直接去看之前的文章即可。

当我们创建好之后,并实现了如上功能,在本地集成测试时,当我们将该源码拖入工程中,如果我们有依赖第三方库,这时,Xcode 会自动帮我们去下载,如下图(我们这个 BannerView 依赖了第三方 SDWebImage 库):

local-spm-banner-view.png

我们可以很清楚的看到,拖入组件后,Xcode 会自动分析 Package.swift,当发现我们有依赖第三方时,会去自行下载(比 CocoaPods 智能、方便多了),最主要的是,这几天,咱们大强国开会,Github 简直X了狗了,除非你 VPN。

四、双库支持

同样,我们开发的组件,既要能支持 CocoaPods 也要能支持 SPM,两库配置如下:

4.1、SPM 配置

// swift-tools-version:5.3
// The swift-tools-version declares the minimum version of Swift required to build this package.
import PackageDescription

let package = Package(
    // 库名
    name: "BannerView",
    
    // 支持的平台列表
    platforms: [.iOS(.v10)],
    
    // 对外支持的功能
    products: [
        .library(name: "BannerView", targets: ["BannerView"]),
    ],
    
    // 外部依赖
    dependencies: [
        // 依赖 SDWebImage
        .package(name: "SDWebImage", url: "https://gitee.com/mirrors/SDWebImage", from: "5.1.0")
    ],

    // 指定源码目录(如果不指定,默认目录名是:Sources/*.*)
    targets: [
        .target(name: "BannerView", dependencies: ["SDWebImage"], path: "Source")
    ],
    
    // 支持的 swift 版本,从 5 开始
    swiftLanguageVersions: [.v5]
)
复制代码

4.2、CocoaPods 配置

Pod::Spec.new do |s|
  s.name             = 'BannerView'
  s.version          = '1.0.0'
  s.summary          = 'A View Component for CountDown'

  s.description      = <<-DESC
  TODO: Add long description of the pod here.
  DESC

  s.homepage         = 'https://github.com/qingye/ios-swift-demo/BannerView'
  s.license          = { :type => 'MIT', :file => 'LICENSE' }
  s.author           = { '青叶小小' => '24854015@qq.com' }
  s.source           = { :git => 'https://github.com/qingye/ios-swift-demo/BannerView.git', :tag => s.version.to_s }

  s.ios.deployment_target = '10.0'
  s.source_files = 'Source/**/*.swift'
  
  s.dependency 'SDWebImage', '~> 5.0'

end
复制代码

4.3、源码结构

src-structure.png

源码就两文件,大家一看就知道大致的逻辑与实现。

五、轮波图(BannerView)开发

5.1、Cell 布局

一般 Banner 都是只有图片,偶有文字(有文字的都是新闻类,或者 PC 网页版,APP版很少有),所以,Cell 的布局也就很简单,放一个 UIImageView 即可,代码如下:

class BannerViewCell: UICollectionViewCell {
    var imageView: UIImageView?
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        imageView = UIImageView.init(frame: CGRect(x: 0, y: 0, width: frame.width, height: frame.height))
        self.addSubview(imageView!)
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }
}
复制代码

构造器重载及必要构造器重载,我也在之前的构造器分析中给出过《关键字 designated、convenience、required》,忘记了的大家可以去温习一下。

5.2、View 初始化及 Layout 设置

先定义 BannerPageView 及继承关系,暂时不给出具体代码

public class BannerPageView: UICollectionView, UICollectionViewDelegate, UICollectionViewDataSource {
    ......
}
复制代码

重写构造器,我们有两种方式,如上面 Cell 那种,直接重载,但还要多写个 required init ,或者,我们可以用扩展(extension),然后写个『便利构造器』,如下:

extension BannerPageView {
    // 便利构造器,调用方只需给出 frame,layout 由该 BannerView 内部实现
    public convenience init(frame: CGRect, loop: Bool) {
        let layout = UICollectionViewFlowLayout()
        ......
        // 必需调用 self.init,详见
        //《iOS Swift5 构造函数分析(一):关键字 designated、convenience、required》
        // https://juejin.cn/post/6932885089546141709
        self.init(frame: frame, collectionViewLayout: layout)
        ......
    }
}
复制代码

设置 layout

extension BannerPageView {
    // 便利构造器,调用方只需给出 frame,layout 由该 BannerView 内部实现
    public convenience init(frame: CGRect, loop: Bool) {
        let layout = UICollectionViewFlowLayout()
        // 这里是实现轮播,所以统一设置每一个 cell 的宽高
        // 如果想设置每一个 cell 的不同宽高,需要实现 collectionView(_:layout:sizeForItemAt:)
        layout.itemSize = CGSize(width: frame.width, height: frame.height)
        // 水平方向滚动(默认是垂直方向)
        layout.scrollDirection = .horizontal
        // 行最小间距(同一行 item 之间的水平间距)
        layout.minimumLineSpacing = 0
        // 列最小间距(相邻两行同一列 item 之间的垂直间距)
        layout.minimumInteritemSpacing = 0
        
        // 必需调用 self.init,详见
        //《iOS Swift5 构造函数分析(一):关键字 designated、convenience、required》
        // https://juejin.cn/post/6932885089546141709
        self.init(frame: frame, collectionViewLayout: layout)
        ......
    }
}
复制代码

设置 UICollectionView 的其它属性:委托、数据源、注册 cell 类等

// 仅该文件内变量可见
// 重复使用 cell 的 identifier
fileprivate let kBannerViewCell = "BannerViewCell"

extension BannerPageView {
    // 便利构造器,调用方只需给出 frame,layout 由该 BannerView 内部实现
    public convenience init(frame: CGRect, loop: Bool) {
        ......
        // 自己实现委托
        delegate = self
        // 自己实现数据源
        dataSource = self
        
        // 注册 cell,可以重复使用
        register(BannerViewCell.self, forCellWithReuseIdentifier: kBannerViewCell)
        // 默认背景:白色
        backgroundColor = .white
        // 每一个 item 为一页
        isPagingEnabled = true
        // 不显示水平滚动条
        showsHorizontalScrollIndicator = false
        // 不允许回弹
        bounces = false
    }
}
复制代码

5.3、暴露对外数据传递方法

public class BannerPageView: UICollectionView, UICollectionViewDelegate, UICollectionViewDataSource {
    fileprivate var urls: [String]?
    
    public func setUrls(_ urls: [String]) {
        // 原始数据:[a, b, c]
        self.urls = urls
        reloadData()
        layoutIfNeeded()
    }
}
复制代码

只需要 url 数组即可。

5.4、实现 UICollectionViewDataSource 必要方法

public class BannerPageView: UICollectionView, UICollectionViewDelegate, UICollectionViewDataSource {
    // MARK: UICollectionViewDataSource
    public func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        urls?.count ?? 0
    }
    
    public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: kBannerViewCell, for: indexPath) as! BannerViewCell
    
        let url = urls![indexPath.row]
        // SDWebImage 负责下载并加载图片
        cell.imageView?.sd_setImage(with: URL(string: url), placeholderImage: nil)
        
        return cell
    }
}
复制代码

5.5、封装 BannerView

import UIKit

public class BannerView: UIView {
    fileprivate var banner: BannerPageView?
    
    public override init(frame: CGRect) {
        super.init(frame: frame)
        
        banner = BannerPageView(frame: frame, loop: true)
        banner?.bannerDelegate = self
        addSubview(banner!)
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }
    
    public func setData(_ urls: [String]) {
        banner?.setUrls(urls)
    }
}
复制代码

5.6、HomeViewController 引用 BannerView 这里有问题!!!!!!!修改

import UIKit
import BannerView

class HomeViewController: BaseViewController {
    var bannerView: BannerView?
    override func viewDidLoad() {
        super.viewDidLoad()
        ......
        addBannerView()
        ......
    }
    ......
    func addBannerView() {
        bannerView = BannerView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 200), loop: true)
        bannerView?.setUrls([
            "https://cdn-1.blushmark.com/blushmark/upimg/c1/ba/8c0793797057964bfa65a210f76a43aafbd1c1ba.gif",
            "https://cdn-1.blushmark.com/blushmark/upimg/d8/bd/3269b7e78582be3d7d17c194cc32fe8b4d48d8bd.jpg",
            "https://cdn-1.blushmark.com/blushmark/upimg/bd/f8/8c836e32bced64eef2a8d916d50081a38819bdf8.jpg"
        ])
        view.addSubview(bannerView!)
    }
}
复制代码

OK!大家再运行,应该没有任何问题。

六、BannerView 整体源码 & Github

整体源码地址:《传递门》

import UIKit
import SDWebImage

// 仅该文件内变量可见
// 重复使用 cell 的 identifier
fileprivate let kBannerViewCell = "BannerViewCell"

public class BannerPageView: UICollectionView, UICollectionViewDelegate, UICollectionViewDataSource {
    fileprivate var urls: [String]?
    
    public func setUrls(_ urls: [String]) {
        // 原始数据:[a, b, c]
        self.urls = urls
        reloadData()
        layoutIfNeeded()
    }
    
    // MARK: UICollectionViewDataSource

    public func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        urls?.count ?? 0
    }
    
    public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: kBannerViewCell, for: indexPath) as! BannerViewCell
    
        let url = urls![indexPath.row]
        // SDWebImage 负责下载并加载图片
        cell.imageView?.sd_setImage(with: URL(string: url), placeholderImage: nil)
        
        return cell
    }
}

extension BannerPageView {
    // 便利构造器,调用方只需给出 frame,layout 由该 BannerView 内部实现
    public convenience init(frame: CGRect, loop: Bool) {
        let layout = UICollectionViewFlowLayout()
        // 这里是实现轮播,所以统一设置每一个 cell 的宽高
        // 如果想设置每一个 cell 的不同宽高,需要实现 collectionView(_:layout:sizeForItemAt:)
        layout.itemSize = CGSize(width: frame.width, height: frame.height)
        // 水平方向滚动
        layout.scrollDirection = .horizontal
        // 行最小间距(同一行 item 之间的水平间距)
        layout.minimumLineSpacing = 0
        // 列最小间距(相邻两行同一列 item 之间的垂直间距)
        layout.minimumInteritemSpacing = 0
        
        // 必需调用 self.init,详见
        //《iOS Swift5 构造函数分析(一):关键字 designated、convenience、required》
        // https://juejin.cn/post/6932885089546141709
        self.init(frame: frame, collectionViewLayout: layout)
    
        // 自己实现委托
        delegate = self
        // 自己实现数据源
        dataSource = self
        
        // 注册 cell,可以重复使用
        register(BannerViewCell.self, forCellWithReuseIdentifier: kBannerViewCell)
        // 默认背景:白色
        backgroundColor = .white
        // 每一个 item 为一页
        isPagingEnabled = true
        // 不显示水平滚动条
        showsHorizontalScrollIndicator = false
        // 不允许回弹
        bounces = false
    }
}
复制代码
分类:
iOS
标签: