利用ViewFlipper实现View间的动画效果（平移/渐变...）

最新推荐文章于 2022-05-22 21:43:41 发布

mouttz

最新推荐文章于 2022-05-22 21:43:41 发布

阅读量1.1k

点赞数

分类专栏： Androi学习文章标签： android layout encoding up

本文链接：https://blog.csdn.net/mouttz/article/details/8098799

版权

Androi学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了如何在Android中使用ViewFlipper实现视图间的平移和渐变动画效果。通过setInAnimation和setOutAnimation设置进入和退出动画，结合traslate和alpha动画资源，实现视图的平滑过渡。同时，文章还提到了startFlipping和stopFlipping方法用于循环切换，并展示了添加触摸事件监听器以实现手动切换。

摘要由CSDN通过智能技术生成

先看效果图，gif图做的有点粗糙

下面简单的说一下实现的方法.

1.ViewFlipper是继承与FrameLayout的一个子类，所以我们可以理解为在ViewFlipper中的View是一层层“摞”起来的，在布局时，这里可以把它当作FrameLayout使用

    <ViewFlipper
        android:id="@+id/viewFlipper1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
	<!--第一层，包括以个imageview和一个textview  -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/sec" />

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/sf" />

        </LinearLayout>
	<!--第二层view，包含一个imageview和一个textview  -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/back1" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/loadimage" />

        </LinearLayout>
    </ViewFlipper>

这样，ViewFlipper中的内容就已经填充好了，接下来是给他设置切换时的动画效果了

首先我们来了解一下ViewFlipper的几个重要的方法

1.setInAnimation 设置进入时的动画，这个是view从“看不到”到“看得到”。

2.setOutAnimation设置出去时的动画，这个是view从“看的到”到“看不到”

3.showNext/showPreviou 显示下一个/上一个 view

4.startFlipping/stopFlipping 开始循环切换ViewFlipper中包含的view

我们这里使用的是前三个，有了方法，下面就是设置动画效果了。

我们知道android的动画效果分为四种1.traslate(平移) 2.alpha(渐变透明度) 3.scale 4.rotate 这里我们只实现前面两种。

首先需要在res文件中新建一个anim的文件夹，然后新建一个如"in_lefttoright.xml"文件，代码如下

1.平移

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
        android:fromXDelta="-100%"
        android:toXDelta="0"
        android:duration="1000"/>
</set>

这里fromXDelta是指当前view的初始的最左x坐标，当从view从左到右进入时，即将进入的view是不可见的，所以的他的最左x坐标是“-100%”

toDelta是指当前view的目的位置的最左x坐标，view从左进入右之后，已经是可见的，他的最左坐标就是0

duration就是动画的时间

2.alpha

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha android:fromAlpha="1.0"
        android:toAlpha="0"
        android:duration="1000">  
    </alpha>
</set>

fromAlpha 初始view的透明度

toAlpha 最终view的透明度

duration 动画持续时间

接下来就是为动画切换添加监听器了，在onTouchEvent中

public boolean onTouchEvent(MotionEvent event) {
		// TODO Auto-generated method stub
		switch(event.getAction()){
			case MotionEvent.ACTION_DOWN:
				startX = event.getX();
			case MotionEvent.ACTION_UP:
				endX = event.getX();
				if(endX>startX){
					vf.setInAnimation(this,R.anim.in_alpha);
					vf.setOutAnimation(this,R.anim.out_alpha);
					vf.showNext();
				}
				else if(endX < startX){
					vf.setInAnimation(this,R.anim.in_righttoleft);
					vf.setOutAnimation(this,R.anim.out_righttoleft);
					vf.showNext();
				}
		}
		return super.onTouchEvent(event);
	}

向左滑动就...向右就...

这样view间的切换效果就完成了