ViewPager与ViewFlipper实现图片导航的左右滑动

最新推荐文章于 2021-05-27 17:21:55 发布
最新推荐文章于 2021-05-27 17:21:55 发布
阅读量430 收藏 1
点赞数
文章标签： ViewPager ViewFlipper 图片的左右滑动 android 导航
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhang106209/article/details/78117917
版权

使用ViewPager和ViewFlipper实现图片导航的左右滑动

效果如下：



1.ViewFlipper控件，是ImageView的容器，用于添加显示的图片资源，主要功能有两个：添加显示View和自动播放View。

（1）ViewFlipperActivity

package com.example.navigationimgslide;

import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;

/**
 * @author zw
 * @deprecated viewFlipper方式
 *
 */

public class ViewFlipperActivity extends Activity implements View.OnTouchListener{

    private MyViewFlipper viewFlipper;
    private LinearLayout lvlayout;
    private GestureDetector mDetector;//手势检测
    private int[] str=new int[]{
            R.drawable.image01,R.drawable.image02,
            R.drawable.image03,R.drawable.image04};

    private ImageView[] images;
    private ImageView img;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_viewflipper);
        initView();

    }
    /**
     * 初始化
     */
    private void initView(){
        viewFlipper= (MyViewFlipper) findViewById(R.id.viewFlipper);
        lvlayout= (LinearLayout) findViewById(R.id.linear);
        initData();


    }

    private void initData() {

        images=new ImageView[str.length];
        for (int i=1;i<=4;i++){
            viewFlipper.addView(getImageView(str[i-1]));
            img=new ImageView(this);
//           
            //默认选中第一张
            if (i==1){
                img.setImageResource(R.drawable.page);
            }else{
                img.setImageResource(R.drawable.page_now);
            }

            LinearLayout.LayoutParams params= new LinearLayout.LayoutParams( 20,20);
            params.setMargins(10,0,10,0);
            lvlayout.addView(img,params);
        }


        viewFlipper.setOnViewCountListener(new MyViewFlipper.OnViewCountListener() {
            @Override
            public void viewCount(int count) {

                ImageView imgView=null;
                for (int i=0;i<lvlayout.getChildCount();i++){
                    imgView= (ImageView) lvlayout.getChildAt(i);
                    //设置选中的
                    if (count==i){
                        imgView.setImageResource(R.drawable.page);
                    }else{
                       imgView.setImageResource(R.drawable.page_now);
                    }
                }
            }
        });
        viewFlipper.setOnTouchListener(this);

        mDetector=new GestureDetector(new MyGesturListener());

    }

    private View getImageView(int id) {
        ImageView image=new ImageView(this);
        image.setScaleType(ImageView.ScaleType.FIT_XY);
        image.setImageResource(id);
        return image;
    }


    /**
     * 触摸事件
     * @param view
     * @param motionEvent
     * @return
     */
    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        // 需要通过手势识别器 去识别触摸的动作
        mDetector.onTouchEvent(motionEvent);
        return true;
    }


    /**
     * 手势识别的监听
     */
    private class MyGesturListener implements GestureDetector.OnGestureListener {

        final int FLING_MIN_DISTANCE = 100, FLING_MIN_VELOCITY = 200;
        @Override
        public boolean onDown(MotionEvent motionEvent) {
            Toast.makeText(ViewFlipperActivity.this,"onDown",Toast.LENGTH_SHORT).show();
            return true;
        }

        @Override
        public void onShowPress(MotionEvent motionEvent) {
            Toast.makeText(ViewFlipperActivity.this,"onShowPress",Toast.LENGTH_SHORT).show();
        }

        @Override
        public boolean onSingleTapUp(MotionEvent motionEvent) {
            Toast.makeText(ViewFlipperActivity.this,"onSingleTapUp",Toast.LENGTH_SHORT).show();
            return false;
        }

        @Override
        public boolean onScroll(MotionEvent motionEvent, MotionEvent motionEvent1,
                                float v, float v1) {
            Toast.makeText(ViewFlipperActivity.this,"onScroll",Toast.LENGTH_SHORT).show();
            return false;
        }

        @Override
        public void onLongPress(MotionEvent motionEvent) {
            Toast.makeText(ViewFlipperActivity.this,"onLongPress",Toast.LENGTH_SHORT).show();
        }

        /**
         * 手指滑动屏幕的时候 调用的方法
         * @param e1 是第一触摸屏幕时候的事件
         * @param e2 手指离开时候 的事件
         * @param velocityX x方向的速度
         * @param velocityY y方向的速度
         * @return
         */
        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2,
                               float velocityX, float velocityY) {
            Toast.makeText(ViewFlipperActivity.this,"onFling",Toast.LENGTH_SHORT).show();
            //如果垂直方向移动的距离过大 就是无效的手势
            if(Math.abs(e1.getY()-e2.getY()) >FLING_MIN_DISTANCE) {
                return false;

            }

            //判断向右滑动屏幕的事件
            if (e2.getX()-e1.getX()>100 && Math.abs(velocityX)> 100){

                // 指定下一个view对象进来时候的动画效果
                viewFlipper.setInAnimation(ViewFlipperActivity.this,R.anim.in_leftright);

                //设置当前view对象出去时候的动画效果
                viewFlipper.setOutAnimation(ViewFlipperActivity.this,R.anim.out_leftright);

                //显示上一个内容
                viewFlipper.showPrevious();
            }

            //判断向左滑动屏幕的事件
            if (e1.getX()-e2.getX()>100 && Math.abs(velocityX)> 100){

                // 指定下一个view对象进来时候的动画效果
                viewFlipper.setInAnimation(ViewFlipperActivity.this,R.anim.in_rightleft);

                //设置当前view对象出去时候的动画效果
                viewFlipper.setOutAnimation(ViewFlipperActivity.this,R.anim.out_rightleft);

                //显示下一个内容
                viewFlipper.showNext();
            }


            return true;
        }

    }
}

