swift MaterialComponents.MDCTabBarView mdc_customView is not working fine

Question

I'm trying to add customView to the MDCTabBarItem using mdc_customView but the items are not taking correct width and the results is as below

if I don't set the mdc_customView value then the result is as expected but without the custom design

Code with 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
    }

Code without 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)
        }
    }
}

The tabBar settings:

 self.tabBar.preferredLayoutStyle = .scrollable

Answer 1

after spending all the day trying and learning about this new customView I was able to make it work below is the working code

it was all about the intrinsicContentSize and layoutSubviews

here is the new output

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)
    }

}

Answer 2

Try preferredLayoutStyle = .scrollableCentered