I want to toggle the state of another cell with a button tap in UICollectionViewCell - rx-swift

Question

The data and number of categories can be changed, so we implemented it as a collectionView.
Initially, I want only index 0 to be given the selected background color.
Also, when another button is selected, I want to give the selected background color only to the selected button.
What kind of code should I add? Please give me advice
(For reference, it consists of a collectionView within the tableViewCell.)
class CategoryTableViewCell: UITableViewCell {
let categoryList = ["All", "Question", "Community"]
override func awakeFromNib() {
super.awakeFromNib()
set(categoryList)
}
func set(_ dataList: [String]) {
Observable.of(dataList).bind(to: collectionView.rx.items(cellIdentifier: "CategoryCollectionViewCell", cellType: CategoryCollectionViewCell.self)) { _, data, cell in
cell.titleLabel.text = data
}
.disposed(by: disposeBag)
collectionView.rx.itemSelected
.subscribe(onNext: { [weak self] indexPath in
let cell = self?.collectionView.cellForItem(at: indexPath) as? CategoryCollectionViewCell
cell?.containerButton.isSelected = true
})
.disposed(by: disposeBag)
collectionView.rx.setDelegate(self)
.disposed(by: disposeBag)
}
}
class CategoryCollectionViewCell: UICollectionViewCell {
override func awakeFromNib() {
super.awakeFromNib()
if containerButton.isSelected {
titleLabel.textColor = .white
containerButton.backgroundColor = .black
} else {
titleLabel.textColor = .black
containerButton.backgroundColor = .white
}
}
}

Answer 1

In order to do this, you have to bind all three buttons to the same Observable source and that source has to listen to all three buttons. Each button will have its own logic for determining what it should look like.
I prefer to set this up in a stack view rather than a collection view because the collection view adds a bunch of unneeded functionality and complexity. However, if forced to use it for some reason, I would do something like this:
class CategoryTableViewCell: UITableViewCell {
enum Category: String, CaseIterable {
case all = "All"
case question = "Question"
case community = "Community"
}
private var collectionView: UICollectionView!
private(set) var disposeBag = DisposeBag()
override func prepareForReuse() {
super.prepareForReuse()
disposeBag = DisposeBag()
}
// call this from inside the tableView.rx.items closure.
func set() {
let selected = PublishSubject<Category>()
Observable.just(Category.allCases)
.bind(to: collectionView.rx.items(
cellIdentifier: "CategoryCollectionViewCell",
cellType: CategoryCollectionViewCell.self
)) { _, category, cell in
cell.configure(category: category, selected: selected.asObservable())
.bind(onNext: selected.onNext)
.disposed(by: cell.disposeBag)
}
.disposed(by: disposeBag)
collectionView.rx.setDelegate(self)
.disposed(by: disposeBag)
}
}
class CategoryCollectionViewCell: UICollectionViewCell {
private var titleLabel: UILabel!
private var containerButton: UIButton!
private(set) var disposeBag = DisposeBag()
override func prepareForReuse() {
super.prepareForReuse()
disposeBag = DisposeBag()
}
func configure(category: CategoryTableViewCell.Category,
selected: Observable<CategoryTableViewCell.Category>) -> Observable<CategoryTableViewCell.Category> {
titleLabel.text = category.rawValue
let isSelected = selected
.startWith(.all)
.map { $0 == category }
disposeBag.insert(
isSelected
.bind(to: containerButton.rx.isSelected),
isSelected.map { $0 ? UIColor.white : .black }
.bind(to: titleLabel.rx.textColor),
isSelected.map { $0 ? UIColor.black : .white }
.bind(to: containerButton.rx.backgroundColor)
)
return containerButton.rx.tap
.map { category }
.asObservable()
}
}