Android ViewFlipper 翻转视图 2

上一章节中我们使用 ViewFlipper ( 翻转视图 ) 做了一个轮播图,但这个轮播图不能使用手势滑动,现在,我们就给他们加上吧


但这次我们使用 add(view) 方法动态添加层

  1. 复用 Android ViewFlipper 翻转视图 项目

  2. 修改 activity_main.xml 去掉静态导入

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
        <ViewFlipper
            android:id="@+id/guide"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:inAnimation="@anim/right_in"
            android:outAnimation="@anim/right_out"
            android:autoStart = "true" 
            android:flipInterval="3000">
    
        </ViewFlipper>
    
    </RelativeLayout>
    
  3. 因为分为进入上一页,进入下一页,所以除了上面的两个动画外,我们需要在 res/anim 目录下再添加两个动画

    left_in.xml

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

    left_out.xml

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
    
        <translate
            android:duration="500"
            android:fromXDelta="0"
            android:toXDelta="100%p" />
    
    </set>
    
  4. 修改 MainActivity.java

    这次我们加上全屏代码

    package cn.twle.android.flipperguide;
    
    import android.app.Activity;
    import android.content.Context;
    import android.os.Bundle;
    import android.view.GestureDetector;
    import android.view.MotionEvent;
    import android.view.Window;
    import android.view.WindowManager;
    import android.widget.ImageView;
    import android.widget.ViewFlipper;
    
    public class MainActivity extends Activity {
    
        private Context mContext;
        private ViewFlipper vflp_help;
        private int[] resId = {R.drawable.guide_1,R.drawable.guide_2,
                R.drawable.guide_3,R.drawable.guide_4};
    
        private final static int MIN_MOVE = 200;   //最小距离
        private MsGestureListener mgListener;
        private GestureDetector mDetector;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
    
            super.onCreate(savedInstanceState);
    
            //  title
            requestWindowFeature(Window.FEATURE_NO_TITLE);
    
            // 全屏
            getWindow().setFlags(WindowManager.LayoutParams. FLAG_FULLSCREEN ,WindowManager.LayoutParams. FLAG_FULLSCREEN);
    
            setContentView(R.layout.activity_main);
    
            mContext = MainActivity.this;
            //实例化 SimpleOnGestureListener  GestureDetector 对象
            mgListener = new MsGestureListener();
            mDetector = new GestureDetector(this, mgListener);
            vflp_help = (ViewFlipper) findViewById(R.id.guide);
    
            //动态导入添加子View
            for(int i = 0;i < resId.length;i++){
                vflp_help.addView(getImageView(resId[i]));
            }
    
        }
    
        //重写onTouchEvent触发MyGestureListener里的方法
        @Override
        public boolean onTouchEvent(MotionEvent event) {
            return mDetector.onTouchEvent(event);
        }
    
        private ImageView getImageView(int resId){
            ImageView img = new ImageView(this);
            img.setBackgroundResource(resId);
            return img;
        }
    
        //自定义一个GestureListener,这个是View类下的,别写错哦!!!
        private class MsGestureListener extends GestureDetector.SimpleOnGestureListener {
            @Override
            public boolean onFling(MotionEvent e1, MotionEvent e2, float v, float v1) {
                if(e1.getX() - e2.getX() > MIN_MOVE){
                    vflp_help.setInAnimation(mContext,R.anim.right_in);
                    vflp_help.setOutAnimation(mContext, R.anim.right_out);
                    vflp_help.showNext();
                }else if(e2.getX() - e1.getX() > MIN_MOVE){
                    vflp_help.setInAnimation(mContext,R.anim.left_in);
                    vflp_help.setOutAnimation(mContext, R.anim.left_out);
                    vflp_help.showPrevious();
                }
                return true;
            }
        }
    }
    

在实际的开发中,如果觉得动画太快太慢,可以调整 left|right_in|out.xmlandroid:duration

在开发范例的过程中,我们以为可以用 ACTION_MOVE ,后面发现还是 too young to native

参考文档

  1. Android ViewFlipper

Android 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.