When using the iOS library made by Swift called XLPagerTabStrip, I implemented it in conjunction with TabBarController
. I'm a little clogged with the settings in storyboard
, so I'll post it as a memorandum.
【Xcode】Version 12.0.1 【Swift】Version 5.3 【CocoaPods】version 1.9.3
TabBarController
Delete the original ViewController
of Main.storyboard
and add TabBarController
. Please also delete the attached ViewController
. (This is the reason for having one ViewController
for one storyboard
.)
Check Is Initial View Controller
.
Create MainTabBarController.swift
and assign it to Class
in Main.storyboard
.
MainTabBarController.swift
class MainTabBarController: UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
//Prepare variables to store the view controller for each screen
var viewControllers = [UIViewController]()
//Settings for each screen(tab image etc.)
let tab1VC = UIStoryboard(name: "Bookmarks", bundle: nil).instantiateInitialViewController()
tab1VC?.tabBarItem = UITabBarItem(tabBarSystemItem: .bookmarks, tag: 0)
viewControllers.append(tab1VC!)
let tab2VC = UIStoryboard(name: "Favorites", bundle: nil).instantiateInitialViewController()
tab2VC?.tabBarItem = UITabBarItem(tabBarSystemItem: .favorites, tag: 0)
viewControllers.append(tab2VC!)
self.setViewControllers(viewControllers, animated: false)
}
}
ViewController
for each screentab1VC
as Bookmarks.storyboard
and tab2VC
as Favorites.storyboard
. Set UINavigationController
for each and give it a title so that you can distinguish it.
XLPagerTabStrip
cd target file
.podfile
with pod init
podfile
, save it, and complete with pod install
.podfile.rb
pod 'XLPagerTabStrip'
ButtonBarPagerTabStripViewController
ButtonBarPagerTabStripViewController
that manages ViewController
s. This time, Bookmarks
is the management source. Create BookmarksViewController.swift
.BookmarksViewController.swift
import UIKit
import XLPagerTabStrip
//Rewrite the inheritance source (UIViewController → ButtonBarPagerTabStripViewController)
class BookmarksViewController: ButtonBarPagerTabStripViewController {
override func viewDidLoad() {
super.viewDidLoad()
}
override func viewControllers(for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
//Processing to return a managed view controller
let firstVC = UIStoryboard(name: "First", bundle: nil).instantiateViewController(withIdentifier: "First")
let secondVC = UIStoryboard(name: "Second", bundle: nil).instantiateViewController(withIdentifier: "Second")
let thirdVC = UIStoryboard(name: "Third", bundle: nil).instantiateViewController(withIdentifier: "Third")
let childViewControllers:[UIViewController] = [firstVC, secondVC, thirdVC]
return childViewControllers
}
}
Collection View
which will be the button partPlace the Collection View
that will be the button part and set the Auto Layout
as shown in the image below. Let's delete Cell
.
Connect the class of Collection View
with ButtonBarView
and set Module to XLPagerTabStrip
.
Right-click on Collection View
. Drag the New Referencing Outlet
from the Referencing Outlets
to the ViewController
and select ButtonBarView
.
ScrollView
which will be the switching partScrollView
that will be the switching part and set the AutoLayout
as shown in the image below.Content Layout Guides
as you will get ambiguous layouts and warnings.Right-click on ScrollView
. Drag the New Referencing Outlet
from the Referencing Outlets
to the ViewController
and select containerView
.
If the connection is correct, the ScrollView
display will change to ContainerView
.
view controllers
ViewController
that transitions by swiping or pressing a button.UIViewController
s that implement the IndicatorInfoProvider
protocol.First.storyboard
and FirstViewController
. (The background color of storyboard
is red
)Second.storyboard
and SecondViewController
. (The background color of storyboard
is blue
)Third.storyboard
and ThirdViewController
. (The background color of storyboard
is green
)FirstViewController.swift
import UIKit
import XLPagerTabStrip
class FirstViewController: UIViewController {
//This is used for the button title
var itemInfo: IndicatorInfo = "First"
override func viewDidLoad() {
super.viewDidLoad()
}
}
extension FirstViewController: IndicatorInfoProvider {
func indicatorInfo(for pagerTabStripController: PagerTabStripViewController) -> IndicatorInfo {
return itemInfo
}
}
Place Label
and set Text
to First, Font
to 24, and AutoLayout
.
Set the Class
assignment and the Storyboard ID
.
MainTabBarController.swift
import UIKit
import XLPagerTabStrip
class BookmarksViewController: ButtonBarPagerTabStripViewController {
override func viewDidLoad() {
//Processing about screen UI
setupUI()
super.viewDidLoad()
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
//Forcibly reselect and operate changeCurrentIndexProgressive (0th → 1st → 0th)
moveToViewController(at: 1, animated: false)
moveToViewController(at: 0, animated: false)
}
func setupUI() {
//Background color of the entire ButtonBar
settings.style.buttonBarBackgroundColor = UIColor.white
//Background color of ButtonBarItem
settings.style.buttonBarItemBackgroundColor = UIColor.white
//Text color of ButtonBarItem
settings.style.buttonBarItemTitleColor = UIColor.lightGray
//Font size of ButtonBarItem
settings.style.buttonBarItemFont = .boldSystemFont(ofSize: 14)
//The color of the selected ButtonBar indicator
settings.style.selectedBarBackgroundColor = UIColor.black
//Thickness of the selected ButtonBar indicator
settings.style.selectedBarHeight = 2.0
//Leftmost margin of ButtonBar
settings.style.buttonBarLeftContentInset = 8
//Rightmost margin of ButtonBar
settings.style.buttonBarRightContentInset = 8
//Margins in Button
settings.style.buttonBarItemLeftRightMargin = 32
//Behavior when switching pages by swiping or tapping ButtonBarItem
changeCurrentIndexProgressive = { oldCell, newCell, progressPercentage, changeCurrentIndex, animated in
//Unwrap cells that have been changed or before and after selection
guard changeCurrentIndex, let oldCell = oldCell, let newCell = newCell else { return }
//Specify the state of the cell before selection
oldCell.label.textColor = UIColor.lightGray
//Specify the state of the selected cell
newCell.label.textColor = UIColor.black
}
}
override func viewControllers(for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
//Processing to return a managed view controller
let firstVC = UIStoryboard(name: "First", bundle: nil).instantiateViewController(withIdentifier: "First")
let secondVC = UIStoryboard(name: "Second", bundle: nil).instantiateViewController(withIdentifier: "Second")
let thirdVC = UIStoryboard(name: "Third", bundle: nil).instantiateViewController(withIdentifier: "Third")
let childViewControllers:[UIViewController] = [firstVC, secondVC, thirdVC]
return childViewControllers
}
}
Recommended Posts