2014年11月19日水曜日

【アプリ開発】ライブラリ導入－JazzyViewPager

今回新しいアプリを作成中で、そのアプリに新規にライブラリを導入してみましたので紹介していきます(^o^)／

ページを左右にフリックする際に様々なエフェクトを追加できるライブラリです。

❏JazzyViewPager

ページ切替の際に色々と効果を入れてみたいと思っていましたが手を出せずにいましたので、
まずはライブラリで試していきたいと思います(^^ゞ

エフェクト一覧（TrasitionEffect）

全部で12種類あるようです。
設定でそれぞれ切り替えれるようにしてみましたので、それぞれのイメージも載せていきます。

Standard
Tablet
CubeIn
CubeOut
FlipVertical
FlipHorizontal
Stack
ZoomIn
ZoomOut
RotateUp
RotateDown
Accordion

1.Standard

一般的なフリックでのページ切替動作になります。
普通にどのアプリでもみかける動作ですね。

2.Tablet

タブレットでみられるページ切替動作のようです。
タブレット自体あまり操作していませんが、実際はこうゆう動作をしているんでしょうね(^^;

3.CubeIn

手前側を中心にページが回転するようなページ切替動作になります。
3Dダンジョンなんかで視点が回転するようなイメージでしょうか(´・ω・`)

4.CubeOut

奥側を中心にページが回転するようなページ切替動作になります。
両方のページを見ることができるので、両方のページを確認したいときなんかに便利そうです♪

5.FlipVertical

奥に倒れていくようなページ切替動作になります。
ちょっと横にフリックした時の動作とあっていないので違和感がありますね(´・ω・`)

6.FlipHorizontal

真ん中を中心に縦にカードがめくれるようなページ切替動作になります。
ページがウラとオモテで切り替わる感じで使い勝手が良さそうですね(^^)

7.Stack

次のページが奥側から現れるようなページ切替動作になります。
背景がない文字のみのページだと次のページが奥にみえてしまってますね(^^;
背景があるページではうまく使えそうです(^o^)

8.ZoomIn

前のページは左に小さくなって消え次のページが右から大きくなって現れるページ切替動作になります。
文字のみの場合でも見やすくて使いやすそうなエフェクトかと思います。

9.ZoomOut

前のページは左に大きくなって消え次のページが右から小さくなって現れるページ切替動作になります。
ページ切り替え後、若干前のページが左に見えてしまっているのが気になります(・_・;

10.RotateUp

上側を中心に円運動で回転していくようなページ切替動作になります。
ページ切替がループするような作りだとうまく一周するように見せれるとかなと思いました(╹◡╹)

11.RotateDown

上側を中心に円運動で回転していくようなページ切替動作になります。
画面下部に円形のボタンをつけるとイイ感じになりそうかなと思います♪

12.Accordion

ページが折りたたまれて切り替わるページ切替動作です。
背景や画像だと綺麗に切替ができてよさそうですね、データフォルダなんかでも使ってみたいエフェクトです( ´∀｀)

まとめ

ViewPagerのページ切替効果をつけるのは今後も色々なアプリで使用できるかと思います。
動作がシンプルなアプリでもこのライブラリを使用すれば、アプリの品質も向上させることができますね(╹◡╹)

今後はデータフォルダのアプリにも取り入れられればと思います(´・ω・`)

コンテンツ製作メモ

ページ