swift - 导航栏标题中的多个重叠图像

Question

我知道如何在 UINavigationBar 中将单个图像居中，但不知道如何使用动态数量的图像来做到这一点。我有一个支持群聊的聊天应用程序。群聊的人数最多可以是 3 人，但没有上限。

在 UINavigationBar 中，我必须将标题设置为显示至少 4 或 5 个重叠图像(但不能超过这个数量，因为它在 UINavigationBar 中看起来很奇怪)和一个 UILabel 显示同一个群聊中还有多少用户(即 + 15 more)。标题(所有图像和标签)应位于 UINavigationBar 的中心。正在从服务器下载图像。

当用户点击标题(UINavigationBar 中的任何图像或标签)时，它应该触发一个操作，以在单独的 UIViewController< 中显示用户的完整列表。/

重叠图像的数量是动态的(基于每个群聊)，但我不知道如何做到这一点。最终结果应如下所示:

有人以前做过这个或者知道如何实现这个吗？非常感谢您的帮助

更新:

我尝试使用 UIStackView 来完成此任务，但我遇到了多个问题。代码如下:

    var navStackView : UIStackView = {
    let stack = UIStackView()
    stack.axis = .horizontal
    stack.backgroundColor = .red
    stack.alignment = .fill
    stack.distribution = .fillEqually
    stack.translatesAutoresizingMaskIntoConstraints = false
    return stack
}()

var images = ["1", "2", "3", "4"]

override func viewDidLoad() {
    super.viewDidLoad()

    let navController = navigationController!

    navController.navigationBar.addSubview(navStackView)
    // x, y, w, h
    navStackView.leadingAnchor.constraint(equalTo: navController.navigationBar.leadingAnchor).isActive = true
    navStackView.trailingAnchor.constraint(equalTo: navController.navigationBar.trailingAnchor).isActive = true
    navStackView.topAnchor.constraint(equalTo: navController.navigationBar.topAnchor).isActive = true
    navStackView.bottomAnchor.constraint(equalTo: navController.navigationBar.bottomAnchor).isActive = true


    for image in images {
        let imageView = UIImageView()
        imageView.image = UIImage(named: image)
        imageView.layer.cornerRadius = imageView.bounds.height / 2
        imageView.clipsToBounds = true
        imageView.layer.masksToBounds = true
        imageView.contentMode = .scaleAspectFill
     //   imageView.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
        navStackView.addArrangedSubview(imageView)

        navStackView.layoutIfNeeded()
    }


    navigationItem.titleView = navStackView
}

这是到目前为止的结果(但我被困住了，不知道如何实现它):

Answer 1

我不确定 stackView。但对于一个简单的实现，我使用了collectionView。检查以下策略。您应该能够根据您的要求进行相应修改。

    import UIKit


class OverlayCell: UICollectionViewCell {

    func didplay(with number: String) {
        let view = UIView(frame: CGRect(x: 0, y: 0, width: 40.0, height: 40.0))
        view.backgroundColor = UIColor.blue
        view.layer.cornerRadius = 20.0
        view.layer.masksToBounds = true

        view.layer.borderColor = UIColor.white.cgColor
        view.layer.borderWidth = 2.0

        let label = UILabel(frame: CGRect(x: 2, y: 2, width: view.bounds.width - 4, height: view.bounds.height - 4))
        label.textColor = .white
        label.text = number
        label.textAlignment = .center

        view.addSubview(label)
        contentView.addSubview(view)
        contentView.transform = CGAffineTransform(scaleX: -1, y: 1)
    }
}



class OverlayedView: UIView {

    var mainView: UIView!
    var imageCollection: UICollectionView!

    //Static for now
    let cellWidth: CGFloat = 40.0
    let cellHeight: CGFloat = 40.0
    var collectionWidth: CGFloat = 115.0

    override init(frame: CGRect) {
        super.init(frame: frame)
        loadNib()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        loadNib()
    }

    private func loadNib() {
        if let view = Bundle.main.loadNibNamed("OverlayedView", owner: self, options: nil)?.first as? UIView {
            mainView = view
            mainView.frame = self.bounds
            self.backgroundColor = .black
            addSubview(view)
        }
    }


    var dataSource = ["4","3","2","1"]

    func loadData() {

    //dynamically calculate collectionWidth to be able to kepp it in center
        collectionWidth = dataSource.count >= 4 ? CGFloat(dataSource.count) * cellWidth -  CGFloat((dataSource.count - 1) * 15) : CGFloat(dataSource.count) * cellWidth - CGFloat((dataSource.count - 1) * 15)  //CGFloat(dataSource.count * 15) here is the item spacing from delegate -15 inward so that we can get overlapping effect


        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal
        imageCollection = UICollectionView(frame: CGRect(x: 0, y: 0, width: collectionWidth, height: self.bounds.height), collectionViewLayout: layout)
        imageCollection.center = mainView.center

        imageCollection.register(OverlayCell.self, forCellWithReuseIdentifier: "Cell")
        //flip the collectionView so that it loads from right to left for overlapping effect
        imageCollection.transform = CGAffineTransform(scaleX: -1, y: 1)

        imageCollection.delegate = self
        imageCollection.dataSource = self

        mainView.addSubview(imageCollection)
}

 }


extension OverlayedView: UICollectionViewDelegate, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        if dataSource.count > 4 {
            return 4
        }
        return dataSource.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! OverlayCell
       cell.didplay(with: dataSource[indexPath.row])
        return cell
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let size = CGSize(width: 40.0 , height: 40.0)
        return size
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 0.0
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return -15.0
    }
} 

用法:

let navOverlay = OverlayedView(frame: CGRect(x: 0, y: 0, width: 250.0, height: 44.0))
    navOverlay.loadData() . //pass your data to this method
    navigationItem.titleView = navOverlay