(2)activity_viewFlipper.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="240dp"
    >

    <com.example.navigationimgslide.MyViewFlipper
        android:id="@+id/viewFlipper"
        android:layout_width="match_parent"
        android:layout_height="240dp"
         />


    <LinearLayout
        android:id="@+id/linear"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:gravity="center"
        android:background="#4ccc"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal" />


</RelativeLayout>

(3)左右滑动的动画

（3.1）向右滑动屏幕：进、出两个动画
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="2000"
        android:fromXDelta="-100%p"
        android:toXDelta="0"/>
</set>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="2000"
        android:fromXDelta="0"
        android:toXDelta="100%p"/>
</set>

（3.2）向左滑动屏幕
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="2000"
        android:fromXDelta="100%p"
        android:toXDelta="0%p"/>
</set>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="2000"
        android:fromXDelta="0"
        android:toXDelta="-100%p"/>
</set>


（4）自定义的ViewFlipper:myViewFlipper

package com.example.navigationimgslide;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ViewFlipper;

/**
 * Created by zw 
 * 自定义的ViewFlipper
 */

public class MyViewFlipper extends ViewFlipper{

    public MyViewFlipper(Context context) {
        super(context);
    }

    public MyViewFlipper(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public void showNext() {
        super.showNext();
        //从继承关系中发现当子view变化的时候会调用该方法，因此在这里弄个回�?
       mOnViewCountListener.viewCount(getDisplayedChild());
    }

    private OnViewCountListener mOnViewCountListener;

    public void setOnViewCountListener(OnViewCountListener mOnViewCountListener) {
        this.mOnViewCountListener = mOnViewCountListener;
    }

    public interface OnViewCountListener{
        void viewCount(int count);
    }
}


2.ViewPager实现左右滑动

（1）viewPagerActivity

package com.example.navigationimgslide;

import java.util.ArrayList;
import java.util.List;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;

/**
 * @author zw
 * @deprecated viewpager的方式实现
 *
 */

public class ViewPagerActivity extends Activity {

  
	private ImageView imageView; 
	private ImageView[] imageViews;
	private ViewPager viewPager;
	private LinearLayout nvLayout;
	private List<ImageView> views;

