はじめに (対象読者・この記事でわかること)

この記事は、SwiftでiOSアプリ開発を行っている方、特にUI/UXデザインにこだわりたい開発者を対象にしています。また、既存のアプリに新たなUIを導入したい方にも役立つ内容です。

この記事を読むことで、SwiftでSmartNews風のタブUIを実装するためのおすすめパッケージの選び方がわかります。各パッケージの特徴や実装方法を理解し、自身のアプリに適したUIを実装できるようになります。さらに、実装中によくある問題点とその解決策も学べます。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - Swiftの基本的な文法と構文 - iOS開発の基本的な知識（StoryboardやXcodeの使用経験） - UIKitまたはSwiftUIの基本的な理解

SmartNews風タブUIの概要と人気の理由

SmartNews風のタブUIは、横方向にスワイプできるタブバーを持ち、各タブが対応するコンテンツを表示するインターフェースです。このUIは、多くのニュースアプリやコンテンツアプリで採用されており、ユーザーが直感的にコンテンツを切り替えられる利便性が特徴です。

このUIが人気な理由はいくつかあります。まず、視覚的に分かりやすく、ユーザーが現在どのカテゴリーにいるかを一目で把握できます。次に、横方向へのスワイジェスチャーに対応しているため、片手での操作も容易です。さらに、タブの数が増えても縦方向のスペースを必要としないため、コンテンツ表示領域を広く確保できます。

iOS開発において、このUIを実装するには自前で実装する方法と、既存のライブラリを利用する方法があります。自前で実装するとカスタマイズ性は高いですが、時間と労力がかかります。一方、ライブラリを利用すれば迅速に実装できますが、カスタマイズに制限がある場合があります。

おすすめのタブUIパッケージと実装方法

SwiftでSmartNews風のタブUIを実装するためには、いくつかの優れたライブラリが存在します。ここでは、特に人気のある3つのパッケージを紹介し、それぞれの特徴と実装方法を解説します。

1. Tabman

Tabmanは、高度にカスタマイズ可能なタブバーとページビューコントローラーを提供するライブラリです。SmartNews風のタブUIを実装するのに最適です。

特徴: - 多くのカスタマイズオプション - アニメーション効果の豊富さ - パフォーマンスの高さ - Storyboardサポート

導入手順:

  1. CocoaPodsを使用してインストール
Ruby

pod 'Tabman'
  1. ViewControllerで実装
Swift

import Tabman
import TabmanBar

class TabViewController: TabViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        // タブアイテムの設定
        let items = ["ニュース", "エンタメ", "スポーツ", "テクノロジー"]

        // タブバーの設定
        self.dataSource = self
        self.addBar(TabBarDataSource.self, at: .top, layout: nil, class: TabmanBar.self)
    }
}

extension TabViewController: TabmanBarDataSource {
    func numberOfItems(in bar: TabmanBar) -> Int {
        return 4
    }

    func bar(for tabViewController: TabViewController, at index: Int) -> TabmanBar.Item {
        return TabmanBar.Item(title: ["ニュース", "エンタメ", "スポーツ", "テクノロジー"][index])
    }
}
  1. カスタマイズ
Swift

// タブバーの外観をカスタマイズ
let appearance = TabmanBar.Appearance()
appearance.state.selectedColor = .blue
appearance.state.color = .gray
appearance.indicator.cornerStyle = .rounded
appearance.indicator.weight = .medium
appearance.indicator.color = .blue

self.bar.appearance = appearance

2. Pageboy

Pageboyは、シンプルながら強力なページビューコントローラーで、Tabmanと組み合わせて使用することでSmartNews風のタブUIを実装できます。

特徴: - シンプルなAPI - スムーズなページ遷移 - 自動ページインデックス管理 - カスタマイズ可能なページコントローラー

導入手順:

  1. CocoaPodsを使用してインストール
Ruby

pod 'Pageboy'
  1. ViewControllerで実装
Swift

import Pageboy
import Tabman

class TabViewController: TabViewController, PageboyViewControllerDataSource, PageboyViewControllerDelegate {
    private var viewControllers: [UIViewController] = []

    override func viewDidLoad() {
        super.viewDidLoad()

        // ページビューコントローラーの設定
        self.dataSource = self
        self.delegate = self

        // タブバーの設定
        let items = ["ニュース", "エンタメ", "スポーツ", "テクノロジー"]
        self.dataSource = self
        self.addBar(TabBarDataSource.self, at: .top, layout: nil, class: TabmanBar.self)

        // ビューコントローラーの準備
        setupViewControllers()
    }

    private func setupViewControllers() {
        let newsVC = UIViewController()
        let entertainmentVC = UIViewController()
        let sportsVC = UIViewController()
        let techVC = UIViewController()

        viewControllers = [newsVC, entertainmentVC, sportsVC, techVC]
    }

    func numberOfViewControllers(in pageboyViewController: PageboyViewController) -> Int {
        return viewControllers.count
    }

    func viewController(for pageboyViewController: PageboyViewController, at index: PageboyViewController.PageIndex) -> UIViewController? {
        return viewControllers[index]
    }

