Android ViewFlipper示例教程
时间：2020-02-23 14:29:22 来源:igfitidea点击:
在本教程中，我们将讨论并实现Android ViewFlipper。
android中的ViewFlipper主要用于需要将一个视图转换为另一个视图的情况。
Android ViewFlipper
android中的ViewFlipper是ViewAnimator类的扩展，该类在已添加到其中的两个或者更多视图之间设置动画。
一次仅显示一个孩子，用户可以翻转以查看其他孩子的视图。
我们还可以实现ViewFlipper，以便它以固定的间隔自动在视图之间翻转。
ViewFlipper可以在图库应用中使用，以在图像之间导航。
Android ViewFlipper支持以下方法：setInAnimation()和setOutAnimation()，其中我们可以使用android系统中的默认动画，也可以编写自己的动画类。
为了控制自动翻转选项，我们可以通过调用startFlipping()和stopFlipping()方法在ViewFlipper上启动和停止计时器。
我们可以使用setFlipInterval(period)设置自动翻转间隔。
使用ViewFlipper对象上的showNext()和showPrevious()方法调用下一个和上一个子视图。
在本教程中，我们将创建一个包含3个屏幕的应用程序。
我们将在每个屏幕上显示自动翻转，并使用Android MotionEvent类向左和向右滑动以在前两个屏幕之间翻转。
Android ViewFlipper示例项目结构
该项目由四个自定义动画类组成，这些类将显示ViewFlipper视图之间的过渡。
Android ViewFlipper示例代码
" content_main.xml"文件的定义如下所示。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.theitroad.viewflipper.MainActivity"
tools:showIn="@layout/activity_main">
<ViewFlipper
android:id="@+id/view_flipper"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:background="@android:color/black"
android:scaleType="centerCrop"
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center"
android:text="First Child"
android:textColor="@android:color/white"
android:textSize="18dp"
android:textStyle="bold"
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:background="@android:color/darker_gray"
android:scaleType="centerCrop"
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center"
android:text="Second Child"
android:textSize="18dp"
android:textStyle="bold"
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:background="@android:color/holo_green_light"
android:scaleType="centerCrop"
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center"
android:text="Third Child"
android:textSize="18dp"
android:textStyle="bold"
</RelativeLayout>
</ViewFlipper>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentTop="true"
android:gravity="center"
android:orientation="horizontal">
<Button
android:id="@+id/play"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginRight="10dp"
android:background="@android:drawable/ic_media_play"
<Button
android:id="@+id/stop"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@android:drawable/ic_media_pause"
</LinearLayout>
</RelativeLayout>
" ViewFlipper"标签由三个同级的RelativeLayout子视图组成。
一次只显示一个。
四个动画类放置在res/anim文件夹中，定义如下：in_from_left.xml
<set xmlns:android="https://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="-100%" android:toXDelta="0%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="1400"
</set>
in_from_right.xml
<set xmlns:android="https://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="100%" android:toXDelta="0%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="1400"
</set>
out_from_left.xml
<set xmlns:android="https://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate android:fromXDelta="0%" android:toXDelta="-100%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="1400"
</set>
out_from_right.xml
<set xmlns:android="https://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate android:fromXDelta="0%" android:toXDelta="100%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="1400"
</set>
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;
}
}
实现了onTouchEvent方法来检测滑动。
MotionEvent.ACTION_DOWN是首次开始触摸手势并记录位置时的动作。
MotionEvent.ACTION_UP将触摸手势标记为完成，并给出自上一次操作以来的中间点。
如果我们在第一个孩子上，则从左到右做出手势，ViewFlipper会设置动画并显示第二个孩子。
反之亦然。
按下播放按钮，将以固定间隔自动在子视图之间进行动画处理和翻转。
