swift MaterialComponents.MDCTabBarView mdc_customView is not working fine - swift

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