Middle
How can you implement the functionality of obtaining the index of the tapped column and changing the color of another column within ten columns and five blocks?
sobes.tech AI
Answer from AI
Using UICollectionView or UITableView.
For UICollectionView:
- Implement the
UICollectionViewDelegate. - In the method
collectionView(_:didSelectItemAt:), getindexPath.item(the column index in the section). - Determine the index of another column to change its color (for example,
indexPath.item + 1or a specified index). - Get the cell at this other index using
collectionView.cellForItem(at: IndexPath(item: other_index, section: indexPath.section)). - Change the background color or another element of the cell.
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let tappedColumnIndex = indexPath.item
print("Tap on column with index: \(tappedColumnIndex)")
// Example: change the color of the next column
let nextColumnIndex = tappedColumnIndex + 1
if nextColumnIndex < collectionView.numberOfItems(inSection: indexPath.section) {
let nextIndexPath = IndexPath(item: nextColumnIndex, section: indexPath.section)
if let cell = collectionView.cellForItem(at: nextIndexPath) {
// Change the cell's background color
cell.contentView.backgroundColor = .blue
}
}
}
For UITableView with multiple sections, each representing a block, and cells in a section representing columns:
- Implement the
UITableViewDelegate. - In the method
tableView(_:didSelectRowAt:), getindexPath.row(the column index in the block) andindexPath.section(the block index). - Determine the index of another column to change its color (for example,
indexPath.row + 1) in the same or another block. - Get the cell at this other index using
tableView.cellForRow(at: IndexPath(row: other_index, section: other_section)). - Change the background color or another element of the cell.
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
let tappedColumnIndex = indexPath.row
let tappedBlockIndex = indexPath.section
print("Tap on column \(tappedColumnIndex) in block \(tappedBlockIndex)")
// Example: change the color of the next column in the same block
let nextColumnIndex = tappedColumnIndex + 1
if nextColumnIndex < tableView.numberOfRows(inSection: indexPath.section) {
let nextIndexPath = IndexPath(row: nextColumnIndex, section: indexPath.section)
if let cell = tableView.cellForRow(at: nextIndexPath) {
// Change the cell's background color
cell.contentView.backgroundColor = .red
}
}
}
Important nuances:
- To correctly display color changes when reusing cells (dequeuing), you need to save the state (which columns are changed) and apply it in
collectionView(_:cellForItemAt:)ortableView(_:cellForRowAt:). - Instead of changing the cell's color itself, it's better to change the color of a view inside it (e.g.,
contentView.backgroundColor). - With ten columns and five blocks, a
UICollectionViewwith horizontal scrolling (or aUIStackViewinside aUITableViewCell) might be a more suitable architectural solution, representing columns as elements inside cells. - If "five blocks" imply 5 independent sets of 10 columns, then a
UITableViewwith 5 sections, each containing 10 cells, is also a viable option. - A
UIStackViewinside aUITableViewCellorUICollectionViewCellcan represent 10 columns, and tapping on one of its subviews (representing a column) can determine its index and change the color of another subview. To detect taps on subviews within aUIStackView, you can useUITapGestureRecognizer.
// Example with UITextField inside a UIStackView within a UITableViewCell
class ColumnCell: UITableViewCell {
let stackView = UIStackView()
var columnTappedHandler: ((Int, Int) -> Void)? // (blockIndex, columnIndex)
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
setupStackView()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func setupStackView() {
stackView.axis = .horizontal
stackView.distribution = .fillEqually
contentView.addSubview(stackView)
stackView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
stackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
stackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
stackView.topAnchor.constraint(equalTo: contentView.topAnchor),
stackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
])
// Add 10 text fields as columns
for i in 0..<10 {
let textField = UITextField()
textField.borderStyle = .roundedRect
textField.textAlignment = .center
// Add tap gesture recognizer
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleColumnTap(_:)))
textField.addGestureRecognizer(tapGesture)
textField.isUserInteractionEnabled = true
textField.tag = i // Column identifier
stackView.addArrangedSubview(textField)
}
}
@objc private func handleColumnTap(_ gesture: UITapGestureRecognizer) {
guard let tappedView = gesture.view else { return }
let columnIndex = tappedView.tag
// Obtain block index from external context (e.g., via a stored property set in cellForRowAt)
let blockIndex = 0 // Example: need to get the actual block index
columnTappedHandler?(blockIndex, columnIndex)
}
// Method to change column color from outside
func setColumnColor(columnIndex: Int, color: UIColor) {
if columnIndex < stackView.arrangedSubviews.count {
stackView.arrangedSubviews[columnIndex].backgroundColor = color
}
}
}
// In `tableView(_:cellForRowAt:)` method:
// Set `columnTappedHandler` and pass the current `indexPath.section`
// Inside the handler, call `tableView.cellForRow(at:)` to get the relevant cell and call `setColumnColor` on it.