zoukankan      html  css  js  c++  java
  • 有关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" >
    
        <!--
         画面转换位置移动动画效果 
         开始向左动画
         fromXDelta : 动画开始时 X坐标位置
         toXDelta :动画结束时 X坐标位置
         duration :动画持续时间
        -->
        <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);
    	}
    
    }
    转载请注明出处:http://blog.csdn.net/loongggdroid/article/details/18262543

  • 相关阅读:
    两个数据库比较 对比视图存储过程及表结构差异
    导入/导出Excel
    比较两个数据库的表结构差异
    根据当月数据库自动生成下个月数据库--3
    根据当月数据库自动生成下个月数据库--2
    根据当月数据库自动生成下个月数据库--1
    ubuntu 分屏工具
    ubuntu 分屏工具
    中英文对照 —— 色彩的描述
    中英文对照 —— 色彩的描述
  • 原文地址:https://www.cnblogs.com/loonggg/p/4981818.html
Copyright © 2011-2022 走看看