[날씨 기본앱] #2 메인 화면 구현하기 - UIPageViewController, UIPageControl, UIToolbar

page view controller를 이용하여 양옆으로 swipe 되도록 했고
UIToolbar 안에 page contol을 넣어 하단 툴바를 만들었습니다.

 	private let pageViewController = UIPageViewController(transitionStyle: .scroll, navigationOrientation: .horizontal)
 	private let pageControl = UIPageControl().then {
        	$0.currentPageIndicatorTintColor = .white
        	$0.pageIndicatorTintColor = .white.withAlphaComponent(0.3)
        	$0.translatesAutoresizingMaskIntoConstraints = false
    	}
    
  	private let toolbar = UIToolbar()

1️⃣ UIToolbar

        let leftIcon = UIBarButtonItem(customView: leftButton)
        let rightIcon = UIBarButtonItem(customView: rightButton)
        let flexibleSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: self, action: nil)
        
        let pageControl = UIBarButtonItem(customView: pageControl)
        
        toolbar.setBackgroundImage(UIImage(), forToolbarPosition: .any, barMetrics: .default)
        toolbar.backgroundColor = .clear
        toolbar.tintColor = .white
        toolbar.setItems([leftIcon, flexibleSpace, pageControl, flexibleSpace, rightIcon], animated: true)

flexibleSpace를 이용하면 같은 간격으로 아이콘들을 정렬할 수 있습니다.

2️⃣ PageViewController

extension MainPageViewController: UIPageViewControllerDataSource {
    func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {

        guard let index = pageViewController.viewControllers?.first?.view.tag else { return nil }
       
        let previousIndex = index - 1
        
        if previousIndex < 0 || viewControllerList.count <= previousIndex {
            return nil
        }
        
        return viewControllerList[previousIndex]
    }
    
    func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
        
        guard let index = pageViewController.viewControllers?.first?.view.tag else { return nil }
       
        let nextIndex = index + 1
        
        if viewControllerList.count <= nextIndex {
            return nil
        }
        
        return viewControllerList[nextIndex]
    }
    
}

extension MainPageViewController: UIPageViewControllerDelegate {
    func pageViewController(_ pageViewController: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [UIViewController], transitionCompleted completed: Bool) {
       guard completed else { return }
       
       if let vc = pageViewController.viewControllers?.first {
           pageControl.currentPage = vc.view.tag
       }
    }
    
}

3️⃣ Page Control

	pageControl.numberOfPages = viewControllerList.count
        pageControl.setIndicatorImage(UIImage(systemName: "location.fill"), forPage: 0)

setIndicatorImage를 이용하면 첫번째 pagecontrol 부분만 아이콘을 바꿀 수 있어요 :-)

📎 참고링크
https://developer.apple.com/documentation/uikit/uipageviewcontroller

📂 GitHub
https://github.com/ezidayzi/Moother_KimYoonSeo