TabBar Item Customization

[ahsanaasim]

Normally Tab Items takes equal spacing. But according my design I need to change this behavior. Tab Items should take only the space it needs. Also Is there any option to modify the radius of the line as my design has this modification.

This is what I have tried:

[let tabBar = TabBar()
tabBar.delegate = self

    tabBar.dividerColor = Color.clear
    
    
    tabBar.lineColor = Colors.wiseMagenta!
    tabBar.lineAlignment = .bottom
    
    tabBar.backgroundColor = Color.clear
    tabBar.tabItems = buttons
    
    tabBar.tabBarStyle = .nonScrollable
    tabBar.tabBarCenteringStyle = .never
    tabBar.tabItemsInterimSpace = 0
    tabBar.tabBarLineStyle = .auto
    
    tabBar.frame = CGRect.init(x: 0, y: 0, width: 200, height: 43)
    
    let rightBarButton = UIBarButtonItem(customView: tabBar)
    self.navigationItem.leftBarButtonItems = [rightBarButton]]

My target Design:

Result I am getting:

[ahsanaasim]

I have tried giving width to my TabItem but didn't work

let btn1 = TabItem(title: "Dua", titleColor: Colors.wiseMagenta!)
        btn1.pulseAnimation = .centerRadialBeyondBounds
        btn1.tag = 0
        btn1.frame.size.width = 15

[ahsanaasim]

I have managed to change the line width with the following code.

tabBar.tabBarLineStyle = .custom { tabItem in
            if tabItem.tag == 0 {
                return tabItem.bounds.width - 50
            }
            return tabItem.bounds.width
        }

But that has created another issue. As tab item is taking an equal space of other item and so it creates padding from the left.

[ahsanaasim]

I have managed to add a cornerRadius to tabBar line using tabBar.line property. But could not remove the gap at the beginning

[daniel-jonathan]

Hi @ahsanaasim can you send me your current project to test this out? I will see if I can help you out with a solution. Thank you!

[adamdahan]

@ahsanaasim I was able to accomplish the desired look, however, it was at the cost of modifying the internal TabBar code. So if you choose to go down this path you will need to support your own updates to keep the look consistent. Here is how you can pull it off...

1. Prepare the tab bar.

fileprivate func preparePageTabBar() {
    tabBar.isDividerHidden = true
    tabBar.backgroundColor = Color.grey.lighten5
    tabBar.lineAlignment = .bottom
    tabBar.lineHeight = 10
    tabBar.setLineColor(Color.grey.base, for: .selected)
    tabBar.tabBarLineStyle = .custom { tabItem in
        
        if tabItem.tag == 0 {
            return tabItem.bounds.width - 80 // Change the width to whatever you like.
        }
        return tabItem.bounds.width
    }
  }

2. Open the TabBar.swift file in Material framework local to your project
3. Manipulate the prepareLine() method

func prepareLine() {
    line.layer.zPosition = 10000
    lineHeight = 3
    line.layer.cornerRadius = 5 // Add your desired corner radius
    scrollView.addSubview(line)
  }

4. In TabBar.swift change line 530

    // Replace line 530 with this.
    return CGRect(x: x, y: y + 5, width: w, height: lineHeight)

Then it's just a matter of playing with the values to get your desired look. I hope this helped - demonstration below.

I am going to close this ticket for now :)

[daniel-jonathan]

Thank you @adamdahan, a really helpful solution. I'd like to make sure that the API is not limited in this case, or if you have not seen the correct API configuration to use. We will update this issue within a day or two. For now, I would suggest to play with @adamdahan's solution, so you are not blocked.