目录
ViewFlipper
概述
感觉应该接在上一篇上,又成功多水了一篇文章
ImageSwitcher和TextSwitcher可以简单理解为切换图片和文字
而这个ViewFlipper实现的效果有点类似,它是切换整个视图(屏幕切换)
继承自ViewAnimator
补充
在ImageSwitcher和TextSwitcher对动画效果也有一定的提及如:
setInAnimation
setOutAnimation
再介绍两个相关方法
showNext() 显示FrameLayout里的下一个View
showPrevious 显示FrameLayou里的上一个View
实现
activity_main.xml
首先还是布局的配置,和前面两个的不太一样,在布局中需要把各个视图先定义好。
即在ViewFlipper中写若干个布局...每一个布局都相当于一个界面...
测试的话就简单的用图片来测试了...自备图片资源文件(加什么都可以)
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ViewFlipper
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/viewFlipper"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/a1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/a2"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/a3"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/a4"/>
</LinearLayout>
</ViewFlipper>
</android.support.constraint.ConstraintLayout>
MainActivity
首先还是绑定组件,既然要滑动离不开OnTouch,实际上Activity也有OnTouchEvent事件,所以这里选择了重写Activity的OnTouchEvent方法。
然后float startX,endX 不能少
onTouch和之前类似,需要注意的是,这里自定义了四个动画(xml文件,定义好存放于res/目录下,建个anim文件夹)
in_leftright.xml(从左到右进,含义下面类似,不赘述)
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="3000"
android:fromXDelta="-100%p"
android:toXDelta="0">
</translate>
</set>
in_rightleft.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="3000"
android:fromXDelta="100%p"
android:toXDelta="0">
</translate>
</set>
out_rightleft.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="3000"
android:fromXDelta="0"
android:toXDelta="100%p">
</translate>
</set>
out_leftright.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="3000"
android:fromXDelta="0"
android:toXDelta="100%p">
</translate>
</set>
代码比较短,根据英文含义大概也能看出意思,不是本文的重点,就跳过这四个代码的分析了。
然后通过
setOutAnimation和setInAnimation
使用我们写好的动画...
然后viewFlipper.showNext()
然后是上一页的话....把动画取反,showNext👉showPrevious
代码如下:
package com.example.viewflipper;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.ViewFlipper;
public class MainActivity extends AppCompatActivity {
private ViewFlipper viewFlipper;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewFlipper = findViewById(R.id.viewFlipper);
}
float startX,endX;
@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
if(action==MotionEvent.ACTION_DOWN){
startX = event.getX();
}else if(action==MotionEvent.ACTION_UP) {
if(startX>endX){
viewFlipper.setInAnimation(this,R.anim.in_rightleft);
viewFlipper.setOutAnimation(this,R.anim.out_rightleft);
viewFlipper.showNext();
}else if(endX>startX){
viewFlipper.setInAnimation(this,R.anim.in_leftright);
viewFlipper.setOutAnimation(this,R.anim.out_leftright);
viewFlipper.showPrevious();
}
}
return super.onTouchEvent(event);
}
}
效果的话..依旧不太好测试..HaHa 勉强放一张切换过程中的图吧