无法在UITableViewHeaderFooterView中布置子视图。

huangapple
go评论107阅读模式
英文:

Couldn't layout Subviews in UITableViewHeaderFooterView

问题

I'm trying to make a custom header for 0 section of my UITableView. Here's the code I'm using to create this header:

  1. class ProfileHeaderView: UITableViewHeaderFooterView {
  2.     
  3.     // MARK: - Subviews
  4.     
  5.     private var statusText: String = ""
  6.     
  7.     private lazy var userImage: UIImageView = {
  8.         let imageView = UIImageView(image: UIImage(named: me.login))
  9.                 
  10.         imageView.layer.cornerRadius = 48
  11.         imageView.clipsToBounds = true
  12.         
  13.         imageView.translatesAutoresizingMaskIntoConstraints = false
  14.         
  15.         return imageView
  16.     }()
  17.     
  18.     ...
  19.     
  20.     // MARK: - Lifecycle
  21.     
  22.     override init(reuseIdentifier: String?) {
  23.         super.init(reuseIdentifier: reuseIdentifier)
  24.         setupUI()
  25.         addSuviews()
  26.         setupConstraints()
  27.     }
  28.      // MARK: - Private
  30.     private func setupUI() {
  31.         backgroundColor = .lightGray
  32.     }
  33.     
  34.     private func addSuviews() {
  35.         addSubview(userImage)
  36.     }
  37.     
  38.     private func setupConstraints() {
  39.         let layoutMarginGuide = contentView.layoutMarginsGuide
  40.             
  41.         NSLayoutConstraint.activate([
  42.             userImage.leadingAnchor.constraint(equalTo: layoutMarginGuide.leadingAnchor, constant: 10),
  43.             userImage.topAnchor.constraint(equalTo: layoutMarginGuide.topAnchor, constant: 16),
  44.             userImage.bottomAnchor.constraint(equalTo: layoutMarginGuide.bottomAnchor, constant: -16),
  45.             userImage.widthAnchor.constraint(equalToConstant: 90),
  46.             userImage.heightAnchor.constraint(equalToConstant: 90),
  47.         ])
  48.     }
  49. }

Here's how I add this header in my ViewController:

  1. private func setupConstraints() {
  2.     feedView.frame = view.bounds
  3.     
  4.     feedView.delegate = self
  5.     feedView.dataSource = self
  6.     feedView.register(PostViewCell.self, forCellReuseIdentifier: "cell")
  7.     feedView.register(ProfileHeaderView.self, forHeaderFooterViewReuseIdentifier: "ProfileHeaderView")
  8.     //feedView.register(ProfileHeaderView.self, forHeaderFooterViewReuseIdentifier: "profileView")
  9. }

Here's the result I'm getting:
无法在UITableViewHeaderFooterView中布置子视图。

As you see, image is ignoring safeArea on the screen. How to fix it?

英文:

I'm trying to make a custom header for 0 section of my UITableView. Here's the code I'm using to create this header:

  1. class ProfileHeaderView: UITableViewHeaderFooterView {
  2.     
  3.     // MARK: - Subviews
  4.     
  5.     private var statusText: String = ""
  6.     
  7.     private lazy var userImage: UIImageView = {
  8.         let imageView = UIImageView(image: UIImage(named: me.login))
  9.                 
  10.         imageView.layer.cornerRadius = 48
  11.         imageView.clipsToBounds = true
  12.         
  13.         imageView.translatesAutoresizingMaskIntoConstraints = false
  14.         
  15.         return imageView
  16.     }()
  17.     
  18.     ...
  19.     
  20.     // MARK: - Lifecycle
  21.     
  22.     override init(reuseIdentifier: String?) {
  23.         super.init(reuseIdentifier: reuseIdentifier)
  24.         setupUI()
  25.         addSuviews()
  26.         setupConstraints()
  27.     }
  28.      // MARK: - Private
  30.     private func setupUI() {
  31.         backgroundColor = .lightGray
  32.     }
  33.     
  34.     private func addSuviews() {
  35.         addSubview(userImage)
  36.     }
  37.     
  38.     private func setupConstraints() {
  39.         let layoutMarginGuide = contentView.layoutMarginsGuide
  40.             
  41.         NSLayoutConstraint.activate([
  42.             userImage.leadingAnchor.constraint(equalTo: layoutMarginGuide.leadingAnchor, constant: 10),
  43.             userImage.topAnchor.constraint(equalTo: layoutMarginGuide.topAnchor, constant: 16),
  44.             userImage.bottomAnchor.constraint(equalTo: layoutMarginGuide.bottomAnchor, constant: -16),
  45.             userImage.widthAnchor.constraint(equalToConstant: 90),
  46.             userImage.heightAnchor.constraint(equalToConstant: 90),
  47.         ])
  48.     }
  49. }

