JJCarouselView

适用于Swift的简单好用、易于扩展的轮播图框架

使用方法

一、初始化

因为本轮播图是泛型控件,所以在初始化的时候需要指定类型。

let carouselView: JJCarouselView<UIImageView, UIImage> = JJCarouselView(frame: CGRect.zero)

let carouselView: JJCarouselView<UIImageView, UIImage> = JJCarouselView(frame: CGRect.zero) {
    return UIImageView()
}

二、使用方法

2.1 基本设置

轮播图方向,默认从左->右

cv.config.direction = .ltr

是否自动轮播,默认true自动轮播

cv.config.autoLoop = true

轮播间隔,默认5s

cv.config.loopTimeInterval = 5

轮播图内边局

cv.config.contentInset = .zero

2.2 展示数据

本控件没指定将对应的数据源显示到容器的方法,所以需要自己去实现。只要在初始化JJCarouselView之后,设置config.display即可。

2.2.1 以最基本的展示本地图片的轮播图为例:

let carouselView: JJLocalImageCarouselView
cv.config.display = { cell, image in
    cell.clipsToBounds = true
    cell.contentMode = .scaleAspectFill
    cell.image = image
}

2.2.2 展示网络图片

let carouselView: JJWebImageCarouselView
cv.config.display = { cell, url in
    ...
    // 使用SDWebImage
    cell.sd_setImage(with: url)
    // 使用Kingfisher
    cell.kf.setImage(with: url)
}

2.2.3 展示任何你想轮播的内容

可以使用任何UIView的子类来展示任意对象,只需设定轮播图类型的Object遵守Equatable协议即可。

// 轮播Model,必须遵守Equatable协议
struct WebCarouselModel {
    let title: String
    let desc: String
    let url: URL
}

extension WebCarouselModel: Equatable {
    static func == (lhs: Self, rhs: Self) -> Bool {
        return (lhs.title == rhs.title) && (lhs.desc == rhs.desc)
    }
}

// 轮播控件
final class WebCarouselView: UIView {}

let cv: JJCarouselView<WebCarouselView, WebCarouselModel> = JJCarouselView(frame: CGRect(x: 50, y: 0, width: 200, height: 150), initialize: nil)
cv.config.display = { cell, object in
    cell.titleLabel.text = object.title
    cell.descLabel.text = object.desc
}
cv.datas = [
    WebCarouselModel(title: "这是第1个自定义轮播控件", desc: "这是第1个自定义轮播控件", url: URL(string: "https://www.baidu.com")!),
    WebCarouselModel(title: "这是第2个自定义轮播控件", desc: "这是第2个自定义轮播控件", url: URL(string: "https://www.zhihu.com")!),
    WebCarouselModel(title: "这是第3个自定义轮播控件", desc: "这是第3个自定义轮播控件", url: URL(string: "https://cn.bing.com")!),
]

2.3 轮播指示器

2.3.1 指示器控件

轮播图的pageView是可替换的,只需要替换成遵守JJCarouselViewPageable协议的类类即可。

cv.pageView = JJCarouselNumberPageView()

隐藏指示器,只需要将pageView设置成JJCarouselHiddenPageView。

cv.pageView = JJCarouselHiddenPageView()

当然你也可以自定义专属于你的指示器

class YourOwnPageView: UIView, JJCarouselViewPageable {
    ...
}

cv.pageView = YourOwnPageView()

2.3.2 指示器控件frame

默认底部居中显示指示器,当然你也可以设定任何位置。

// 根据数量来设定frame
cv.config.pageViewFrame = { pageView, _, carouselViewSize, totalDataCount in
    let pageSize = pageView.size(forNumberOfPages: totalDataCount)
    return CGRect(x: carouselViewSize.width - pageSize.width - 12, y: carouselViewSize.height - pageSize.height - 10, width: pageSize.width, height: pageSize.height)
}

// 固定大小
cv.config.pageViewFrame = { _, _, carouselViewSize, _ in
    return CGRect(x: carouselViewSize.width - 55, y: carouselViewSize.height - 30, width: 45, height: 20)
}

2.4 事件回调

点击事件

// 使用block
cv.event.onTap = { view, obj, index in
    ...
}
// 使用Combine框架
cv.event.onTapPublisher.sink { view, obj, idx in
    ...
}.store(in: &cancellable)

准备滑动到具体的index

// 使用block
cv.event.willMove = { idx in
    ...
}
// 使用Combine框架
cv.event.willMovePublisher.sink(receiveValue: { idx in
    ...
}).store(in: &cancellable)

已经滑动到具体的index

// 使用block
cv.event.didMove = { idx in
    ...
}
// 使用Combine框架
cv.event.didMovePublisher.sink(receiveValue: { idx in
    ...
}).store(in: &cancellable)

滑动回调(当前index, 目标index, 进度)

// 使用block
cv.event.onScroll = { fromIndex, toIndex, progress in 
    ...
}
// 使用Combine框架
cv.event.onScrollPublisher.sink(receiveValue: { fromIndex, toIndex, progress in
    ...
}).store(in: &cancellable)

使用需求

• iOS 9.0+
• Swift 5+

安装

Swift Package Manager

• File > Swift Packages > Add Package Dependency
• Add https://github.com/zgjff/JJCarouselView.git

Cocoapods

use_frameworks!
pod 'JJCarouselView'