swift MaterialComponents.MDCTabBarView mdc_customView 无法正常工作

Question

我正在尝试使用 mdc_customView 将 customView 添加到 MDCTabBarItem 但项目的宽度不正确，结果如下

如果我没有设置 mdc_customView 值，那么结果与预期一致，但没有自定义设计

带有 mdc_customView 的代码

 override func parseTabBarItems(data: [SubCategory]) -> [MDCTabBarItem] {
        var result: [MDCTabBarItem] = []
        var nextX: CGFloat = 15
        for cat in data {
            guard let count = cat.sub?.count, count > 0 else { continue }
            let item = MDCTabBarItem()
            item.tag = result.count

            let customeView = MDCTabBarCustomView()
            customeView.frame = CGRect(x: nextX, y: 0, width: (cat.ref ?? "").sizeOfString(usingFont: .ttrSemiBold10).width, height: 50)
            nextX = nextX + 15 + (cat.ref ?? "").sizeOfString(usingFont: .ttrSemiBold10).width
            customeView.config(title: cat.ref ?? "")
            item.mdc_customView = customeView
            result.append(item)
        }
        return result
    }

没有 mdc_customView 的代码

override func parseTabBarItems(data: [SubCategory]) -> [MDCTabBarItem] {
        var result: [MDCTabBarItem] = []
        var nextX: CGFloat = 15
        for cat in data {
            guard let count = cat.sub?.count, count > 0 else { continue }
            let item = MDCTabBarItem(title: cat.ref ?? "", image: nil, tag: result.count)
            result.append(item)
        }
        return result
    }

MDCTabBarCustomView

import UIKit
import MaterialComponents.MDCTabBarView
 class MDCTabBarCustomView: UIView , MDCTabBarViewCustomViewable {


    var titleLabel: UILabel!
    var containerView: UIView!

    var contentFrame: CGRect
    init() {
        self.titleLabel = UILabel.newAutoLayout()
        self.containerView = TTRView.newAutoLayout()
        self.contentFrame = .zero
        super.init(frame: .zero)
        self.autoresizingMask = []
        self.setup()
    }

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

    func config(title: String) { 
        self.titleLabel.text = title
    }

    func setSelected(_ selected: Bool, animated: Bool) {}

    private func setup(){
        self.addSubview(self.containerView)
        self.containerView.addSubview(self.titleLabel)

        self.containerView.snp.makeConstraints{
            $0.edges.equalToSuperview()
        }

        self.titleLabel.snp.makeConstraints{
            $0.edges.equalToSuperview().offset(5)
        }
    }
}

tabBar 设置：

 self.tabBar.preferredLayoutStyle = .scrollable

Answer 1

在花了一整天的时间尝试和学习这个新的 customView 之后，我能够让它工作，下面是工作代码

这都是关于 intrinsicContentSize 和 layoutSubviews

这是新的输出

final class MDCTabBarCustomView: UIView , MDCTabBarViewCustomViewable {
    var contentFrame: CGRect {
        return self.titleLabel.frame
    }

    var titleLabel: UILabel!
    var containerView: UIView!
    init(){
        self.titleLabel = UILabel.newAutoLayout()
        self.containerView = UIView.newAutoLayout()
        super.init(frame: .zero)
        self.autoresizingMask = []
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        if self.containerView.superview != self {
            self.addSubview(self.containerView)
        }
        if self.titleLabel.superview != self.containerView {
            self.containerView.addSubview(self.titleLabel)
        }

        containerView.snp.makeConstraints{
            $0.top.leading.equalToSuperview().offset(5)
            $0.bottom.trailing.equalToSuperview().offset(-5)
        }
        titleLabel.snp.makeConstraints{
            $0.top.equalToSuperview().offset(5)
            $0.bottom.equalToSuperview().offset(-5)
            $0.centerX.equalToSuperview()
        }
    }
    override var intrinsicContentSize: CGSize {
        return CGSize(width: self.titleLabel.intrinsicContentSize.width + 20, height:  self.titleLabel.intrinsicContentSize.height + 20)
    }

}