このプロジェクトは、OpenGL 2.0 に基づいた Android システム上で 3D スタイルのページフリップを実装することを目的としています。
JNIバージョンについては、 android-PageFlip-JNIを参照してください。
プレビュー
インストール
Android バージョンのサポート
使用法
ライセンス
以下のように build.gradle に追加します。
allprojects {
repositories {
maven { url " https://jitpack.io " }
}
}
そして:
dependencies {
compile ' com.github.eschao:android-PageFlip:1.0.2 '
}
次のバージョンはエミュレータでテストされています。
Android版 | APIバージョン | サポート |
---|---|---|
3.2 | API 13 | × |
4.1 | API 16 | √ |
4.2 | API 17 | √ |
4.3 | API18 | √ |
4.4 | API19 | √ |
5.0 | API 21 | √ |
5.1 | API 22 | √ |
6.0 | API 23 | √ |
7.0 | API 24 | √ |
7.1.1 | API 25 | √ |
7.+ | API 26 | √ |
GLSurfaceViewから拡張したサーフェスビュークラスを作成します
Android Rendererインターフェイスを実装して、コンテンツをビットマップ上に描画し、 PageFlipのテクスチャとして設定します。
サーフェス ビューのコンストラクターでPageFlipオブジェクトをインスタンス化します。
PageFlipを構成します。例: アニメーション期間、ページ モード、またはメッシュ ピクセルを設定します。
以下の Android イベントを処理します。
描画メッセージを送受信するには、メッセージ ハンドラーが必要になる場合があります。サンプルアプリケーションのPageFlipViewを参照してください。
メインスレッドと OpenGL レンダリング スレッド間の競合を避けるためにロックが必要になる場合があります。サンプルアプリケーションのPageFlipViewを参照してください。
詳細については、サンプル アプリケーションのPageFlipView をご覧ください。
PageFlipライブラリには、その動作をカスタマイズするためのいくつかの構成が用意されています。例: 影の色とアルファ、メッシュ ピクセルとページ モード。
PageFlipによって提供される 2 つのページ モードがあります。
EnableAutoPage を使用すると、自動ページ モードを有効にしたり、無効にしたりできます (シングル ページ モードも有効にします)。
例:
// enable auto page mode
mPageFlip . enableAutopage ( true );
画面のクリックによる反転を有効/無効にできます
例:
// enable clicking to flip
mPageFlip . enableClickToFlip ( true );
ページ幅の比率を 0 ~ 0.5f で指定して、ページ反転をトリガーするクリック イベントに応答する領域を設定できます。デフォルト値は0.5fです。これは、シングル ページ モードで画面の左半分をクリックすると後方反転が発生し、画面の右半分をクリックすると前方反転が開始されることを意味します。
例:
// set ratio with 0.3
mPageFlip . setWidthRatioOfClickToFlip ( 0.3f );
PageFlip に前方フリップまたは後方フリップが発生する可能性があることを通知するようにリスナーを設定できます。
例:
mPageFlip . setListener ( mListener );
メッシュに使用するピクセル数を設定します。メッシュが使用するピクセルが少ないほど、描画は細かくなり、パフォーマンスは低下します。デフォルト値は 10 ピクセルです。
例:
mPageFlip . setPixelsOfMesh ( 5 );
ページがカールしている場合、実際にはPageFlipによって半円柱として処理されます。半円柱のサイズを設定してフリップ形状を変更できます。半円柱はタッチ点から元の点までの線の長さに依存するため(下の図を参照)、 PageFlip に半円柱の周長を伝えるには、この線の長さの比率を指定する必要があります。デフォルト値は 0.8f です。
+----------------+
| touchP |
| . |
| |
| + p0 |
| |
| |
| p1 + |
| |
+----------------+
original point, that means you drag the page from here to touch point(touchP)
The length from p0 to p1 is peremeter of semi-cylinder and determined by ratio your giving
例:
mPageFlip . setSemiPerimeterRatio ( 0.6f );
シングルページモードでページがカールしている場合、折りページの裏側にマスクアルファを設定できます。デフォルト値は 0.6f です。
例:
mPageFlip . setMaskAlphaOfFold ( 0.5f );
折りページのエッジシャドウの開始/終了カラーと開始/終了アルファを設定できます。
例:
// set start color with 0.1f, start alpha with 0.2f, end color with 0.5f
// and end alpha with 1f
mPageFlip . setShadowColorOfFoldBase ( 0.1f , 0.2f , 0.5f , 1f );
折りページのベースシャドウの開始/終了カラーと開始/終了アルファを設定できます。
例:
mPageFlip . setShadowColorOfFoldBase ( 0.05f , 0.2f , 0.5f , 1f );
ページがカールしている場合、折りページのサイズは変更される指の動きに追従し、それに応じてエッジの影の幅も変更する必要があります。影の幅の適切な幅の範囲を設定できます。
例:
// set the minimal width is 5 pixels and maximum width is 40 pixels.
// set the ratio is 0.3f which means the width will be firstly computed by formula:
// width = diameter of semi-cylinder * 0.3f, and then compare it with minimal
// and maximal value to make sure the width is in range.
mPageFlip . setShadowWidthOfFoldEdges ( 5 , 40 , 0.3f );
折りページのエッジの影の幅と同様に、折りページのベースの影の幅の範囲を適切に設定できます。
例:
// see {@link #setShadowWidthOfFoldEdges} function
mPageFlip . setShadowWidthOfFoldBase ( 5 , 40 , 0.4f );
onFingerUp関数を呼び出して指を上げたイベントを処理するときに、反転アニメーションの期間を指定できます。
例:
// the last parameter is duration with millisecond unit, here we set it with 2 seconds.
mPageFlip . onFingerUp ( x , y , 2000 );
このプロジェクトは、Apache License Version 2.0 に基づいてライセンスされています。