堆栈内存溢出
  繁体   English   中英

iOS自动版式| 视图的高度锚点

[英]iOS Autolayout | View's height anchor

 原文  2017-06-07 07:24:50  6   2    ios/ swift3/ autolayout/ height/ anchor

问题描述

我正在使用UITableViewAutomaticDimension计算单元格高度。 在我的自定义单元格中，高度取决于其内容（文本）。
所以我需要布局UIImageView的高度。 我需要将UIImageView的最大高度设置为某个常数。 但是，当文本较短时，UIImageView的高度会变小以适合其带有插图的超级视图。
当前结果
需要是
游乐场代码示例： 

//: Playground - noun: a place where people can play

import UIKit
import PlaygroundSupport

class ViewController: UIViewController {

    let descriptions = ["", "Curabitur.", "Senectus sit consectetur fermentum nisi suspendisse a condimentum at vestibulum a vestibulum a nostra fermentum molestie sodales molestie id viverra scelerisque consectetur.Penatibus a dictum metus mus commodo a hac morbi parturient parturient convallis ultrices a mi id.Fringilla lobortis suspendisse vestibulum quisque consectetur imperdiet.", "Condimentum adipiscing.", "Cras scelerisque parturient vitae class sollicitudin.", "Integer adipiscing a adipiscing parturient tempus condimentum a interdum facilisis feugiat.", "Donec eros eleifend a ullamcorper class scelerisque nisi nullam nisi sociis ante iaculis pharetra malesuada nibh sit consectetur condimentum.Nibh sollicitudin."]

    lazy var tableView: UITableView = {
        let tv = UITableView()
        tv.dataSource = self
        tv.estimatedRowHeight = 80
        tv.rowHeight = UITableViewAutomaticDimension
        tv.separatorStyle = .none
        tv.register(PrototypeCell.self, forCellReuseIdentifier: NSStringFromClass(PrototypeCell.self))
        return tv
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.frame = CGRect(x: 0, y: 0, width: 320, height: 480)
        tableView.frame = view.frame
        view.addSubview(self.tableView)
    }
}

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return descriptions.count
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: NSStringFromClass(PrototypeCell.self), for: indexPath) as! PrototypeCell
        cell.titleLabel.text = "Title #\(indexPath.row)"
        cell.subtitleLabel.text = "Subtitle #\(indexPath.row)"
        cell.descriptionLabel.text = descriptions[indexPath.row]
        return cell
    }
}

class PrototypeCell: UITableViewCell {

    let foregroundView: UIView = {
        let v = UIView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .red
        return v
    }()

    let detailImageView: UIImageView = {
        let iv = UIImageView()
        iv.translatesAutoresizingMaskIntoConstraints = false
        iv.backgroundColor = .gray
        return iv
    }()

    let titleLabel: UILabel = {
        let lbl = UILabel()
        lbl.translatesAutoresizingMaskIntoConstraints = false
        lbl.numberOfLines = 1
        lbl.text = "Title"
        return lbl
    }()

    let subtitleLabel: UILabel = {
        let lbl = UILabel()
        lbl.translatesAutoresizingMaskIntoConstraints = false
        lbl.numberOfLines = 1
        lbl.text = "Subtitile"
        lbl.font = UIFont.systemFont(ofSize: 12)
        return lbl
    }()

    let descriptionLabel: UILabel = {
        let lbl = UILabel()
        lbl.translatesAutoresizingMaskIntoConstraints = false
        lbl.numberOfLines = 0
        lbl.font = UIFont.systemFont(ofSize: 10)
        return lbl
    }()

    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        selectionStyle = .none

        contentView.addSubview(foregroundView)
        foregroundView.addSubview(detailImageView)
        foregroundView.addSubview(titleLabel)
        foregroundView.addSubview(subtitleLabel)
        foregroundView.addSubview(descriptionLabel)