Here's how I add this header in my ViewController:

  1.     private func setupConstraints() {
  2.         feedView.frame = view.bounds
  3.         
  4.         feedView.delegate = self
  5.         feedView.dataSource = self
  6.         feedView.register(PostViewCell.self, forCellReuseIdentifier: "cell")
  7.         feedView.register(ProfileHeaderView.self, forHeaderFooterViewReuseIdentifier: "ProfileHeaderView")
  8.         //feedView.register(ProfileHeaderView.self, forHeaderFooterViewReuseIdentifier: "profileView")
  9.     }

Here's the result I'm getting:
无法在UITableViewHeaderFooterView中布置子视图。

As you see, image is ignoring safeArea on the screen. How to fix it?

答案1

得分: 2

以下是您提供的代码的翻译部分：

  1. 好吧，您忽略了许多所需的代码（比如您的单元格类和控制器类）。
  3. 而且，您还没有展示您的`viewForHeaderInSection`方法的代码。
  5. 但是，我们可以看一个快速的示例...
  7. **您的`ProfileHeaderView`稍作修改**
  9. ```swift
  10. class ProfileHeaderView: UITableViewHeaderFooterView {
  11.     
  12.     // MARK: - 子视图
  13.     
  14.     private var statusText: String = ""
  15.     
  16.     private lazy var userImage: UIImageView = {
  17.         //let imageView = UIImageView(image: UIImage(named: me.login))
  18.         let imageView = UIImageView(image: UIImage(named: "face"))
  19.         
  20.         imageView.layer.cornerRadius = 48
  21.         imageView.clipsToBounds = true
  22.         
  23.         imageView.translatesAutoresizingMaskIntoConstraints = false
  24.         
  25.         return imageView
  26.     }()
  27.     
  28.     //...
  29.     
  30.     // MARK: - 生命周期
  31.     
  32.     override init(reuseIdentifier: String?) {
  33.         super.init(reuseIdentifier: reuseIdentifier)
  34.         setupUI()
  35.     }
  36.     required init?(coder: NSCoder) {
  37.         super.init(coder: coder)
  38.         setupUI()
  39.     }
  40.     // MARK: - 私有
  41.     
  42.     private func setupUI() {
  43.         contentView.backgroundColor = .lightGray
  44.         addSuviews()
  45.         setupConstraints()
  46.     }
  47.     
  48.     private func addSuviews() {
  49.         contentView.addSubview(userImage)
  50.     }
  51.     
  52.     private func setupConstraints() {
  53.         let g = contentView.layoutMarginsGuide
  54.         
  55.         // 这将避免自动布局的投诉
  56.         let bottomC = userImage.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -16.0)
  57.         bottomC.priority = .required - 1
  58.         
  59.         NSLayoutConstraint.activate([
  60.             userImage.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 10),
  61.             userImage.topAnchor.constraint(equalTo: g.topAnchor, constant: 16),
  62.             
  63.             //userImage.bottomAnchor.constraint(equalTo: layoutMarginGuide.bottomAnchor, constant: -16),
  64.             bottomC,
  65.             
  66.             userImage.widthAnchor.constraint(equalToConstant: 90),
  67.             userImage.heightAnchor.constraint(equalToConstant: 90),
  68.         ])
  69.     }
  70. }

一个简单的单标签单元格类

  1. class PostViewCell: UITableViewCell {
  2.     let theLabel = UILabel()
  3.     override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
  4.         super.init(style: style, reuseIdentifier: reuseIdentifier)
  5.         commonInit()
  6.     }
  7.     required init?(coder: NSCoder) {
  8.         super.init(coder: coder)
  9.         commonInit()
  10.     }
  11.     private func commonInit() {
  12.         theLabel.translatesAutoresizingMaskIntoConstraints = false
  13.         contentView.addSubview(theLabel)
  14.         let g = contentView.layoutMarginsGuide
  15.         NSLayoutConstraint.activate([
  16.             theLabel.topAnchor.constraint(equalTo: g.topAnchor),
  17.             theLabel.leadingAnchor.constraint(equalTo: g.leadingAnchor),
  18.             theLabel.trailingAnchor.constraint(equalTo: g.trailingAnchor),
  19.             theLabel.bottomAnchor.constraint(equalTo: g.bottomAnchor),
  20.         ])
  21.     }
  22. }

一个带有表视图的简单视图控制器类 - 行数设置为30，以便我们可以看到部分标题保持在原位...

  1. class FeedViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
  2.     
  3.     let feedView = UITableView()
  4.     
  5.     override func viewDidLoad() {
  6.         super.viewDidLoad()
  7.         
  8.         self.title = "Log In"
  9.         view.backgroundColor = .systemBackground
  10.         
  11.         feedView.translatesAutoresizingMaskIntoConstraints = false
  12.         view.addSubview(feedView)
  13.         
  14.         let g = view.safeAreaLayoutGuide
  15.         NSLayoutConstraint.activate([
  16.             feedView.topAnchor.constraint(equalTo: g.topAnchor),
  17.             feedView.leadingAnchor.constraint(equalTo: g.leadingAnchor),
  18.             feedView.trailingAnchor.constraint(equalTo: g.trailingAnchor),
  19.             feedView.bottomAnchor.constraint(equalTo: g.bottomAnchor),
  20.         ])
  21.         
  22.         feedView.delegate = self
  23.         feedView.dataSource = self
  24.         feedView.register(PostViewCell.self, forCellReuseIdentifier: "cell")
  25.         feedView.register(ProfileHeaderView.self, forHeaderFooterViewReuseIdentifier: "ProfileHeaderView")
  26.         
  27.         // 移除默认填充
  28.         feedView.sectionHeaderTopPadding = 0.0
  29.     }
  30.     func numberOfSections(in tableView: UITableView) -> Int {
  31.         return 1
  32.     }
  33.     func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
  34.         return 30
  35.     }
  36.     func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
  37.         let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! PostViewCell
  38.         cell.theLabel.text = "\(indexPath)"
  39.         return cell
  40.     }
  41.     func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
  42.         if section == 0 {
  43.             let v = tableView.dequeueReusableHeaderFooterView(withIdentifier: "ProfileHeaderView")
  44.             return v
  45.         }
  46.         // 为后续部分返回其他标题视图？
  47.         return nil
  48.     }
  49. }

当运行时看起来像这样：

无法在UITableViewHeaderFooterView中布置子视图。

  2. 请注意，我已经将HTML编码转换为适当的Swift代码。如果您需要更多帮助，请告诉我。
  4. <details>
  5. <summary>英文:</summary>
  7. Well, you left out much of the needed code (such as your cell class and your controller class).
  9. And, you haven&#39;t shown your code for `viewForHeaderInSection`.
  11. But, we can look at a quick example...
  13. **your `ProfileHeaderView` with minor modifications**
  15.     class ProfileHeaderView: UITableViewHeaderFooterView {
  16.     	
  17.     	// MARK: - Subviews
  18.     	
  19.     	private var statusText: String = &quot;&quot;
  20.     	
  21.     	private lazy var userImage: UIImageView = {
  22.     		//let imageView = UIImageView(image: UIImage(named: me.login))
  23.     		let imageView = UIImageView(image: UIImage(named: &quot;face&quot;))
  24.     
  25.     		imageView.layer.cornerRadius = 48
  26.     		imageView.clipsToBounds = true
  27.     		
  28.     		imageView.translatesAutoresizingMaskIntoConstraints = false
  29.     		
  30.     		return imageView
  31.     	}()
  32.     	
  33.     	//...
  34.     	
  35.     	// MARK: - Lifecycle
  36.     	
  37.     	override init(reuseIdentifier: String?) {
  38.     		super.init(reuseIdentifier: reuseIdentifier)
  39.     		setupUI()
  40.     	}
  41.     	required init?(coder: NSCoder) {
  42.     		super.init(coder: coder)
  43.     		setupUI()
  44.     	}
  45.     	// MARK: - Private
  46.     	
  47.     	private func setupUI() {
  48.     		contentView.backgroundColor = .lightGray
  49.     		addSuviews()
  50.     		setupConstraints()
  51.     	}
  52.     	
  53.     	private func addSuviews() {
  54.     		contentView.addSubview(userImage)
  55.     	}
  56.     	
  57.     	private func setupConstraints() {
  58.     		let g = contentView.layoutMarginsGuide
  59.     		
  60.     		// this will avoid auto-layout complaints
  61.     		let bottomC = userImage.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -16.0)
  62.     		bottomC.priority = .required - 1
  63.     		
  64.     		NSLayoutConstraint.activate([
  65.     			userImage.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 10),
  66.     			userImage.topAnchor.constraint(equalTo: g.topAnchor, constant: 16),
  67.     			
  68.     			//userImage.bottomAnchor.constraint(equalTo: layoutMarginGuide.bottomAnchor, constant: -16),
  69.     			bottomC,
  70.     			
  71.     			userImage.widthAnchor.constraint(equalToConstant: 90),
  72.     			userImage.heightAnchor.constraint(equalToConstant: 90),
  73.     		])
  74.     	}
  75.     }
  76.     
  77. **a simple single-label cell class**
  79.     class PostViewCell: UITableViewCell {
  80.     	let theLabel = UILabel()
  81.     	override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
  82.     		super.init(style: style, reuseIdentifier: reuseIdentifier)
  83.     		commonInit()
  84.     	}
  85.     	required init?(coder: NSCoder) {
  86.     		super.init(coder: coder)
  87.     		commonInit()
  88.     	}
  89.     	private func commonInit() {
  90.     		theLabel.translatesAutoresizingMaskIntoConstraints = false
  91.     		contentView.addSubview(theLabel)
  92.     		let g = contentView.layoutMarginsGuide
  93.     		NSLayoutConstraint.activate([
  94.     			theLabel.topAnchor.constraint(equalTo: g.topAnchor),
  95.     			theLabel.leadingAnchor.constraint(equalTo: g.leadingAnchor),
  96.     			theLabel.trailingAnchor.constraint(equalTo: g.trailingAnchor),
  97.     			theLabel.bottomAnchor.constraint(equalTo: g.bottomAnchor),
  98.     		])
  99.     	}
  100.     }
  101.     
  102. **a simple view controller class with table view** - number of rows set to 30 so we can see the section header stays in place...
  104.     class FeedViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
  105.     	
  106.     	let feedView = UITableView()
  107.     	
  108.     	override func viewDidLoad() {
  109.     		super.viewDidLoad()
  110.     		
  111.     		self.title = &quot;Log In&quot;
  112.     		view.backgroundColor = .systemBackground
  113.     		
  114.     		feedView.translatesAutoresizingMaskIntoConstraints = false
  115.     		view.addSubview(feedView)
  116.     		
  117.     		let g = view.safeAreaLayoutGuide
  118.     		NSLayoutConstraint.activate([
  119.     			feedView.topAnchor.constraint(equalTo: g.topAnchor),
  120.     			feedView.leadingAnchor.constraint(equalTo: g.leadingAnchor),
  121.     			feedView.trailingAnchor.constraint(equalTo: g.trailingAnchor),
  122.     			feedView.bottomAnchor.constraint(equalTo: g.bottomAnchor),
  123.     		])
  124.     		
  125.     		feedView.delegate = self
  126.     		feedView.dataSource = self
  127.     		feedView.register(PostViewCell.self, forCellReuseIdentifier: &quot;cell&quot;)
  128.     		feedView.register(ProfileHeaderView.self, forHeaderFooterViewReuseIdentifier: &quot;ProfileHeaderView&quot;)
  129.     		
  130.     		// remove default padding
  131.     		feedView.sectionHeaderTopPadding = 0.0
  132.     
  133.     	}
  134.     	func numberOfSections(in tableView: UITableView) -&gt; Int {
  135.     		return 1
  136.     	}
  137.     	func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -&gt; Int {
  138.     		return 30
  139.     	}
  140.     	func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -&gt; UITableViewCell {
  141.     		let cell = tableView.dequeueReusableCell(withIdentifier: &quot;cell&quot;, for: indexPath) as! PostViewCell
  142.     		cell.theLabel.text = &quot;\(indexPath)&quot;
  143.     		return cell
  144.     	}
  145.     	func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -&gt; UIView? {
  146.     		if section == 0 {
  147.     			let v = tableView.dequeueReusableHeaderFooterView(withIdentifier: &quot;ProfileHeaderView&quot;)
  148.     			return v
  149.     		}
  150.     		// return some other header view for subsequent sections?
  151.     		return nil
  152.     	}
  153.     }
  155. Looks like this when run:
  157. [![enter image description here][1]][1]
  160.   [1]: https://i.stack.imgur.com/euwNU.png
  162. </details>
  166. # 答案2
  167. **得分**: 0
  169. 使用 `contentView.safeAreaLayoutGuide` 作为您的布局指南。
  171. `safeAreaLayoutGuide` 表示 bars 之间的布局区域（例如状态栏和底部导航栏之间的布局）。 
  173. **编辑：** 更合理地设置您的表视图的约束（使用 `safeAreaLayoutGuide`），而不是对表视图中的各个视图分别进行设置。
  175. <details>
  176. <summary>英文:</summary>
  178. Use `contentView.safeAreaLayoutGuide` instead of `contentView.layoutMarginsGuide` as your layout guide.
  180. `safeAreaLayoutGuide` represents the layout area in between bars (e.g the layout between the status bar and the home bar)
  182. **EDIT:** It probably makes more sense to correctly set the constraints of your table view (using the `safeAreaLayoutGuide`) instead of having to do that for individual views within your table view
  184. </details>

huangapple
  • 本文由 发表于 2023年7月4日 20:33:45
  • 转载请务必保留本文链接：https://go.coder-hub.com/76612691.html
  • autolayout
  • ios
  • swift
  • uikit
  • uitableview
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定