CODEWITHSUNDEEP
iosswifttabs
caleb
caleb

Reputation: 119

Material Component Tabs Item size in Swift

enter image description here

I want to automatically resize the items to fit the number of UITabBarItem. However, the size of the item is not automatically adjusted. I would like to have two items full of tab bar, three of them full of tab bar.

Currently, the tab bar has an item, but the tab bar is not full because the size is constant.

enter image description here

let tabBar = MDCTabBar(frame: CGRect(x: 0, y: 88, width: 414, height: 40))

override func viewDidLoad() {
    super.viewDidLoad()

    configureTabBar()
}

func configureTabBar() {
    tabBar.items = [
        UITabBarItem(title: "one", image: .none, tag: 0),
        UITabBarItem(title: "two", image: .none, tag: 0),
    ]

    tabBar.itemAppearance = .titledImages
    tabBar.autoresizingMask = [.flexibleWidth, .flexibleBottomMargin]
    tabBar.sizeToFit()
    tabBar.tintColor = UIColor.red
    tabBar.barTintColor = UIColor.white
    tabBar.rippleColor = UIColor.red
    tabBar.bottomDividerColor = UIColor.lightGray
    tabBar.unselectedItemTintColor = UIColor.gray
    tabBar.selectedItemTintColor = UIColor.red

    view.addSubview(tabBar)
}

What options do I have to add in order to get the item to fill the tab bar like the example in the Material Components Tab?

Upvotes: 1

Views: 795

Answers (1)

naeloz
naeloz

Reputation: 38

How about add below code in configureTabBar()

tabBar.alignment = .justified

Edit: MDCTabBar have property called "alignment", so according to documentation in MaterialComponents MDCTabBar.h and MDCTabBar.m:

Property 'alignment' is Horizontal alignment of tabs within the tab bar. Changes are not animated. Default alignment is MDCTabBarAlignmentLeading. The default value is based on the position and is recommended for most applications

alignment is MDCTabBarAlignment enum type that have four kinds enum:

  1. MDCTabBarAlignmentLeading -> Items are aligned on the leading edge and sized to fit their content

  2. MDCTabBarAlignmentJustified -> Items are justified to equal size across the width of the screen. Overscrolling is disabled for this alignment.

  3. MDCTabBarAlignmentCenter -> Items are sized to fit their content and center-aligned as a group. If they do not fit in view, they will be leading-aligned instead.

  4. MDCTabBarAlignmentCenterSelected -> Tabs are center-aligned on the selected item.

Upvotes: 2

Related Questions