        NSLayoutConstraint.activate([
                foregroundView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 4),
                foregroundView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -4),
                foregroundView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -4),
                foregroundView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 4),

                detailImageView.heightAnchor.constraint(equalToConstant: 64),
                detailImageView.widthAnchor.constraint(equalToConstant: 64),
                detailImageView.topAnchor.constraint(equalTo: foregroundView.topAnchor, constant: 4),
                detailImageView.leadingAnchor.constraint(equalTo: foregroundView.leadingAnchor, constant: 4),

                titleLabel.topAnchor.constraint(equalTo: foregroundView.topAnchor, constant: 4),
                titleLabel.trailingAnchor.constraint(equalTo: foregroundView.trailingAnchor, constant: 4),
                titleLabel.leadingAnchor.constraint(equalTo: detailImageView.trailingAnchor, constant: 4),

                subtitleLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 2),
                subtitleLabel.trailingAnchor.constraint(equalTo: foregroundView.trailingAnchor, constant: -4),
                subtitleLabel.leadingAnchor.constraint(equalTo: detailImageView.trailingAnchor, constant: 4),

                descriptionLabel.topAnchor.constraint(equalTo: subtitleLabel.bottomAnchor, constant: 2),
                descriptionLabel.trailingAnchor.constraint(equalTo: foregroundView.trailingAnchor, constant: -4),
                descriptionLabel.bottomAnchor.constraint(equalTo: foregroundView.bottomAnchor, constant: -4),
                descriptionLabel.leadingAnchor.constraint(equalTo: detailImageView.trailingAnchor, constant: 4),
            ])
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

var ctrl = ViewController()
PlaygroundPage.current.liveView = ctrl.view

感谢大家！
最终解决方案： 

    //: Playground - noun: a place where people can play

import UIKit
import PlaygroundSupport

class ViewController: UIViewController {

    let descriptions = [nil, "Curabitur.", "Senectus sit consectetur fermentum nisi suspendisse a condimentum at vestibulum a vestibulum a nostra fermentum molestie sodales molestie id viverra scelerisque consectetur.Penatibus a dictum metus mus commodo a hac morbi parturient parturient convallis ultrices a mi id.Fringilla lobortis suspendisse vestibulum quisque consectetur imperdiet.", "Condimentum adipiscing.", "Cras scelerisque parturient vitae class sollicitudin.", "Integer adipiscing a adipiscing parturient tempus condimentum a interdum facilisis feugiat.", "Donec eros eleifend a ullamcorper class scelerisque nisi nullam nisi sociis ante iaculis pharetra malesuada nibh sit consectetur condimentum.Nibh sollicitudin."]

    lazy var tableView: UITableView = {
        let tv = UITableView()
        tv.dataSource = self
        tv.estimatedRowHeight = 80
        tv.rowHeight = UITableViewAutomaticDimension
        tv.separatorStyle = .none
        tv.register(PrototypeCell.self, forCellReuseIdentifier: NSStringFromClass(PrototypeCell.self))
        return tv
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.frame = CGRect(x: 0, y: 0, width: 320, height: 480)
        tableView.frame = view.frame
        view.addSubview(self.tableView)
    }
}

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return descriptions.count
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: NSStringFromClass(PrototypeCell.self), for: indexPath) as! PrototypeCell
        cell.titleLabel.text = "Title #\(indexPath.row)"
        cell.subtitleLabel.text = "Subtitle #\(indexPath.row)"
        cell.descriptionLabel.text = descriptions[indexPath.row]
        return cell
    }
}

class PrototypeCell: UITableViewCell {

    let foregroundView: UIView = {
        let v = UIView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .red
        return v
    }()

    let detailImageView: UIImageView = {
        let iv = UIImageView()
        iv.translatesAutoresizingMaskIntoConstraints = false
        iv.backgroundColor = .gray
        return iv
    }()

    let titleLabel: UILabel = {
        let lbl = UILabel()
        lbl.translatesAutoresizingMaskIntoConstraints = false
        lbl.numberOfLines = 1
        lbl.text = "Title"
        return lbl
    }()

    let subtitleLabel: UILabel = {
        let lbl = UILabel()
        lbl.translatesAutoresizingMaskIntoConstraints = false
        lbl.numberOfLines = 1
        lbl.text = "Subtitile"
        lbl.font = UIFont.systemFont(ofSize: 12)
        return lbl
    }()

    let descriptionLabel: UILabel = {
        let lbl = UILabel()
        lbl.translatesAutoresizingMaskIntoConstraints = false
        lbl.numberOfLines = 0
        lbl.font = UIFont.systemFont(ofSize: 10)
        return lbl
    }()