	 private int[] str=new int[]{
	            R.drawable.image01,R.drawable.image02,
	            R.drawable.image03,R.drawable.image04};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_pager);
        initView();

    }

	private void initView() {
		viewPager = (ViewPager) findViewById(R.id.viewPager);
		nvLayout = (LinearLayout) findViewById(R.id.viewPager_linear);
		initData();
	}

	
	@SuppressLint("NewApi")
	private void initData() {
		imageViews=new ImageView[str.length];
		views=new ArrayList<ImageView>();
		ImageView imgV=null;
		
		for (int i = 0; i < str.length; i++) {
			
		    imgV=new ImageView(this);
		    imgV.setScaleType(ScaleType.FIT_XY);
		    imgV.setImageResource(str[i]);
			views.add(imgV);
			
			ImageView dainImg=new ImageView(this);
			if (i==0) {
				dainImg.setImageResource(R.drawable.page);
			}else{
				dainImg.setImageResource(R.drawable.page_now);
			}
			
			LayoutParams layoutParams = new LayoutParams(
					new LinearLayout.LayoutParams(20,    
							20));
			layoutParams.setMargins(10, 0, 10, 0);
			nvLayout.addView(dainImg, layoutParams);
		}
		
		//设置Adapter  
        viewPager.setAdapter(new MyPagerAdapter());  
        //设置监听，主要是设置点点的背景  
        viewPager.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int arg0) {
				// TODO Auto-generated method stub
				setImageBackground(arg0 % (str.length));
			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub
				
			}
		});  
       
	}
	
	/** 
     * 设置选中的的背景 
     * @param selectItems 
     */  
	private void setImageBackground(int i) {
		// TODO Auto-generated method stub
		ImageView imageView=null;
		for (int j = 0; j < str.length; j++) {
			imageView=(ImageView) nvLayout.getChildAt(j);
			if (i==j) {
				imageView.setImageResource(R.drawable.page);
			}else {
				imageView.setImageResource(R.drawable.page_now);
			}
		}
	}
	class MyPagerAdapter extends PagerAdapter {

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return views.size();
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			// TODO Auto-generated method stub
			return arg0 == arg1;
		}

		@Override
		public void destroyItem(View container, int position, Object object) {
			// TODO Auto-generated method stub
			((ViewPager) container).removeView(views.get(position));
		}

		/**
		 * 载入图片进去，用当前的position 除以 图片数组长度取余数是关键
		 */
		@Override
		public Object instantiateItem(View container, int position) {
			((ViewPager) container).addView(views.get(position));
			return views.get(position);
		}
	}
	
	
	
}

(2)activity_pager

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="240dp"
    >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="240dp"/>
    
    <LinearLayout
        android:id="@+id/viewPager_linear"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:gravity="center"
        android:background="#4ccc"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal" />

</RelativeLayout>

参考文献：http://blog.csdn.net/zhangjinhuang/article/details/26287959

                    http://blog.csdn.net/chunqiuwei/article/details/50547290


源码下载：http://download.csdn.net/download/zhang106209/9998696

       


