使用 CGAffineTransform 缩放 tableView 单元格以覆盖整个屏幕 [英] Scale tableView cell with CGAffineTransform to cover entire screen
问题描述
我有一个 tableView，当用户点击该单元格时，我希望该单元格扩展并用该颜色填充整个屏幕.目前，它会缩放以填满整个屏幕，但它上方的单元格也会显示.颜色来自 API，当用户点击生成"按钮时，每个单元格都会改变颜色.由于 API 的 JSON 文件的结构方式，我一次只希望屏幕上显示 5 种颜色.
I have a tableView where when a user taps on that cell, I want the cell to expand and fill the entire screen with that color. Currently, it does scale to fill the entire screen but the cells above it will also show. The colors come from an API and each cell changes color when the user taps the "Generate" button. Due to how the API's JSON file is structured, I only want 5 colors on the screen at a time.
我不明白为什么它上面的单元格没有向上移动，或者我如何将点击的单元格移动到屏幕顶部.我尝试偏移被点击的单元格的坐标并将其框架大小更改为 tableView tappedCell.bounds.size = CGSize(width: UIScreen.main.bounds.width, height: self.paletteTableView.bounds.height) 但是当我从顶部单击第一个或第二个单元格时，屏幕不会一直填充到底部.
I can't figure out why the cells above it don't move upwards or how I can move the clicked cell to the top of the screen. I've tried offsetting the coordinates of the tapped cell and changing its frame size to be the height of the tableView tappedCell.bounds.size = CGSize(width: UIScreen.main.bounds.width, height: self.paletteTableView.bounds.height) but when I click the 1st or 2nd cells from the top, the screen doesn't fill all the way to the bottom.
我也尝试从 UIView(此处称为 colorDetailsView)制作动画，但无法成功使其从点击的每个单元格的中心开始制作动画，只能从屏幕.
I've also tried animating from a UIView (called colorDetailsView here) but wasn't able to successfully get it to animate from the center of each cell that's tapped on, only from the center of the screen.
动画发生在这里:
@objc func userTap(sender: UITapGestureRecognizer) {
if sender.state == UIGestureRecognizer.State.ended {
let tapLocation = sender.location(in: self.paletteTableView)
if let tapIndexPath = self.tableView.indexPathForRow(at: tapLocation) {
if let tappedCell = self.tableView.cellForRow(at: tapIndexPath) {
UIView.animate(withDuration: 0.5, animations: {
switch self.currentAnimation {
case 0:
tappedCell.transform = CGAffineTransform(scaleX: 1, y: 50)
//...
case 1:
tappedCell.transform = .identity
default: break
}
} )
currentAnimation += 1
if currentAnimation > 1 {
currentAnimation = 0
} } } } }
完整代码:
class PaletteController: UIViewController, UITableViewDataSource, UITableViewDelegate {
let tableView = UITableView()
var colorPalette = [Color]()
var currentAnimation = 0
let colorDetailsView: UIView = {
let view = UIView()
return view
}()
override func viewDidLoad() {
super.viewDidLoad()
tableView.dataSource = self
tableView.delegate = self
tableView.isScrollEnabled = false
\\...
view.addSubview(colorDetailsView)
}
//Color cell expands to fill the screen of that color when user taps on the cell
@objc func userTap(sender: UITapGestureRecognizer) {
if sender.state == UIGestureRecognizer.State.ended {
let tapLocation = sender.location(in: self.tableView)
if let tapIndexPath = self.tableView.indexPathForRow(at: tapLocation) {
if let tappedCell = self.tableView.cellForRow(at: tapIndexPath) {
UIView.animate(withDuration: 0.5, animations: {
//When user taps on a cell, it is scaled to fill the screen with that color
switch self.currentAnimation {
case 0:
tappedCell.transform = CGAffineTransform(scaleX: 1, y: 50)
for i in 0..<self.colorPalette.count {
if tapIndexPath.row == i {
self.colorDetailsView.backgroundColor = UIColor(hexString: self.colorPalette[i])
}
}
case 1:
tappedCell.transform = .identity
default: break
}
} )
currentAnimation += 1
if currentAnimation > 1 {
currentAnimation = 0
}
}
}
}
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 5
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier:"ColorCell", for: indexPath)
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(userTap(sender:)))
cell.addGestureRecognizer(tapGesture)
cell.isUserInteractionEnabled = true
//Assigns a new color to each row. Colors are converted from HEX to RGB
for i in 0..<colorPalette.count {
if tapIndexPath.row == i {
cell.backgroundColor = UIColor(hexString: colorPalette[i])
}
}
return cell
}
}
当我将 tableView.isScrollEnabled 设置为 true 时，我知道单元格正在缩放，如下所示.每个单元格最终应该填满整个屏幕，并且不会被任何其他单元格覆盖，例如最顶部的单元格.理想情况下，我希望 tableView 不滚动，但我不确定如果禁用滚动，顶部单元格是否会向上移动".
I know the cell is scaling when I set tableView.isScrollEnabled to true, as shown below. Each cell should end up filling the whole screen and not get covered by any other cells, like the top-most cell. Ideally, I'd like the tableView to not scroll, but I'm not sure if the top cells will "move up" if scroll is disable.
感谢任何帮助！
推荐答案
单元格是表视图的所有子视图.您需要将点击的单元格带到子视图列表的前面.
The cells are after all sub-views of the table view. You need to bring the tapped cell at the front of the sub-view list.
我建议添加
tableView.bringSubviewToFront(tappedCell)
就在这条线之后
if let tappedCell = self.tableView.cellForRow(at: tapIndexPath) {.
看看这是否有效！
这篇关于使用 CGAffineTransform 缩放 tableView 单元格以覆盖整个屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