    var detailImageViewBottomAnchor: NSLayoutConstraint!

    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        detailImageViewBottomAnchor = detailImageView.bottomAnchor.constraint(equalTo: foregroundView.bottomAnchor, constant: -4)
        detailImageViewBottomAnchor.priority = 749
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        selectionStyle = .none

        contentView.addSubview(foregroundView)
        foregroundView.addSubview(detailImageView)
        foregroundView.addSubview(titleLabel)
        foregroundView.addSubview(subtitleLabel)
        foregroundView.addSubview(descriptionLabel)

        NSLayoutConstraint.activate([
                foregroundView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 4),
                foregroundView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -4),
                foregroundView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -4),
                foregroundView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 4),

                detailImageView.heightAnchor.constraint(lessThanOrEqualToConstant: 64),
                detailImageView.widthAnchor.constraint(equalToConstant: 64),
                detailImageView.topAnchor.constraint(equalTo: foregroundView.topAnchor, constant: 4),
                detailImageViewBottomAnchor,
                detailImageView.leadingAnchor.constraint(equalTo: foregroundView.leadingAnchor, constant: 4),

                titleLabel.topAnchor.constraint(equalTo: foregroundView.topAnchor, constant: 4),
                titleLabel.trailingAnchor.constraint(equalTo: foregroundView.trailingAnchor, constant: 4),
                titleLabel.leadingAnchor.constraint(equalTo: detailImageView.trailingAnchor, constant: 4),

                subtitleLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 2),
                subtitleLabel.trailingAnchor.constraint(equalTo: foregroundView.trailingAnchor, constant: -4),
                subtitleLabel.leadingAnchor.constraint(equalTo: detailImageView.trailingAnchor, constant: 4),

                descriptionLabel.topAnchor.constraint(equalTo: subtitleLabel.bottomAnchor, constant: 2),
                descriptionLabel.trailingAnchor.constraint(equalTo: foregroundView.trailingAnchor, constant: -4),
                descriptionLabel.bottomAnchor.constraint(equalTo: foregroundView.bottomAnchor, constant: -4),
                descriptionLabel.leadingAnchor.constraint(equalTo: detailImageView.trailingAnchor, constant: 4),

            ])
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

var ctrl = ViewController()
PlaygroundPage.current.liveView = ctrl.view

2 个解决方案

解决方案1
 0  2017-06-07 08:45:15

在您的PrototypeCell的layoutSubviews()函数中添加 

  if self.view.frame.size.height < 68 {
        detailImageView.heightAnchor.constraint(equalToConstant: self.frame.size.height - 8)
    } else {
    detailImageView.heightAnchor.constraint(equalToConstant: 64)
   }

如果单元格高度小于68，则imageview高度将是单元格高度-8。其中8是imageview（4）的顶部空间+ imageview（4）的底部空间。

解决方案2
 0 已采纳  2017-06-07 09:08:06

我刚刚找到了适合我的解决方案。

我已遵循此解决方案使其工作。 您需要为视图做的所有事情。

  1. 使您的高度限制小于或等于一个值（假设为40），优先级默认为（1000）

  2. 绘制一个具有较高优先级的底部约束（750），并给出一个值

就是这样。

这就是它的样子。

在此处输入图片说明

这是高度限制的属性。

在此处输入图片说明

这是为了底部约束。

在此处输入图片说明

这是我的整个布局层次结构（尽管只是为了让您知道可以对文本Label使用堆栈视图并不重要：））

在此处输入图片说明

这就是输出。

在此处输入图片说明

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 iOS Autolayout：如何调整视图的高度并更新与之相关的其他视图的框架？ 有没有办法询问AutoLayout约束视图的高度？ 在没有高度限制的情况下使用自动布局对视图的高度进行动画处理 iOS Autolayout视图高度基于较大的子视图高度 iOS自动布局多个高度 iOS自动布局视图以父级为中心，具有边距和动态高度 使用Storyboard或xib中的iOS AutoLayout和SizeClass在不同屏幕中可变的视图高度 如何在iOS中的autolayout中设置视图的动态宽度和高度？ 如何使用Autolayout动态基于子视图的可用性调整视图高度的大小？ Swift 自动布局 - 未应用高度锚
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM