備忘録

なんとなく暇なときにでも....

無限スクロールできるタブを実装する

初のブログ投稿からはや1日。

今日から本格的に備忘録も兼ねて記事を挙げていこうかと思います。 暇つぶしにいろんな会社の技術ブログをちらちら覗いているのですが、 今日はVASILYさんのDEVELOPER BLOGの「UIPageViewControllerをつかって無限スクロールできるタブUIを実装してOSSとして公開しました」の記事が目に留まったので、エンジニアとしては新兵の私にはちょうどよいかなと思い、さっそく実装してみることにしました。

tech.vasily.jp

さっそくあたらしいcocoapodを使ってinstallしようとしたところ...

Pods written in Swift can only be integrated as frameworks; this feature is still in beta. Add `use_frameworks!` to your Podfile or target to opt into using it.

のような警告が... Podfileにuse_frameworks!を追記して、もう一度pod installしたら直しました。

# Uncomment this line to define a global platform for your project
# platform :ios, '6.0'
use_frameworks! // コメントアウトされてたら外す。

target 'XXXXXXX' do
    pod "TabPageViewController"
end

target 'XXXXXXX' do

end

解決したので実際に実装していきます。(コード自体は丸パクリしてます笑) ここで新兵ならではハマりが... そのまま新しいプロジェクトをxcodeで立ち上げて、ただただTabPageViewControllerを最初のUIViewControllerにimportして、viewDidLoad()などにコードを書いていって、ビルドしても真っ白なViewしか表示されない。(普通に考えればわかることですが、新兵なのでお許しください。)

実際にViewを表示するにはNavigationControllerを使って実装すればよさそう!

import UIKit
import TabPageViewController

class FirstViewController: UIViewController{
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let storyboard = UIStoryboard(name: "Main", bundle: nil)
        
        //無限スクロールタブを実装
        let tc = TabPageViewController.create()
        let vc1 = UIViewController()
        vc1.view.backgroundColor = UIColor(red: 251/255, green: 252/255, blue: 149/255, alpha: 1.0)
        let vc2 = UIViewController()
        vc2.view.backgroundColor = UIColor(red: 252/255, green: 150/255, blue: 149/255, alpha: 1.0)
        let vc3 = UIViewController()
        vc3.view.backgroundColor = UIColor(red: 149/255, green: 218/255, blue: 252/255, alpha: 1.0)
        let vc4 = UIViewController()
        vc4.view.backgroundColor = UIColor(red: 149/255, green: 252/255, blue: 197/255, alpha: 1.0)
        let vc5 = UIViewController()
        vc5.view.backgroundColor = UIColor(red: 252/255, green: 182/255, blue: 106/255, alpha: 1.0)
        tc.tabItems = [(vc1, "Mon."), (vc2, "Tue."), (vc3, "Wed."), (vc4, "Thu."), (vc5, "Fri.")]
        tc.isInfinity = true
        let nc = UINavigationController()
        nc.viewControllers = [tc]
        var option = TabPageOption()
        option.currentColor = UIColor(red: 246/255, green: 175/255, blue: 32/255, alpha: 1.0)
        tc.option = option
        tc.navigationItem.hidesBackButton = true
        
        navigationController?.pushViewController(tc, animated: true) 
        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
}

これでなんとかサンプルの再現はできるようになりました。

f:id:tomAn:20160530004525p:plain:w100


ここまではただサンプルコードを丸写ししただけなので、だれでもできると思います。←

今日はもう遅いのでこの辺にしときます。 次回は各タブページでコンテンツを表示できるようになるまでに記録をお届けできればと思います。

参考サイト