UITableView 逐个单元格更改图像和标题位置

Question

我想知道是否有任何方法可以创建具有这种样式的表格视图：

我有一个包含标题和图像值的字典，我需要创建一个单元格一个 Image-Right / Title-Left，反之亦然。怎么能做到这样？

Answer 1

你可以通过setAffineTransform这样做：

• 使用一个原型单元格构建您的tableView，该单元格左侧有一个图像，右侧有一个标签
• 然后这样做：

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "YourCellIdentifier", for: indexPath) as! YourTableViewCell

    if (indexPath.row % 2 == 0) {
        cell.contentView.layer.setAffineTransform(CGAffineTransform(scaleX: -1, y: 1))
        cell.YourImage.layer.setAffineTransform(CGAffineTransform(scaleX: -1, y: 1))
        cell.YourLabel.layer.setAffineTransform(CGAffineTransform(scaleX: -1, y: 1))
    }

    // do what ever you want ...

    return cell
}

最好的解决方案也是定义 2 个原型单元，但在您的情况下，这是实现目标的一种棘手且快速的方法。

Answer 2

是的，您可以使用表格视图来满足您的要求。您需要按照以下步骤操作。

方法一：

• 创建两个表格视图单元格XIB，一个带有左侧标签和右侧图像，第二个带有左侧图像和右侧图像。
• 保留您创建的两个 XIB 的同一类，但标识符不同。

• 在您的表格视图cellForRowAtIndexPath 方法中实现以下逻辑。

  extension ViewController: UITableViewDataSource {
  
      func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
          return datasourceArray.count
      }
  
      func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
          if(indexPath.row % 0 == 0) {
              let cell = tableView.dequeueReusableCell(withIdentifier: "RightLabelTableViewCell", for: indexPath) as! CustomTablViewCell
              cell.model = datasourceArray[indexPath.row]
              return cell
          } else {
              let cell = tableView.dequeueReusableCell(withIdentifier: "LeftLabelTableViewCell", for: indexPath) as! CustomTablViewCell
              cell.model = datasourceArray[indexPath.row]
              return cell
           }
         }
       }
  

注意：您可以为 TableViewCell 使用一个类和一个不同的类 标识符并相应地设计您的 xib。

方法二：

翻转表格视图单元格的内容视图，以便它们在您的 UI 中交换。

将以下代码添加到您的 cellForRowAtIndexPath 中并添加 else 部分，因为一行的单元格可能会因为出队而表现异常：

 extension UIView {
    /// Flip view horizontally.
    func flipX() {
        transform = CGAffineTransform(scaleX: -transform.a, y: transform.d)
    }
 }

用法：

cell.contentView.flipX()
cell.yourImage.flipX()
cell.youImageName.flipX()

不要忘记在cellForRowAt方法中添加else部分。

Answer 3

实际上有很多方法可以做到这一点：

1. 创建 2 个单元格。有 2 个像 OddTableViewCell 和 EvenTableViewCell 这样的单元格。您可以选择在cellForRow 方法中使用的索引路径，例如：

   extension ViewController: UITableViewDataSource {
   
       func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
           return dataArray.count
       }
   
       func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
           if(indexPath.row%0 == 0) {
               let cell = tableView.dequeueReusableCell(withIdentifier: "EvenTableViewCell", for: indexPath) as! EvenTableViewCell
               cell.model = dataArray[indexPath.row]
               return cell
           } else {
               let cell = tableView.dequeueReusableCell(withIdentifier: "OddTableViewCell", for: indexPath) as! OddTableViewCell
               cell.model = dataArray[indexPath.row]
               return cell
           }
       }
   
   }
   

2. 有一个单元格但有重复的视图，因此您有 2 个标签和 2 个图像视图。然后根据需要隐藏它们：

   class MyCell: UITableViewCell {
   
       @IBOutlet private var leftImageView: UIImageView?
       @IBOutlet private var rightImageView: UIImageView?
   
       @IBOutlet private var leftLabel: UILabel?
       @IBOutlet private var rightLabel: UILabel?
   
       var userImage: UIImage? {
           didSet {
               refresh()
           }
       }
       var userName: String? {
           didSet {
               refresh()
           }
       }
       var imageOnLeft: Bool = false {
           didSet {
               refresh()
           }
       }
   
       func refresh() {
           leftImageView?.image = imageOnLeft ? userImage : nil
           leftImageView?.isHidden = !imageOnLeft
           rightImageView?.image = imageOnLeft ? nil : userImage
           rightImageView?.isHidden = imageOnLeft
   
           leftLabel?.text = imageOnLeft ? nil : userName
           leftLabel?.isHidden = imageOnLeft
           rightLabel?.text = imageOnLeft ? userName : nil
           rightLabel?.isHidden = !imageOnLeft
       }
   
   }
   

3. 有一个带有堆栈视图的单元格。在堆栈视图上添加标签和图像视图。您可以更改堆栈视图中的项目顺序。可以在here 找到一些有希望的答案。其余的应该与第二种解决方案非常相似。

(4.) 你也可以只使用一个集合视图并拥有一个标签单元格和一个图像单元格。

Answer 4

• 创建一个具有 2 个图像和 2 个左右标签的单元格
• 当您转到左侧图像时，隐藏右侧图像时与标签中相同。

细胞

import UIKit

class TestTableViewCell: UITableViewCell {

    @IBOutlet weak var lbl_left: UILabel!
    @IBOutlet weak var lbl_right: UILabel!
    @IBOutlet weak var img_right: UIImageView!
    @IBOutlet weak var img_left: UIImageView!

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    func configure_cell(left:Bool)
    {
        if left{
            img_left.isHidden = true
            img_right.isHidden = false
            lbl_left.isHidden = false
            lbl_right.isHidden = true
            self.img_right.image = UIImage(named: "testimg")
        }else{
            img_left.isHidden = false
            img_right.isHidden = true
            lbl_left.isHidden = true
            lbl_right.isHidden = false
            self.img_left.image = UIImage(named: "testimg")
        }
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

视图控制器

extension ViewController:UITableViewDataSource,UITableViewDelegate
{
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5
    }
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 120
    }
    func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
        return 120
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
    {
        let cell = tableView.dequeueReusableCell(withIdentifier: "TestTableViewCell", for: indexPath) as? TestTableViewCell
        if (indexPath.row + 1) % 2 == 0 {
            cell?.configure_cell(left: true)
        } else {
            cell?.configure_cell(left: false)
        }

        return cell!
    }
}