Swiftpack.co - zgjff/JJCarouselView as Swift Package

Swiftpack.co is a collection of thousands of indexed Swift packages. Search packages.
See all packages published by zgjff.
zgjff/JJCarouselView 0.0.6
泛型、block、无任何第三方、易于扩展的轮播图框架
⭐️ 2
🕓 3 weeks ago
iOS
.package(url: "https://github.com/zgjff/JJCarouselView.git", from: "0.0.6")

JJCarouselView

GitHub swift-5.0 iOS-11.0 GitHub tag (latest by date) SwiftPM compatible Cocoapods

适用于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 = .vertical

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

cv.config.autoLoop = true

轮播间隔,默认5s

cv.config.loopTimeInterval = 5

轮播图内边局

cv.config.contentInset = .zero

2.2 展示数据

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

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

let carouselView: JJCarouselView<UIImageView, UIImage>
cv.config.display = { cell, image in
    cell.clipsToBounds = true
    cell.contentMode = .scaleAspectFill
    cell.image = image
}

2.2.2 展示网络图片

let carouselView: JJCarouselView<UIImageView, URL>
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 事件回调

点击事件

cv.event.onTap = { view, obj, index in
    ...
}

准备滑动到具体的index

cv.event.willMove = { idx in
    ...
}

已经滑动到具体的index

cv.event.didMove = { idx in
    ...
}

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

cv.event.onScroll = { fromIndex, toIndex, progress in 
    ...
}

Requirements

  • iOS 11.0+
  • Swift 5+

Installation

Swift Package Manager

Cocoapods

use_frameworks!
pod 'JJCarouselView'

GitHub

link
Stars: 2
Last commit: 3 weeks ago
jonrohan Something's broken? Yell at me @ptrpavlik. Praise and feedback (and money) is also welcome.

Swiftpack is being maintained by Petr Pavlik | @ptrpavlik | @swiftpackco | API | Analytics