Android中ViewFlipper的使用及设置动画效果实例详解

2019-10-24 20:35:04

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了Android中ViewFlipper的使用及设置动画效果的方法,以实例形式较为详细的分析了ViewFlipper的功能、原理及设置与使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了Android中ViewFlipper的使用及设置动画效果。分享给大家供大家参考，具体如下：

说到左右滑动，其实实现左右滑动的方式很多，有ViewPaer，自定义实现Viewgroup，gallery等都可以达到这种效果。这里做下ViewFliper实现左右滑动的效果。

会用到以下的技术：

1、ViewFlipper

2、GestureDetector

3、Animation

主要是这三个类在起作用。

ViewFlipper，不妨把它看做一个容器吧，你可以把许多的View放在这个容器中，让它展示给用户，虽然它每次只展示一个view，我感觉它的用途更好是作为广告展示，比如类似购物网站那样的广告滚动展示。比如可以设置自动播放功能，就可以滚动广告了!

原理：向左向右滑动主要是依赖手势来控制，手势向右滑动就调用 viewFlipper.showNext()方法，同理，向左滑动就会去调用viewFlipper.showPrevious()方法。

效果图如下：

接下来直接上代码：

首先在布局文件中添加ViewFlipper的标签：

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:background="@drawable/pattern1" >

<Button

android:id="@+id/treasure_chest_btn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentRight="true"

android:background="@drawable/treasure" />

<ViewFlipper

android:id="@+id/viewflipper"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_below="@id/treasure_chest_btn" >

</ViewFlipper>

<Button

android:id="@+id/garbage_btn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_below="@id/viewflipper"

android:background="@drawable/garbage" />

</RelativeLayout>

其次是在anim中定义动画：

slide_left_in.xml：

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android" >



<translate

android:duration="800"

android:fromXDelta="100%p"

android:toXDelta="0" />

</set>

slide_left_out.xml：

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android" >

<translate

android:duration="800"

android:fromXDelta="0"

android:toXDelta="-100%p" />

</set>

slide_right_in.xml：

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android" >

<translate

android:duration="800"

android:fromXDelta="-100%p"

android:toXDelta="0" />

</set>

slide_right_out.xml：

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android" >

<translate

android:duration="800"

android:fromXDelta="0"

android:toXDelta="100%p" />

</set>

最后是Activity中的实现：

package net.loonggg.demo.slider;

import android.app.Activity;

import android.os.Bundle;

import android.view.GestureDetector;

import android.view.GestureDetector.OnGestureListener;

import android.view.LayoutInflater;

import android.view.MotionEvent;

import android.view.View;

import android.view.View.OnTouchListener;

import android.view.Window;

import android.view.animation.Animation;

import android.view.animation.Animation.AnimationListener;

import android.view.animation.AnimationSet;

import android.view.animation.AnimationUtils;

import android.widget.Button;

import android.widget.ImageView;

import android.widget.TextView;

import android.widget.ViewFlipper;

public class MainActivity extends Activity implements OnGestureListener,

OnTouchListener {

private GestureDetector detector;

private ViewFlipper myViewFlipper;

private int[] imgs = { R.drawable.img0, R.drawable.img1, R.drawable.img2,

R.drawable.img3, R.drawable.img4, R.drawable.img5 };

private int displayedChildIndex = 0;

private Button treasure_btn;

private Button garbage_btn;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.main);

myViewFlipper = (ViewFlipper) findViewById(R.id.viewflipper);

treasure_btn = (Button) findViewById(R.id.treasure_chest_btn);

garbage_btn = (Button) findViewById(R.id.garbage_btn);

myViewFlipper.setOnTouchListener(this);

myViewFlipper.setLongClickable(true);// 设置长按事件

// myViewFlipper.setAutoStart(true);// 设置是否自动播放，默认不自动播放

detector = new GestureDetector(this);

addFlipperView();

}

/**

* 向FlipperView中动态添加View

*/

private void addFlipperView() {

for (int i = 0; i < imgs.length; i++) {

View view = LayoutInflater.from(this).inflate(

R.layout.myviewflipper, null);

TextView title = (TextView) view.findViewById(R.id.view_title);

title.setText("头像");

ImageView iv = (ImageView) view.findViewById(R.id.view_image);

iv.setBackgroundResource(imgs[i]);

myViewFlipper.addView(view);

}

}

@Override

public boolean onDown(MotionEvent e) {

return false;

}

@Override

public void onShowPress(MotionEvent e) {

}

@Override

public boolean onSingleTapUp(MotionEvent e) {

return false;

}

@Override

public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,

float distanceY) {

return false;

}

@Override

public void onLongPress(MotionEvent e) {

}

@Override

public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,

float velocityY) {

// 返回当前正在显示的子视图的索引

displayedChildIndex = myViewFlipper.getDisplayedChild();

final ImageView iv = (ImageView) myViewFlipper.getChildAt(

displayedChildIndex).findViewById(R.id.view_image);

if (e2.getX() - e1.getX() >= 100 && e1.getY() - e2.getY() >= 100) {

AnimationSet outAnim = (AnimationSet) AnimationUtils.loadAnimation(

this, R.anim.collect_treasure);

iv.startAnimation(outAnim);

outAnim.setAnimationListener(new AnimationListener() {

public void onAnimationStart(Animation animation) {

}

public void onAnimationRepeat(Animation animation) {

}

public void onAnimationEnd(Animation animation) {

showNextView();

AnimationSet downAnim = (AnimationSet) AnimationUtils

.loadAnimation(MainActivity.this, R.anim.up_or_down);

treasure_btn.setAnimation(downAnim);

iv.clearAnimation();

}

});

} else if (e1.getX() - e2.getX() >= 100 && e2.getY() - e1.getY() >= 100) {

AnimationSet outAnim = (AnimationSet) AnimationUtils.loadAnimation(

this, R.anim.throw_garbage);

iv.startAnimation(outAnim);

outAnim.setAnimationListener(new AnimationListener() {

public void onAnimationStart(Animation animation) {

}

public void onAnimationRepeat(Animation animation) {

}

public void onAnimationEnd(Animation animation) {

showNextView();

AnimationSet leftAnim = (AnimationSet) AnimationUtils

.loadAnimation(MainActivity.this,

R.anim.left_or_right);

garbage_btn.setAnimation(leftAnim);

iv.clearAnimation();

}

});

} else if (e1.getX() - e2.getX() >= 100) {

showNextView();

} else if (e2.getX() - e1.getX() >= 100) {

showPreviousView();

}

return false;

}

private void showPreviousView() {

myViewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,

R.anim.slide_right_in));

myViewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,

R.anim.slide_right_out));

myViewFlipper.showPrevious();

}

private void showNextView() {

myViewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,

R.anim.slide_left_in));

myViewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,

R.anim.slide_left_out));

myViewFlipper.showNext();

}

@Override

public boolean onTouch(View v, MotionEvent event) {

return detector.onTouchEvent(event);

}

}