    func defaultPage(for pageboyViewController: PageboyViewController) -> PageboyViewController.Page? {
        return .first
    }
}

3. XLPagerTabStrip

XLPagerTabStripは、長年使用されてきた信頼性の高いライブラリで、多くのアプリで採用されています。

特徴: - 簡単な実装 - 多様なスタイル - スムーズなアニメーション - Storyboardサポート

導入手順:

  1. CocoaPodsを使用してインストール
Ruby

pod 'XLPagerTabStrip'
  1. ViewControllerで実装
Swift

import XLPagerTabStrip

class TabViewController: ButtonBarPagerTabViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        // タブバーの設定
        settings.style.buttonBarItemTitleColor = .gray
        settings.style.buttonBarItemFont = .systemFont(ofSize: 14)
        settings.style.selectedBarBackgroundColor = .blue
        settings.style.selectedBarButtonColor = .blue
        settings.style.buttonBarMinimumInteritemSpacing = 0
        settings.style.buttonBarMinimumLineSpacing = 0
        settings.style.buttonBarItemsShouldFillAvailableWidth = true
        settings.style.buttonBarLeftContentInset = 0
        settings.style.buttonBarRightContentInset = 0
    }

    override func viewControllers(for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
        let childVC1 = ChildViewController(itemInfo: IndicatorInfo(title: "ニュース"))
        let childVC2 = ChildViewController(itemInfo: IndicatorInfo(title: "エンタメ"))
        let childVC3 = ChildViewController(itemInfo: IndicatorInfo(title: "スポーツ"))
        let childVC4 = ChildViewController(itemInfo: IndicatorInfo(title: "テクノロジー"))

        return [childVC1, childVC2, childVC3, childVC4]
    }
}

パッケージの比較

パッケージ メリット デメリット おすすめケース
Tabman 高度なカスタマイズ性、豊富なアニメーション 学習コストがやや高い UIにこだわりたい場合、複雑なアニメーションを実装したい場合
Pageboy シンプルなAPI、スムーズなページ遷移 Tabmanと組み合わせて使用する必要がある シンプルな実装を求める場合、ページビューに特化したい場合
XLPagerTabStrip 簡単な実装、多くのスタイル選択肢 最近のアップデートがやや少ない 初心者向け、迅速な実装を求める場合

ハマった点やエラー解決

問題1: タブバーが表示されない

現象: ライブラリをインストールし、コードを実装したにもかかわらず、タブバーが表示されない。

原因: TabmanやPageboyを使用する場合、親ViewControllerがTabViewControllerを継承している必要があります。また、ストーリーボードを使用する場合は、カスタムクラスを正しく設定しているか確認する必要があります。

解決策: 1. クラスが正しくTabViewControllerを継承しているか確認 2. Storyboardを使用している場合は、カスタムクラスが正しく設定されているか確認 3. タブバーの位置（.topや.bottom）が正しいか確認

問題2: ページ遷移がスムーズでない

現象: タブを切り替える際に、ページの遷移がカクカクしてスムーズに感じない。

原因: ページビューコントローラーの設定が不適切な場合や、各ページのビューコントローラーで重い処理を行っている場合に発生します。

解決策: 1. Pageboyのインジケータータイプを変更（例: .progressive）

Swift

self.indicator = .progressive
  1. 各ページのビューコントローラーで重い処理（画像の読み込みなど）は非同期で行う
  2. ビューコントローラーのキャッシュを有効にする

問題3: タブアイテムのテキストが長すぎて表示されない

現象: タブアイテムのテキストが長い場合、一部が表示されないまたは省略されない。

解決策: Tabmanを使用している場合は、テキストの省略設定を追加します。

Swift

let appearance = TabmanBar.Appearance()
appearance.text.font = .systemFont(ofSize: 14, weight: .medium)
appearance.text.selectedColor = .blue
appearance.text.color = .gray
appearance.text.autoAdjustsFontSize = false
appearance.text.maximumScaleFactor = 1.0

XLPagerTabStripを使用している場合は、ButtonBarPagerTabViewControllerの設定でテキストの省略を有効にします。

Swift

settings.style.buttonBarItemTitleNumberOfLines = 1
settings.style.buttonBarItemTitleLineBreakMode = .byTruncatingTail

まとめ

本記事では、SwiftでSmartNews風のタブUIを実装するためのおすすめパッケージを3つ紹介しました。

  • Tabman: 高度なカスタマイズ性が特徴で、UIにこだわりたい開発者におすすめ
  • Pageboy: シンプルなAPIでスムーズなページ遷移を実現
  • XLPagerTabStrip: 簡単な実装が可能で、迅速な開発を求める場合に適している

この記事を通して、SwiftでSmartNews風のタブUIを実装する方法と、各ライブラリの特徴を理解し、自身のアプリに最適な選択ができるようになったことを願っています。

今後は、これらのライブラリをさらに深くカスタマイズする方法や、より複雑なUIの実装方法についても記事にする予定です。

参考資料