How to disable horizontal scrolling to a Tab on Google Material Design for iOS

Question

I'm having problem figuring out how to disable the horizontal scrolling of the Tab bar from Google Material Design for iOS. I'm planning to make a fixed tab bar with 3 tabs options.

Maybe someone can help me. Thank you in advance.

Sample Code:

import UIKit
import MaterialComponents
import ChameleonFramework

class ViewController: UIViewController, MDCTabBarDelegate {


  override func viewDidLoad() {
    super.viewDidLoad()
    view.backgroundColor = .white
    navigationController?.navigationBar.isTranslucent = false
    setupView()
  }

  let tabBarContainer: MDCTabBar = {

    let tabBar = MDCTabBar()

    tabBar.barTintColor = .white

    tabBar.items = [
      UITabBarItem(title: "All Activities", image: nil, tag: 0),
      UITabBarItem(title: "Bookmark", image: nil, tag: 0),
      UITabBarItem(title: "My Journal", image: nil, tag: 0)
    ]

    tabBar.itemAppearance = .titledImages
    tabBar.autoresizingMask = [.flexibleWidth, .flexibleBottomMargin]
    tabBar.sizeToFit()

    tabBar.tintColor = UIColor.rgb(red: 12, green: 82, blue: 143)
    tabBar.selectedItemTintColor = UIColor.rgb(red: 12, green: 82, blue: 143)
    tabBar.unselectedItemTintColor = .lightGray

    return tabBar
  }()

  func setupView() {
    view.addSubview(tabBarContainer)
    view.addConstraintsWithFormat("H:|[v0]|", views: tabBarContainer)
    view.addConstraintsWithFormat("V:|[v0(48)]", views: tabBarContainer)
  }
}

Actual sample of the issue on simulator

Please check this, its resolve your problem :- https://github.com/PageMenu/PageMenu — Sharda Prasad, May 31 '17 at 06:38
@Rashwan L Thank you for the help. I appreciate it. But I'm afraid I can't use the PageMenu for now. I want to figure out how it work using Google MDC. — Turtle0001, May 31 '17 at 06:48

score 3 · Answer 1 · answered Aug 23 '17 at 20:35

3

May be I'm late, but I could achieve that thru

tabBar.alignment = .justified

answered Aug 23 '17 at 20:35

pulp

1,768
2
16
24

score 0 · Answer 2 · answered May 31 '17 at 08:05

0

Try this if available : In tabBarContainer

tabBar.scrollView.bounces = NO;

for swift 3.0 and above

tabBar.scrollView.bounces = false

answered May 31 '17 at 08:05

Aashish

161
13

Thank you for your help. Unfortunately it didn't work. But again, thank you for helping. :) – Turtle0001 May 31 '17 at 10:19
Did you figure it out? – jungledev Jul 13 '17 at 21:51

score 0 · Answer 3 · answered Nov 01 '18 at 09:02

MDCTabBar scrolling happens when you set its alignment (MDCTabBarAlignment) as :

.leading, .center or .centerSelected and the tabs do not fit in the given frame.

If you set it as .justified, items will be shrinked to fit into the frame.

myMdcTabBar.alignment = .justified

How to disable horizontal scrolling to a Tab on Google Material Design for iOS

3 Answers3