FlipperView - 翻牌一样翻 View

6,115 阅读1分钟

具体效果如上图 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 里值为 backToFrontfrontToBack,JAVA 里值为 FLIP_DIRECTION_BACK_TO_FRONTFLIP_DIRECTION_FRONT_TO_BACK

defaultIndex

默认显示的 View 的 Index,跟 FrameLayout child 的 index 是一样的。

flipAxis

翻转的轴,XML 值为 X 或者 Y。Java 里则是 AXISX / AXISY。

duration

动画时间,毫秒为单位,默认 200。

tapToFlip

是否点击翻转。

GitHub 地址在这里,同时,也有适用于 UWP app 的版本,在这里