【swift5】ViewPager-Swift使ってみた

こんにちは、おーしまです。

今回は、androidのViewPager的なものを使いたかったので、その時に「ViewPager-Swift」と言うライブラリを発見したのでそれを使ってみました。
結構、androidと似た形になったと思います。

「ViewPager-Swift」のGitHub
GitHub - nrlnishan/ViewPager-Swift: Simple View Pager library for swift using UIPageViewController and Scroll View

使う際は、

pod "ViewPager-Swift"

でライブラリをインストールしましょう。

完成形

画面上部のタブをタップ、もしくは画面を横へスワイプすることで画面が切り替わります。

今回は、ユーザーの数だけタブを作り、タブの切り替えで同じ画面のデータだけ入れ替えています。
タブごとに全く別のレイアウトの画面を表示させることもできるようです。

コードです。

Main.storyboard

ViewPagerを使うViewControllerと、画面を切り替える際に使うListTableViewControllerの2種類用意します。
タブで切り替える画面によって、レイアウトが違う場合は、その数だけのViewControllerが必要です。

ViewController.swift

import UIKit
import ViewPager_Swift

class ViewController: UIViewController {
    
    //表示するデータ
    var userData: [User]?
    
    //ViewPagerで表示させるViewController
    var viewPagerViewController: [ListTableViewController] = []
    
    
    //ViewPagerで表示させるタブの配列
    var viewPagerTabs: [ViewPagerTab] = []
    
    //ViewPager
    var viewPager: ViewPager?
    
    

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //表示するデータの作成
        let cars1 = [Car(carName: "Impreza", carMaker: "SUBARU"), Car(carName: "A4", carMaker: "Audi")]
        let cars2 = [Car(carName: "RAV4", carMaker: "TOYOTA")]
        let cars3 = [Car(carName: "mazda3", carMaker: "MAZDA"), Car(carName: "model3", carMaker: "Tesla"), Car(carName: "GTR", carMaker: "Nissan")]
        
        let user1 = User(userName: "けんた", userCars: cars1)
        let user2 = User(userName: "あかね", userCars: cars2)
        let user3 = User(userName: "ともき", userCars: cars3)
        
        self.userData = [user1, user2, user3]
        
        
        //初期化
        self.viewPagerTabs = []
        self.viewPagerViewController = []
        //userDataの数だけ繰り返す
        self.userData?.forEach({ user in
            //ViewPagerで表示させるViewControllerの作成
            self.viewPagerViewController.append(storyboard?.instantiateViewController(identifier: "ListTableViewController") as! ListTableViewController)
            
            //ViewPagerで表示させるタブの配列の作成
            guard let userName = user.name else { return }
            let tab = ViewPagerTab(title: userName, image: nil)
            self.viewPagerTabs.append(tab)
        })
        
        //ViewPager作成
        //オプション生成
        let myOptions = ViewPagerOptions()
        //オプションをつける
        myOptions.distribution = .segmented
        myOptions.tabViewBackgroundDefaultColor = UIColor.systemTeal
        myOptions.tabViewTextDefaultColor = UIColor.darkGray
        myOptions.isTabBarShadowAvailable = false
        myOptions.tabIndicatorViewBackgroundColor = UIColor.blue
        //ViewPager作成
        self.viewPager = ViewPager(viewController: self)
        self.viewPager?.setOptions(options: myOptions)
        self.viewPager?.setDataSource(dataSource: self)
        self.viewPager?.build()
        
    }


}

extension ViewController: ViewPagerDataSource{
    
    //ページ数を返す
    func numberOfPages() -> Int {
        return self.userData?.count ?? 0
    }
    
    //positionごとのViewControllerを返す
    func viewControllerAtPosition(position: Int) -> UIViewController {
        
        if let cars = self.userData?[position].cars {
            self.viewPagerViewController[position].cars = cars
        }
        return self.viewPagerViewController[position]
    }
    
    
    //タブの内容を返す
    func tabsForPages() -> [ViewPagerTab] {
        return self.viewPagerTabs
    }
    
    
    //最初に表示するページを返す（一番左から0）
    func startViewPagerAtIndex() -> Int {
        return 0
    }
    
    
}

表示したいデータ（今回で言うと、userData）の数だけ、VIewControllerとPagerViewTabを生成し、配列で用意しておきます。

ViewPagerのデザインなどのオプションはGitHubを見てください。

ListTableViewController.swift

import Foundation
import UIKit

class ListTableViewController: UIViewController {
    
    
    var cars: [Car]?

    
    @IBOutlet weak var listTableView: UITableView!
    {
        didSet{
            self.listTableView.dataSource = self
            self.listTableView.delegate = self
            
            listTableView.register(UINib(nibName: "TableViewCell", bundle: nil), forCellReuseIdentifier: "cell")
            
        }
    }
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        
        
    }
    
}

extension ListTableViewController: UITableViewDelegate, UITableViewDataSource {
    
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.cars?.count ?? 0
    }
    
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableViewCell
        cell.car = self.cars?[indexPath.row]
        return cell
    }
    
    
    
    
}

TableViewCell.swift

import Foundation
import UIKit

class TableViewCell: UITableViewCell{
    
    var car: Car?
    {
        didSet{
            
            if let car = self.car {
                
                self.carName.text = car.name
                self.carMaker.text = car.maker
            }
        }
    }
    
    
    @IBOutlet weak var carName: UILabel!
    @IBOutlet weak var carMaker: UILabel!
    
    
    override func awakeFromNib() {
        super.awakeFromNib()
        
        
        
    }
    
    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
        
        
        
    }
}

TableViewCell.xib

User.swift

import Foundation

class User {
    
    var name: String?
    var cars: [Car]?
    
    init(userName: String, userCars: [Car]){
        
        self.name = userName
        self.cars = userCars
    }
}

Car.swift

import Foundation

class Car {
    
    var name: String?
    var maker: String?
    
    init(carName: String, carMaker: String){
        
        self.name = carName
        self.maker = carMaker
    }
}

今回はここまでです。

実は3ヶ月ぶりくらいの投稿でした。
仕事でandroid studioとxcodeの両方を触るようになったので、ご満悦です。

それでは、また