PICOLのこだわり。チュートリアルページ
PICOLというアプリのiOSアプリを担当させていただいて作りました。
PICOLは、バーコードを使って査定する買い取りアプリなのですが、もともとのコンセプトが
「ゲームっぽさ」
を目指しているのもあり、よくある標準UIKitのタブビューやナビゲーションバーを使わないデザインで画面デザインが上がってきました。
PICOLのホーム画面
チュートリアルもHOME画面ににたデザインで仕上がってきたので、作ったチュートリアルはこんなかんじ。
— なおち (@naochi___) 2018年6月18日
どこがこだわりなんだ。普通じゃない？ものすごく普通じゃない？って思ったアナタ。
普通はこっちです。
— なおち (@naochi___) 2018年6月18日
ね。こっちでも全然大丈夫じゃないですか。チュートリアルなんか１回しか見ないものだし、そこに力入れるのも。。って感じもするし。
でも、やだったんです。ページコントロール（画面下のページ番号が点々ででてるやつ）が一緒に横にスクロールしちゃったりするの。
そうなると画面の上下の赤い雲もヘッダとフッタな訳で。これも動いちゃやだなって思いました。ああ、そうなると黒いページ番号も固定したいじゃないかーって、さらに思ってしまいました。
社長がイケメンだしチュートリアルから気持ちいいものを使ってもらいたいですしね。
では、どうやって実装したのか図解します。
まず、チュートリアルは横スワイプでページを切り替えるだけの機能なのでUIPageViewControllerを使用しました。UIScrollViewかどちらかなのかなって思います。
横にスワイプして表示されるチュートリアルのそれぞれのページは、UIPageViewControllerDelegateのメソッドで、今表示するページを指定すて返すような仕組みになっています。表示はこれにお任せです。
func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
}
func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
}
そして、ヘッダ、フッタと、ページコントロールを持つ、固定したいビューをUIViewとして別のnibに作り初期化したら最初のUIPageViewControllerのviewDidLoadで
self.view.addSubview(tutorialHeaderView)
とやるだけ。 そうすると固定されたヘッダビューの出来上がりとなります。
]
ただし。これだけだと上にヘッダのビューを重ねているので、ページをスワイプ するときのタッチイベントがヘッダビューに取られてしまうので、ヘッダビューのクラスに hittestをつけて、nibからイベントを下のビューに逃したいViewに適当なtagをつけておきます。 そうするとスワイプ のイベントも効くようになります。
override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
let view = super.hitTest(point, with: event)
//真ん中のviewに触られたら下のviewにタッチイベントを透過したい
if view?.tag == 111 {
return nil
}
return view
}
サンプルコード、時間できたらあげると思う。
