今回は、上タブで切り替えながら人気や新着漫画を表示するところなどを書きたいと思います。

１．StoryboardでUI部品をポチポチ配置します。

　この画面は上タブを使うためのXLPagerTabStripというライブラリをつかってます。
　そのため、「メインとなる画面（みつける画面）」と上タブで切り替えた画面「人気画面（FindPopularViewController）」と「新着画面(FindNewViewController)」の３つの画面で構成されています。

ライブラリを使うための細かな配置はこちらを参考にしました。

２．タブを作成していく

正直、上のQiitaの記事を見ればおおよそ作れてしまうので、細かなポイントだけ補足したいと思います。

import UIKit
import XLPagerTabStrip

class FindMainViewController:ButtonBarPagerTabStripViewController {
   
   var bookUrl:String = ""

    override func viewDidLoad() {
       //バーの色
       settings.style.buttonBarBackgroundColor = blueThemeColor
       //ボタンの色
       settings.style.buttonBarItemBackgroundColor = blueThemeColor
       //セルの文字色
       settings.style.buttonBarItemTitleColor = UIColor.white
       //セレクトバーの色
       settings.style.selectedBarBackgroundColor = orangeThemeColor
       
       settings.style.buttonBarHeight = 20
       settings.style.buttonBarItemFont = UIFont(name: "Mamelon", size: 16)!
       
       super.viewDidLoad()
   }
   
   override func viewControllers(for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
       //管理されるViewControllerを返す処理
       let firstVC = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "Popular")
       let secondVC = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "New")
       let childViewControllers:[UIViewController] = [firstVC, secondVC]
       return childViewControllers
   }

メイン画面のロジックです。
バーの色やボタンの色、フォントなどをUI部分を自身のテーマカラーにあわせて設定しています。その結果が以下です。

３．APIで漫画情報を取得して配置

漫画情報の取得には楽天APIを使っており、取得した情報をコレクションビューで配置する形です。

なお「人気画面（FindPopularViewController）」と「新着画面(FindNewViewController)」は正直同じレイアウトや機能なので共通化できるとは思ってはいるのですが、
うまくやれる方法がまだ勉強不足なので、重複したコードを書いてしまっています。
こういうところは今後、リファクタリング等で学んでいきたいなと思っています。

ちなみにタップしたらSafariが開くように漫画情報を裏で持たせています。

    // Cell が選択された場合
   func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
       let searchBookData = self.searchBookList.Items![indexPath.row]
       let url = URL(string: searchBookData.Item!.affiliateUrl)!
       if UIApplication.shared.canOpenURL(url) {
           UIApplication.shared.open(url)
       }
   }

サファリが実行されても、左上には前のアプリに戻るような仕組みがiOS標準でなっているので、WKWebViewでわざわざアプリ内でWeb表示させるよりは、思い切ってサファリに飛ばした方が楽だなーと最近感じてます。

４．読みたい漫画があれば登録できる機能をつける

この画面は見つけた漫画をワンタップで「よみたい」画面にて表示させることができるようにしています。

    @IBAction func tapWantReadButton(_ sender: Any) {
   
       let btn = sender as! UIButton
       let cell = btn.superview?.superview as! FindCollectionViewCell
       if let row = collectionView.indexPath(for: cell)?.row{
           
           let realm = try! Realm()
           let addBook = WantBooks()
           let selectBook = searchBookList.Items![row].Item
           addBook.key = getNowDateString()
           addBook.title = selectBook!.title
           addBook.author = selectBook!.author
           addBook.publisher = selectBook!.publisherName
           addBook.finishFlag = false
           addBook.memo = getNowDayString() + "にて人気の漫画から追加"
           addBook.createDay = getNowDayString()
           addBook.favorite = 1
           
           try! realm.write {
               realm.add(addBook)
               ALRT.create(.alert, title: "「よみたい」に追加しました").addOK().show()
               
           }
       }
   }

CollectionCellにてタップされたボタンを検知し、親viewを辿ってcellの情報を取得した上でDBに登録するような処理になっています。

一通り作って以下のような動きになります。

この画面のポイントとなる部分は以上です！
次はプログラミングからは少し離れますが、アイコン関連について書ければなと思っています。

また、今回の部分、もしくは今までのところでも良いので、この辺りはもっと詳しく、という話があれば、コメントいただければと思います！

では！