MDCTabBar selection indicator animation

Question

I am new to iOS development and I am trying to recreate Android style top tabs with swiping between pages. https://material.io/design/components/tabs.html#behavior

I am using the UIPageViewController together with MDCTabBar to replicate Android ViewPager+TabView combo. However, I cannot make the tab indicator (an highlight for active tab) move along with tabs swipe. Is it impossible using the MDCTabBar or am I missing something?

score 1 · Answer 1 · answered Oct 11 '18 at 15:55

Assuming that you've implemented UIPageViewControllerDelegate in the view controller you can do the following:

func pageViewController(_ pageViewController: UIPageViewController, willTransitionTo pendingViewControllers: [UIViewController]) {
    let index = pages.index(of: pendingViewControllers[0])!
    tabBarView.setSelectedItem(tabBarView.items[index], animated: true)
}

Plus MDCTabBarDelegate part:

func tabBar(_ tabBar: MDCTabBar, willSelect item: UITabBarItem) {
    let currentIndex = tabBarView.items.index(of: tabBarView.selectedItem!)!
    let nextIndex = tabBarView.items.index(of: item)!
    var direction = currentIndex < nextIndex ? UIPageViewControllerNavigationDirection.forward :  UIPageViewControllerNavigationDirection.reverse

    setViewControllers([pages[nextIndex]], direction: direction, animated: true, completion: nil)
}

MDCTabBar selection indicator animation

1 Answers1