XLPagerTabStripのStoryboadの設定

Question

前提・実現したいこと

ライブラリ "XLPagerTabStrip"を使って、上タブの実装をしたいです。

発生している問題・エラーメッセージ

Storyboadにおいて初期設定で必要なOutletsに、containerViewの選択が表示されません。

試したこと

① ViewControllerからcontrolキーを押しながらScrollViewを選択し、
Outlets選択でcontainerViewが表示されるか。

② 該当ViewControllerを右クリックし、ReferecingOutltesでcontainerViewを表示されるか。

Comments

[TsukubaDepot]

おそらく、どこかのページを参考に実装されたのだと思いますが、そのURLを教えていただけないでしょうか。
ちなみに、Xcodeのあるバージョンからは、ScrollView の制約のかけ方がネット上にある大抵の記事と異なっているので、その考慮も必要です。

[maruco]

いつもサポートありがとうございます！！
参考にした記事は下記の２つです。
・https://qiita.com/glp/items/733e95686298e1326b57
・https://qiita.com/KikurageChan/items/35593dc3aac8d694db8e

[TsukubaDepot]

次回のご質問からは、ぜひ参考にされた記事もご質問本文にご記入いただければと思います。
ちなみに、XLPagerTabStripは実質的な最終メンテナンスから2年以上経っていますし、Qiitaの記事も2018年だったりするので、そのままだと適用できない部分もあります（特に、ScrollViewあたりの扱いが変わっているので、そこで失敗する可能性も高い）。
ですが、一応できる方法はわかったので、あとで時間をとって回答しますので、もう少々お待ちください。

[maruco]

お忙しい中早々のアドバイスありがとうございます！
次回からは参考記事も質問本文に記入いたします！！

そして、GitHubでXLPagerTabStripの最終メンテナンス時期を確認していませんでした。。今後はライブラリの導入時にメンテナンス時期を確認するクセもつけます。（こちらのアドバイスもありがとうございました！）

上タブの実装にあたり、当初Parchmentというライブラリの使用を試していましたが、私には実装が難しく断念し、XLPagerTabStripを選んだ次第です。

「一応できる方法はわかったので、あとで時間をとって回答しますので、もう少々お待ちください。」

↑ご親切なお気持ち本当にありがとうございます！！

Answer 1

• XLPagerTabStripの使い方とカスタマイズ

を参照されているようなので、この記事をベースに説明します。

まず、

• 管理されるViewControllerたち(IndicatorInfoProviderプロトコルを実装したUIViewController)

の節まではご理解いただいた上で、必要なクラスは作成されていると仮定します。

次に、

• Storyboardの準備

ですが、4つのView Controller を配置することも問題ないと仮定します。

次に、「上タブ」として実装したいということなので、「上タブ」に相当する CollectionView を配置します。

CollectionView を黒い View Controller のSafe Area内に配置し、制約（Constraint）は

• 上下左右: 0
• 高さ（height): 0
• 上左右: 0
• 高さ（height）: 40

に設定します(2020/10/01設定の説明を修正しました)。

ここで黒い背景の View Controller の Custom Class を「Main View Controller」に設定しておきます。

クラス名に「M」と打ち込んだだけで、残りのクラス名は自動補完されます。もし、自動保管さないのであれば、それはカスタムクラスを作っていないことが原因なので、

• 管理元クラス(ButtonBarPagerTabStripViewController)

を参考にカスタムクラスを作るようにしてください。

Collection View にカスタムクラスを設定します。クラス名に「B』と入れれば、「ButtonBarView」と自動補完されるはずです。

また、Collection View Cell にもカスタムクラスを設定します。クラス名に「B」といれれば、「ButtonBarViewCell」と自動補完されるはずです。

次に、ScrollView を配置します。

制約は

• 上下左右: すべて 0

に設定します。

すると、制約エラーが出ますが、ここではあえて無視します（詳しい説明は長くなるしうまく説明できないので省略しますが、レイアウトガイドなどをきちんと設定しないと ScrollView の制約が求められないことがその理由です）。

では、この制約エラーを解除したいと思います。
ScrollView を選択したまま、右側の「Show the size inspector」を選択し、

ここの「Content Layout Guide」に入っているチェックを外します。
すると、制約に関するエラーを解除することができるようになります。

次に、ScrollView の関連付けです。

Qiitaの記事通り、ScrollView で右クリックし、

Main View Controller までドラッグしたあと、次のようなメニューが出るので

Container View を選択します。

次に、ScrollView のカスタムクラスを設定します。
ScrollView を選択し、右側ペインを使ってカスタムクラスを設定します。

ここも Qiita 記事通りです。カスタムクラス名に「B」だけ入れれば、あとは「Button Bar View」と自動保管されます。もしされなければ、Podfile が正しく入っていない可能性が高いかと思います（あるいは、一度 Build ⌘ + B を行なってみてください）。

次に、Button Bar View で右クリックし、View Controller にドラッグします。

先ほどと同じくポップアップメニューが出ますので、「Button Bar View」を選択します。

あとは Build, Run するとこんな感じで画面遷移をさせることが可能になるはずです。

Comments

[TsukubaDepot]

もしうまくいかなければ
https://github.com/tsukubadepot/teratail-294804_XLTabPagerStrip
ここに上記のサンプルがあるので、clone して比較してみてもらえますでしょうか。

[maruco]

こんなに丁寧に教えて頂き、そしてサンプルファイルまで、、ありがとうございます！！
途中、ライブラリが正しくインストールされてないことも判明し、教えて頂いたアドバイスをもとに再インストールもし、無事に実装することができました！
この度も本当にありがとうございました！