BannerView.swift,BannerCell.swift，StoryModel.swift

本文链接：https://blog.youkuaiyun.com/hianyu/article/details/68942313

本文介绍了一个使用SwiftUI实现的BannerView组件，通过RxSwift、RxDataSources和Kingfisher等库，实现了图片轮播功能，并能响应下拉操作调整图片大小。文章详细展示了如何配置UICollectionView以显示图片和标题，以及如何监听并处理用户选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在BannerView.swift文件中

import UIKit

import RxSwift

import RxDataSources

import RxCocoa

import Kingfisher

class BannerView: UICollectionView {

let imgUrlArr = Variable([storyModel]())

let dispose = DisposeBag()

var offY = Variable(0.0)

var bannerDelegate: BannerDelegate?

override func awakeFromNib() {

contentOffset.x = screenW

imgUrlArr

.asObservable()

.bindTo(rx.items(cellIdentifier: "BannerCell", cellType: BannerCell.self)) {

row, model, cell in

cell.img.kf.setImage(with: URL.init(string: model.image!))

cell.imgTitle.text = model.title!

}

.addDisposableTo(dispose)

//注意在这里设置setDelegate(self)方法就必须实现UIScrollViewDelegate的代理方法

rx.setDelegate(self).addDisposableTo(dispose)

//这块代码的作用是当BannerCell向下拉的时候，其中的图片也会相应的变大拉长。

offY

.asObservable()

.subscribe(onNext: { (offy) in

self.visibleCells.forEach { (cell) in

let cell = cell as! BannerCell

cell.img.frame.origin.y = CGFloat.init(offy)

cell.img.frame.size.height = 200 - CGFloat.init(offy)

}

})

.addDisposableTo(dispose)

//使用RxCocoa提供的另一个UITableView的扩展方法：modelSelected(_:)，它返回一个Observable，可以观察模型对象什么时候被选中了。获取到Observable后，调用subscribe(onNext:)方法，传入一个尾随闭包，在模型被选中时会调用这个闭包；

.modelSelected(storyModel.self)

.subscribe(onNext: { (model) in

self.bannerDelegate?.selectedItem(model: model)

})

.addDisposableTo(dispose)

}

extension BannerView: UIScrollViewDelegate {

func scrollViewDidScroll(_ scrollView: UIScrollView) {

if scrollView.contentOffset.x == CGFloat.init(imgUrlArr.value.count - 1) * screenW {

scrollView.contentOffset.x = screenW

}

else if scrollView.contentOffset.x == 0 {

scrollView.contentOffset.x = CGFloat.init(imgUrlArr.value.count - 2) * screenW

}

bannerDelegate?.scrollTo(index: Int(scrollView.contentOffset.x / screenW) - 1)

}

protocol BannerDelegate {

func selectedItem(model: storyModel)

func scrollTo(index: Int)

}

在BannerCell.swift文件中：

import UIKit

class BannerCell: UICollectionViewCell {

@IBOutlet weak var img: UIImageView!

@IBOutlet weak var imgTitle: UILabel!

override func awakeFromNib() {

// titlebackView.backgroundColor = UIColor.init(red: 0, green: 0, blue: 0, alpha: 0.05)

imgTitle.font = UIFont.boldSystemFont(ofSize: 21)

}

用到offY的一个地方：

func scrollViewDidScroll(_ scrollView: UIScrollView) {

bannerView.offY.value = Double(scrollView.contentOffset.y)

barImg.alpha = scrollView.contentOffset.y / 200

refreshView?.pullToRefresh(progress: -scrollView.contentOffset.y / 64)

}

在StoryModel.swift文件中：

import Foundation

import HandyJSON

struct listModel: HandyJSON {

var date: String?

var stories: [storyModel]?

var top_stories: [storyModel]?

}

struct storyModel: HandyJSON {

var ga_prefix: String?

var id: Int?

var images: [String]? //list_stories

var title: String?

var type: Int?

var image: String? //top_stories

var multipic = false

}