zhang106209
关注
Android ViewPager图片滑动
Android开发-CXY的博客
03-07 1487
Android ViewPager图片滑动 首先展示效果图 Android ViewPager图片滑动代码演示步骤 1.实例化ViewPager 2.通过LayoutInflater加载布局，返回View结果 3.把生成的每一个View对象添加到List集合中 4.实例化适配器，传递View集合 5.在适配器中继承自PagerAdapter，实现内部的四个方法 getCou
Android开发之使用ViewPager实现图片左右滑动切换效果
09-01
主要介绍了Android开发之使用ViewPager实现图片左右滑动切换效果的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
使用ViewFlipper实现图片左右滑动效果
11-27
ViewFlipper，不妨把它看做一个容器吧，你可以把许多的View放在这个容器中，让它展示给用户，虽然它每次只展示一个view，我感觉它的用途更好是作为广告展示，比如类似购物网站那样的广告滚动展示。这个demo是一个手动滑动屏幕查看图片的粒子，共有10张图片，左右滑动可以查看图片，效果不是很好。其实用ViewPager会更好些。
android - 滑动效果之ViewFlipper与ViewPager与Gallery
weixin_34163741的博客
08-30 205
1、ViewFlipper 1）View切换的控件—ViewFlipper介绍 ViewFilpper类继承于ViewAnimator类。而ViewAnimator类继承于FrameLayout。 查看ViewAnimator类的源码可以看出此类的作用主要是为其中的View切换提供动画效果。该类有如下几个和动画相关的方法。 setInAnimation：设置View进入屏幕时候使用的动画。...
android ViewPager,ViewFlipper,ViewFlow实现左右滑动
he91-com
12-13 131
开篇 首页只是作为ViewPager，ViewFlipper，ViewFlow的入口，提供三个Button进行跳转。 1. ViewPager 先看看官方文档怎么介绍ViewPager的：http://developer.android.com/reference/android/support/v4/view/ViewPager.html 继承关系如下： java.la...
android之ViewFlipper实现左右滑动动画效果
fso918的专栏
03-13 884
说到android的左右滑动效果我们可以说是在每个应用上面都可以看到这样的效果，不管是微博，还是QQ等。实现左右滑动的方式很多，有ViewPaer(不过这个和需要android-support-v4.jar的支持)，自定义实现Viewgroup，gallery等都可以达到这种效果。这里做下ViewFliper实现左右滑动的效果。 以下会会用到的技术有： 1、ViewFlipper 2、G
ViewPager的详细介绍和图片滑动功能实例
会飞的鱼儿的博客
11-12 709
1、使用场景 在APP设计中，如果涉及到左右滑动功能，如：下方导航条、上方导航条、图片滑动、翻页能功能时，则可以直接使用ViewPager进行开发，ViewPager自带滑动和翻页效果，可以用ViewPager自身的adapter进行开发，要方便很多。 2、属性详解 ViewPager ViewPager 是负责翻页的一个 View。准确说是一个 ViewGroup，包含多个 View 页...
ViewPager和ViewFlipper实现图片左右滑动
09-27
对于“导航图片”的实现，可以将ViewPager或ViewFlipper与图片加载库（如Glide或Picasso）结合，加载网络或本地的图片资源。同时，为了提高性能，可以使用内存缓存和LruCache策略，避免频繁的IO操作。 总结，...
掌握Android视图切换技术：ViewPager与ViewFlipper结合使用
为了实现左右滑动切换效果，我们还需要使用PagerAdapter来适配数据源和视图的创建。ViewPager还可以通过设置Indicator（如TabLayout）来提供当前页面的指示器，增强用户体验。 2. ViewFlipper的使用方法： ...
安卓开发教程：ViewPager、ViewFlipper与ViewFlow详解
ViewPager是一个用于页面切换的视图控制器，它允许用户左右滑动切换页面，常见于引导页、图片浏览等场景。ViewPager通常和PagerAdapter一起使用，PagerAdapter负责提供页面数据和视图。在ViewPager中，我们可以定义...
安卓源码解析：ViewPager、ViewFlipper与ViewFlow应用教程
综上所述，ViewPager、ViewFlipper和ViewFlow都是实现Android界面滑动和切换效果的有用组件。开发者可以根据实际应用需求选择合适的组件来使用，通过对这些组件源码的研究，能够更好地理解它们的工作机制，并在实际...
PhotoView和ViewPager实现图片左右滑动和放大缩小功能
11-19
PhotoView和ViewPager实现图片左右滑动和放大缩小功能
Android使用ViewFlipper实现左右滑动效果面
12-04
Android使用ViewFlipper实现左右滑动效果面.
最简单的ViewFlipper实现图片跟随手势滑动
08-02
NULL 博文链接：https://zhonglunshun.iteye.com/blog/1972245
UI开发第八篇——ViewFlipper 左右滑动效果
07-03
UI开发第八篇——ViewFlipper 左右滑动效果UI开发第八篇——ViewFlipper 左右滑动效果
ViewFlipper左右滑动事件
github_33987023的博客
11-25 689
package com.wzc.ex03_27; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.MotionEvent; import android.view.Window; import android.view.WindowManager; imp
安卓 ViewPager加载大图 左右滑动
mawlAndroid的博客
05-27 282
ViewPager图片左右滑动 直接上代码吧： 1， private LinearLayout mLinearLayout; private ViewPager viewPager; private ImageView imageView;//显示数组图片的View private List<ImageView> imgsArray;//图片数组 private List<ImageView> diandianArray;//点数组 pr
【Android基础知识】使用ViewFlipper实现页面左右滑动
自由世界的专栏
07-11 2152
说到android的左右滑动效果我们可以说是在每个应用上面都可以看到这样的效果，不管是微博，还是QQ等。实现左右滑动的方式很多，有ViewPaer(不过这个和需要android-support-v4.jar的支持)，自定义实现Viewgroup，gallery等都可以达到这种效果。这里做下ViewFliper实现左右滑动的效果。 以下会会用到的技术有： 1、ViewFlipper 2、G
Android 实现ViewFlipper左右滑动效果
Li_Driver的博客
07-10 407
代码实现：package com.example.g160628_android_20_gesture;import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.GestureDetector; import android.view.MotionEvent; impo
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值