ios - 如何以编程方式设置 UITableView header 的约束以同时支持 RTL 和 LTR？

Question

我正在使用 UITableView 的 viewForHeader 委托(delegate)来设置自定义 header View ，但我没有使用约束来设置它。所以现在我的应用程序也需要支持 RTL 语言。我的代码如下:

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let headerView = UIView(frame: CGRect(x: 0, y: 0, width: menuTableView.frame.size.width, height: 40))
let headerImage = UIImageView()
headerImage.frame = CGRect(x: 15, y: 15, width: 12, height: 12)
let headerLabel = UILabel()
headerLabel.frame = CGRect(x: headerImage.frame.origin.x + headerImage.frame.size.width + 20, y: 10, width:menuTableView.frame.size.width - 40, height: 20)
headerLabel.font = UIFont().robotoLight(withFontSize: 9)
headerLabel.textColor = CustomColor.menuGrey.color
let arrowImage = UIImageView()
arrowImage.isHidden = true
switch section {
case 1:
  headerImage.image = UIImage(named: "home_icon")
  headerLabel.text = "Home"
case 2:
  headerImage.image = UIImage(named: "my_Id_icon")
  headerLabel.text = "My ID"
case 3:
  headerImage.image = UIImage(named: "my_interest_icon")
  headerLabel.text = "My Account"
  arrowImage.isHidden = false
  if isFirstSectionHidden {
    arrowImage.frame = CGRect(x: menuTableView.frame.size.width - 30, y: 15, width: 3, height: 5)
    arrowImage.image = UIImage(named: "side_arrow")
  } else {
    arrowImage.frame = CGRect(x: menuTableView.frame.size.width - 30, y: 15, width: 5, height: 3)
    arrowImage.image = UIImage(named: "down_arrow")
  }
case 4:
  headerImage.image = UIImage(named: "my_profile_icon")
  headerLabel.text = "My Profile"
case 5:
  headerImage.image = UIImage(named: "language_icon")
  headerLabel.text = language
  arrowImage.isHidden = false
  if isSecondSectionHidden {
    arrowImage.frame = CGRect(x: menuTableView.frame.size.width - 30, y: 15, width: 3, height: 5)
    arrowImage.image = UIImage(named: "side_arrow")
  } else {
    arrowImage.frame = CGRect(x: menuTableView.frame.size.width - 30, y: 15, width: 5, height: 3)
    arrowImage.image = UIImage(named: "down_arrow")
  }

case 6:
  headerImage.image = UIImage(named: "notification_icon")
  headerLabel.text = "Notifications"
case 7:
  headerImage.image = UIImage(named: "about_us_icon")
  headerLabel.text = "About Us"
case 8:
  headerImage.image = UIImage(named: "faq_icon")
  headerLabel.text = "FAQ"
case 9:
  headerImage.image = UIImage(named: "contact_us_icon")
  headerLabel.text = "Contact Us"
case 10:
  headerImage.image = UIImage(named: "logout_icon")
  headerLabel.text = "Logout"
default:
  print("Something else")

}
let headerClick = UIButton(type: .custom)
headerClick.addTarget(self, action: #selector(self.headerAction), for: .touchUpInside)
headerClick.frame = CGRect(x: 0, y: 0, width: menuTableView.frame.size.width, height: 40)
headerClick.tag = section
headerClick.backgroundColor = UIColor.clear
headerView.addSubview(arrowImage)
headerView.addSubview(headerLabel)
headerView.addSubview(headerImage)
headerView.addSubview(headerClick)
return headerView

如何以编程方式设置 headerView 、 headerImage 和 headerLabel 的框架和约束以同时支持 LTR 和 RTL？

这是 UITableView 的示例图像:

Answer 1

我不完全确定我是否正确理解了您的布局，但它应该像这样工作:

override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 50
}

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let headerView = UIView()
    headerView.backgroundColor = .lightGray

    let headerImage = UIImageView()
    headerImage.translatesAutoresizingMaskIntoConstraints = false
    headerImage.backgroundColor = .red
    headerImage.widthAnchor.constraint(equalToConstant: 12).isActive = true
    headerImage.heightAnchor.constraint(equalToConstant: 12).isActive = true

    let headerLabel = UILabel()
    headerLabel.translatesAutoresizingMaskIntoConstraints = false
    headerLabel.backgroundColor = .blue

    let arrowImage = UIImageView()
    arrowImage.translatesAutoresizingMaskIntoConstraints = false
    arrowImage.backgroundColor = .green
    arrowImage.widthAnchor.constraint(equalToConstant: 5).isActive = true
    arrowImage.heightAnchor.constraint(equalToConstant: 5).isActive = true

    let headerClick = UIButton()
    headerClick.translatesAutoresizingMaskIntoConstraints = false
    headerClick.backgroundColor = .clear
    headerClick.isOpaque = false

    headerView.addSubview(headerImage)
    headerView.addSubview(headerLabel)
    headerView.addSubview(arrowImage)
    headerView.addSubview(headerClick)

    var constraints = [NSLayoutConstraint]()
    constraints.append(contentsOf: NSLayoutConstraint.constraints(withVisualFormat: "|-15-[hi]-[hl]-[ai]-15-|", options: [.alignAllCenterY], metrics: nil, views: ["hi": headerImage, "hl": headerLabel, "ai": arrowImage]))
    constraints.append(contentsOf: NSLayoutConstraint.constraints(withVisualFormat: "V:|-10-[hl]-10-|", options: [], metrics: nil, views: ["hl": headerLabel]))
    NSLayoutConstraint.activate(constraints)

    headerClick.widthAnchor.constraint(equalTo: headerView.widthAnchor).isActive = true
    headerClick.heightAnchor.constraint(equalTo: headerView.heightAnchor).isActive = true

    return headerView
}

我只设置了通用布局。您仍然必须添加自定义逻辑。这是它的样子: