Collection 查看 - 如何 select 每个部分只有一个单元格
Collection View - How to select only one cell in each section
我的 collection 视图有多个部分。我想要实现的是,用户在每个部分中只能 select 一个单元格(答案)。 select编辑单元格(答案)后,背景颜色会发生变化。
我没能做到的是那个例子:当用户点击第 1 部分中的一个单元格时,我只想删除select第 1 部分中的另一个单元格。
下面是我的一些代码
@IBOutlet var step3CollectionView: UICollectionView!
var HexColor = HexColorClass()
var dataPageThree : json_PageThree!
var step3AnswerArray : [Int] = []
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
var frameCount = dataPageThree.step_instruction.first!.subquestions.count
for i in 0..<frameCount{
if indexPath.section == i {
step3AnswerArray[i] = (dataPageThree.step_instruction.first?.subquestions[i].subquestion_selection_answerNums![indexPath.row])!
let callCell = self.step3CollectionView.cellForItem(at: indexPath) as? Step3CollectionViewCell
callCell!.answerLabel.backgroundColor = HexColor.hexStringToUIColor(hex: "117577")
callCell!.answerLabel.textColor = UIColor.white
}
}
}
func collectionView(_ collectionView: UICollectionView, shouldSelectItemAt indexPath: IndexPath) -> Bool {
let indexPaths = collectionView.indexPathsForSelectedItems
if (indexPaths?.count) ?? 0 > 0 {
/// If you need simple way
for index in indexPaths! {
if index.section == indexPath.section {
self.step3CollectionView.deselectItem(at: index, animated: true) // if want deselect previous selection
let callCell = self.step3CollectionView.cellForItem(at: index) as? Step3CollectionViewCell
callCell!.answerLabel.backgroundColor = UIColor.white
callCell!.answerLabel.textColor = UIColor.black
//return false //if you do not want further selection
}
}
}
return true
}
需要一些指导。
首先将collectionView's
allowsMultipleSelection
属性设为true
,即
override func viewDidLoad() {
super.viewDidLoad()
self.step3CollectionView.allowsMultipleSelection = true
}
现在,UICollectionViewDelegate
方法 collectionView(_: shouldSelectItemAt:)
应该看起来像,
func collectionView(_ collectionView: UICollectionView, shouldSelectItemAt indexPath: IndexPath) -> Bool {
collectionView.indexPathsForSelectedItems?.filter({ [=11=].section == indexPath.section }).forEach({ collectionView.deselectItem(at: [=11=], animated: false) })
return true
}
此外,不要根据 cell's
选择更改 shouldSelectItemAt
或 didSelectItemAt
中 cell
的 backgroundColour
。
这使得代码庞大且冗余。
应该在 UICollectionViewCell
子类中通过覆盖 isSelected
属性.
class Step3CollectionViewCell: UICollectionViewCell {
override var isSelected: Bool {
didSet {
self.answerLabel.backgroundColor = isSelected ? HexColor.hexStringToUIColor(hex: "117577") : .white
self.answerLabel.textColor = isSelected ? .white : .black
}
}
}
有了上面的代码,就不用再在collectionView(_:didSelectItemAt:)
方法中写color
更改代码了。用于选择和取消选择 cell
的 UI 将自动处理。
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
step3AnswerArray[indexPath.section] = (dataPageThree.step_instruction.first?.subquestions[i].subquestion_selection_answerNums![indexPath.row])!
}
我的 collection 视图有多个部分。我想要实现的是,用户在每个部分中只能 select 一个单元格(答案)。 select编辑单元格(答案)后,背景颜色会发生变化。
我没能做到的是那个例子:当用户点击第 1 部分中的一个单元格时,我只想删除select第 1 部分中的另一个单元格。
下面是我的一些代码
@IBOutlet var step3CollectionView: UICollectionView!
var HexColor = HexColorClass()
var dataPageThree : json_PageThree!
var step3AnswerArray : [Int] = []
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
var frameCount = dataPageThree.step_instruction.first!.subquestions.count
for i in 0..<frameCount{
if indexPath.section == i {
step3AnswerArray[i] = (dataPageThree.step_instruction.first?.subquestions[i].subquestion_selection_answerNums![indexPath.row])!
let callCell = self.step3CollectionView.cellForItem(at: indexPath) as? Step3CollectionViewCell
callCell!.answerLabel.backgroundColor = HexColor.hexStringToUIColor(hex: "117577")
callCell!.answerLabel.textColor = UIColor.white
}
}
}
func collectionView(_ collectionView: UICollectionView, shouldSelectItemAt indexPath: IndexPath) -> Bool {
let indexPaths = collectionView.indexPathsForSelectedItems
if (indexPaths?.count) ?? 0 > 0 {
/// If you need simple way
for index in indexPaths! {
if index.section == indexPath.section {
self.step3CollectionView.deselectItem(at: index, animated: true) // if want deselect previous selection
let callCell = self.step3CollectionView.cellForItem(at: index) as? Step3CollectionViewCell
callCell!.answerLabel.backgroundColor = UIColor.white
callCell!.answerLabel.textColor = UIColor.black
//return false //if you do not want further selection
}
}
}
return true
}
需要一些指导。
首先将collectionView's
allowsMultipleSelection
属性设为true
,即
override func viewDidLoad() {
super.viewDidLoad()
self.step3CollectionView.allowsMultipleSelection = true
}
现在,UICollectionViewDelegate
方法 collectionView(_: shouldSelectItemAt:)
应该看起来像,
func collectionView(_ collectionView: UICollectionView, shouldSelectItemAt indexPath: IndexPath) -> Bool {
collectionView.indexPathsForSelectedItems?.filter({ [=11=].section == indexPath.section }).forEach({ collectionView.deselectItem(at: [=11=], animated: false) })
return true
}
此外,不要根据 cell's
选择更改 shouldSelectItemAt
或 didSelectItemAt
中 cell
的 backgroundColour
。
这使得代码庞大且冗余。
应该在 UICollectionViewCell
子类中通过覆盖 isSelected
属性.
class Step3CollectionViewCell: UICollectionViewCell {
override var isSelected: Bool {
didSet {
self.answerLabel.backgroundColor = isSelected ? HexColor.hexStringToUIColor(hex: "117577") : .white
self.answerLabel.textColor = isSelected ? .white : .black
}
}
}
有了上面的代码,就不用再在collectionView(_:didSelectItemAt:)
方法中写color
更改代码了。用于选择和取消选择 cell
的 UI 将自动处理。
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
step3AnswerArray[indexPath.section] = (dataPageThree.step_instruction.first?.subquestions[i].subquestion_selection_answerNums![indexPath.row])!
}