viewflipper

In this tutorial we’ll discuss and implement Android ViewFlipper. ViewFlipper in android is mainly used in cases when we need to transform one view into another.

在本教程中，我们将讨论并实现Android ViewFlipper。 android中的ViewFlipper主要用于需要将一个视图转换为另一个视图的情况。

Android ViewFlipper (Android ViewFlipper)

ViewFlipper in android is an extension of ViewAnimator class, which animates between two or more views that have been added to it. Only one child is shown at a time and the user can flip to view the other child views. We can also implement the ViewFlipper such that it automatically flips between the views at regular intervals. A ViewFlipper can be used in gallery apps to navigate between the images.

android中的ViewFlipper是ViewAnimator类的扩展，该类在已添加到其中的两个或更多视图之间进行动画处理。 一次仅显示一个孩子，用户可以翻转以查看其他孩子的视图。 我们还可以实现ViewFlipper，以使其以固定的时间间隔自动在视图之间切换。 ViewFlipper可以在图库应用中使用，以在图像之间导航。

Android ViewFlipper supports the methods : setInAnimation() and setOutAnimation() in which we can use either the default animation from the android system or the write our own animation class. To control the auto-flip option, we can start and stop the timer on the ViewFlipper by invoking startFlipping() and stopFlipping() methods. We can set the auto flip interval using setFlipInterval(period). The next and previous child views are invoked using showNext() and showPrevious() methods on the ViewFlipper object.

Android ViewFlipper支持以下方法： setInAnimation（）和setOutAnimation（），在其中我们可以使用android系统中的默认动画，也可以编写自己的动画类。 要控制自动翻转选项，我们可以通过调用startFlipping（）和stopFlipping（）方法来启动和停止ViewFlipper上的计时器。 我们可以使用setFlipInterval（period）设置自动翻转间隔。 使用ViewFlipper对象上的showNext （）和showPrevious（）方法调用下一个和上一个子视图。

In this tutorial we’ll create an application that consists of 3 screens. We’ll show automatic flipping on each of them and use Android MotionEvent class to swipe left and right to flip between the first two screens.

在本教程中，我们将创建一个包含3个屏幕的应用程序。 我们将在每个屏幕上显示自动翻转，并使用Android MotionEvent类向左和向右滑动以在前两个屏幕之间翻转。

Android ViewFlipper示例项目结构 (Android ViewFlipper Example Project Structure)

This project consists of four custom animation classes that will show transitions between the ViewFlipper views.

该项目由四个自定义动画类组成，这些类将显示ViewFlipper视图之间的过渡。

Android ViewFlipper示例代码 (Android ViewFlipper Example Code)

The content_main.xml file is defined as shown below.

content_main.xml文件的定义如下所示。

The ViewFlipper tag consists of three sibling child views. Only one will be displayed at a time.

ViewFlipper标记包含三个同级的子视图。 一次只显示一个。

The four animation classes are placed in res/anim folder and are defined as below :

in_from_left.xml

四个动画类放置在res / anim文件夹中，定义如下：

in_from_left.xml

in_from_right.xml

in_from_right.xml

out_from_left.xml

out_from_left.xml

out_from_right.xml

out_from_right.xml

The MainActivity.java is defined as below.

MainActivity.java定义如下。

public class MainActivity extends AppCompatActivity {    private ViewFlipper mViewFlipper;    private Context mContext;    private float initialX;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);        mContext = this;        mViewFlipper = (ViewFlipper) this.findViewById(R.id.view_flipper);        findViewById(R.id.play).setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                mViewFlipper.setAutoStart(true);                mViewFlipper.setFlipInterval(1000);                mViewFlipper.startFlipping();                Snackbar.make(view, "Automatic view flipping has started", Snackbar.LENGTH_LONG)                        .setAction("Action", null).show();            }        });        findViewById(R.id.stop).setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                mViewFlipper.stopFlipping();                Snackbar.make(view, "Automatic view flipping has stopped", Snackbar.LENGTH_LONG)                        .setAction("Action", null).show();            }        });    }    @Override    public boolean onTouchEvent(MotionEvent touchevent) {        switch (touchevent.getAction()) {            case MotionEvent.ACTION_DOWN:                initialX = touchevent.getX();                break;            case MotionEvent.ACTION_UP:                float finalX = touchevent.getX();                if (initialX > finalX) {                    if (mViewFlipper.getDisplayedChild() == 1)                        break;                    mViewFlipper.setInAnimation(AnimationUtils.loadAnimation(mContext, R.anim.in_from_left));                    mViewFlipper.setOutAnimation(AnimationUtils.loadAnimation(mContext, R.anim.out_from_left));                    mViewFlipper.showNext();                } else {                    if (mViewFlipper.getDisplayedChild() == 0)                        break;                    mViewFlipper.setInAnimation(AnimationUtils.loadAnimation(mContext, R.anim.in_from_right));                    mViewFlipper.setOutAnimation(AnimationUtils.loadAnimation(mContext, R.anim.out_from_right));                    mViewFlipper.showPrevious();                }                break;        }        return false;    }}

The onTouchEvent method is implemented to detect swipes.

实现了onTouchEvent方法以检测滑动。

MotionEvent.ACTION_DOWN is the action when the touch gesture has first started and it notes the location.

MotionEvent.ACTION_DOWN是首次开始触摸手势并记录位置时的动作。

MotionEvent.ACTION_UP marks the touch gesture as finished and also gives the intermediate points since the last action.

MotionEvent.ACTION_UP将触摸手势标记为完成，并给出自上一次操作以来的中间点。

If we’re on the first child and a gesture from left to right is made the ViewFlipper would animate and display the second child. Vice-versa for the opposite gesture.

如果我们在第一个孩子上，则从左到右做出手势，ViewFlipper将设置动画并显示第二个孩子。 反之亦然。

Pressing the play button, animates and flips between the child views automatically at regular intervals.

按下播放按钮，将以固定间隔自动在子视图之间进行动画处理和翻转。

The application output in action is shown below.

运行中的应用程序输出如下所示。

This brings an end to Android ViewFlipper tutorial. You can download the final Android ViewFlipper Project from the link below.

这样就结束了Android ViewFlipper教程。 您可以从下面的链接下载最终的Android ViewFlipper项目 。

翻译自:

viewflipper