转载

FlipperView-翻牌一样翻 View

具体效果如上图 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 里则是 AXIS X / AXIS Y。

duration

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

tapToFlip

是否点击翻转。

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

原文 http://juniperphoton.net/2017/01/18/flipperview-intro/

正文到此结束

所属分类：编程技术

本文标签： 时间 http GitHub src UI lib example git XML ip Select tab Android id java App IO
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二