Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TabBar Item Customization #1266

Open
ahsanaasim opened this issue Sep 15, 2019 · 6 comments
Open

TabBar Item Customization #1266

ahsanaasim opened this issue Sep 15, 2019 · 6 comments
Assignees
Labels

Comments

@ahsanaasim
Copy link

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:
Screenshot 2019-09-15 at 3 10 37 PM

Result I am getting:
Screenshot 2019-09-15 at 3 13 35 PM

@ahsanaasim
Copy link
Author

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
Copy link
Author

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.

Screenshot 2019-09-15 at 3 29 12 PM

@ahsanaasim
Copy link
Author

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
Copy link
Member

daniel-jonathan commented Sep 19, 2019

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
Copy link
Contributor

adamdahan commented Sep 19, 2019

@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
    }
  }
  1. Open the TabBar.swift file in Material framework local to your project
  2. Manipulate the prepareLine() method
func prepareLine() {
    line.layer.zPosition = 10000
    lineHeight = 3
    line.layer.cornerRadius = 5 // Add your desired corner radius
    scrollView.addSubview(line)
  }
  1. 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 :)

line

Screen Shot 2019-09-19 at 12 18 31 PM

@daniel-jonathan
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development

No branches or pull requests

3 participants