具体效果如上图 GIF,先直接扔用法:
<com.juniperphoton.flipperviewlib.FlipperView
android:id="@+id/flipper_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:clickable="true"
android:clipChildren="false"
android:clipToPadding="false"
android:foreground="?android:attr/selectableItemBackground"
android:padding="20dp"
app:defaultIndex="0"
app:flipAxis="X"
app:flipDirection="backToFront"
>
<TextView
android:layout_width="200dp"
android:layout_height="50dp"
android:background="@color/exampleColor1"
android:gravity="center"
android:text="TAP ME"
android:textColor="@android:color/white"/>
<TextView
android:layout_width="200dp"
android:layout_height="50dp"
android:background="@color/exampleColor2"
android:gravity="center"
android:text="KEEP TAPPING"
android:textColor="@android:color/white"/>
<TextView
android:layout_width="200dp"
android:layout_height="50dp"
android:background="@color/exampleColor3"
android:gravity="center"
android:text="TAP ME PLEASE"
android:textColor="@android:color/white"/>
<TextView
android:layout_width="200dp"
android:layout_height="50dp"
android:background="@color/exampleColor4"
android:gravity="center"
android:text="DON'T STOP"
android:textColor="@android:color/white"/>
<TextView
android:layout_width="200dp"
android:layout_height="50dp"
android:background="@color/exampleColor5"
android:gravity="center"
android:text="OK THAT'S A STOP"
android:textColor="@android:color/white"/>
</com.juniperphoton.flipperviewlib.FlipperView>
FlipperView 是本质是一个 FrameLayout,一次只能显示一个 View,然后加入的各个 View 可以互相切换,然后切换动画是一个翻转动画:所以看起来就像是这个 View 的背后就有一个 View。
注意一下一些 Attr:
flipDirection
翻转方向,XML 里值为 backToFront
和 frontToBack
,JAVA 里值为 FLIP_DIRECTION_BACK_TO_FRONT
和 FLIP_DIRECTION_FRONT_TO_BACK
。
defaultIndex
默认显示的 View 的 Index,跟 FrameLayout child 的 index 是一样的。
flipAxis
翻转的轴,XML 值为 X 或者 Y。Java 里则是 AXISX / AXISY。
duration
动画时间,毫秒为单位,默认 200。
tapToFlip
是否点击翻转。