ViewPager多页面滑动效果

太过爱你忘了你带给我的痛 2022-08-07 14:59 211阅读 0赞

参考文档：[点击打开链接][Link 1]

基于上篇文档，主要增加了页头和滑动图片：

代码：

package com.test.guideactivity;
    
    import java.util.ArrayList;
    
    import android.app.Activity;
    import android.graphics.BitmapFactory;
    import android.graphics.Matrix;
    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.util.DisplayMetrics;
    import android.util.Log;
    import android.view.LayoutInflater;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.view.View;
    import android.view.View.OnClickListener;
    import android.view.ViewGroup;
    import android.view.animation.Animation;
    import android.view.animation.TranslateAnimation;
    import android.widget.ImageView;
    import android.widget.LinearLayout;
    import android.widget.TextView;
    
    public class MainActivity extends Activity implements OnPageChangeListener {
    	private ViewPager viewPager;
    	private ViewPagerAdapter adapter;
    	private TextView textView1;
    	private TextView textView2;
    	private TextView textView3;
    	//滑动头图片
    	private ImageView cursor;
    	
    	//当前选项卡
    	private int currentIndex;
    	//偏移量
    	private int offset;
    	private int bmpW;// 动画图片宽度
    	private ArrayList<View> list;
    	private ImageView[] dots;
    	private LinearLayout linear;
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_main);
    		initViews();
    		initDot();
    		initImage();
    	}
    	
    	
    	private void initViews(){
    		viewPager = (ViewPager) this.findViewById(R.id.viewpager);
    		linear = (LinearLayout) this.findViewById(R.id.linearlayout);
    		textView1 = (TextView) this.findViewById(R.id.text1);
    		textView2 = (TextView) this.findViewById(R.id.text2);
    		textView3 = (TextView) this.findViewById(R.id.text3);
    		//设置三个标签的监听事件
    		textView1.setOnClickListener(new MyClickListener(0));
    		textView2.setOnClickListener(new MyClickListener(1));
    		textView3.setOnClickListener(new MyClickListener(2));
    		//构造显示的对象
    		LayoutInflater inflater = LayoutInflater.from(this);
    		list = new ArrayList<View>();
    		list.add(inflater.inflate(R.layout.guide1, null));
    		list.add(inflater.inflate(R.layout.guide2, null));
    		list.add(inflater.inflate(R.layout.guide3, null));
    		adapter = new ViewPagerAdapter(list);
    		//绑定显示的数据
    		viewPager.setAdapter(adapter);
    		//设定监听器，当滑动时候进行处理点点的改变
    		viewPager.setOnPageChangeListener(this);
    	}
    	
    	private void initDot(){
    		if(linear == null){
    			Log.e("LinearLayout", "linear == null");
    			return;
    		}
    		dots = new ImageView[list.size()];
    		for(int i=0;i<list.size();i++){
    			dots[i] = (ImageView) linear.getChildAt(i);
    			//首先初始化，全部设为不可用时
    			dots[i].setEnabled(false);
    		}
    		//设置当前第一个可用
    		currentIndex = 0;
    		dots[currentIndex].setEnabled(true);
    	}
    	//计算偏移量
    	private void initImage(){
    		cursor = (ImageView) this.findViewById(R.id.cursor);
    		//获取图片的宽度
    		bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.blue_line).getWidth();
    		DisplayMetrics dm = new DisplayMetrics();
    		getWindowManager().getDefaultDisplay().getMetrics(dm);
    		int screenW = dm.widthPixels;
    		offset = (screenW / 3 - bmpW) / 2;
    		Matrix matrix = new Matrix();
    		matrix.postTranslate(offset, 0);
    		cursor.setImageMatrix(matrix);
    	}
    	
    	//实现OnClickListner接口
    	class MyClickListener implements OnClickListener{
    		private int index = 0;
    		public MyClickListener(int index) {
    			this.index = index;
    		}
    		@Override
    		public void onClick(View v) {
    			if(viewPager != null){
    				viewPager.setCurrentItem(index);
    			}
    		}
    		
    	}
    	
    	/**
    	 * ViewPager的构造器，继承PagerAdapter
    	 * @author dsw
    	 *
    	 */
    	class ViewPagerAdapter extends PagerAdapter{
    		private ArrayList<View> views;
    		
    		public ViewPagerAdapter(ArrayList<View> views){
    			this.views = views;
    		}
    		
    		@Override
    		public int getCount() {
    			return views == null ? 0 :views.size();
    		}
    
    		@Override
    		public boolean isViewFromObject(View arg0, Object arg1) {
    			return arg0 == arg1;
    		}
    
    		@Override
    		public void destroyItem(ViewGroup container, int position, Object object) {
    			if(views != null){
    				container.removeView(views.get(position));
    			}
    		}
    
    		@Override
    		public Object instantiateItem(ViewGroup container, int position) {
    			if(views != null){
    				container.addView(views.get(position));
    				return views.get(position);
    			}
    			return super.instantiateItem(container, position);
    		}
    		
    		
    	}
    	
    	
    	@Override
    	public void onPageScrollStateChanged(int arg0) {
    		// 页面状态改变的时候
    		Log.v("onPageScrollStateChanged", "arg0:" + arg0);
    		
    	}
    
    
    	@Override
    	public void onPageScrolled(int arg0, float arg1, int arg2) {
    		// 页面滑动的时候
    		Log.v("onPageScrolled", "arg0:" + arg0 + "arg1:" + arg1 + "arg2:" + arg2 );
    		
    	}
    
    
    	@Override
    	public void onPageSelected(int arg0) {
    		// 当页面选中的时候
    		Log.v("onPageSelected", "arg0:" + arg0);
    		if (arg0 < 0 || arg0 > list.size() - 1
    				|| currentIndex == arg0)
    		{
    			return;
    		}
    		int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量
    		int two = one * 2;			// 页卡1 -> 页卡3 偏移量
    		//设置图片的切换,通过平移动画
    		Animation anim = null;
    		/*  这个方法比较麻烦
    		switch(arg0){
    		case 0:
    			if(currentIndex == 1){
    				anim = new TranslateAnimation(one,0,0,0);
    			}else if(currentIndex == 2){
    				anim = new TranslateAnimation(two, 0, 0, 0);
    			}
    			break;
    		case 1:
    			if(currentIndex == 0){
    				anim = new TranslateAnimation(offset, one, 0, 0);
    			}else if(currentIndex == 2){
    				anim = new TranslateAnimation(two, one, 0, 0);
    			}
    			break;
    		 case 2:
    			 if (currentIndex == 0) {
    				 anim = new TranslateAnimation(offset, two, 0, 0);
    			 } else if (currentIndex == 1) {
    				 anim = new TranslateAnimation(one, two, 0, 0);
    			 }
    			  break;
    		}
    		*/
    		anim = new TranslateAnimation(one*currentIndex, one*arg0, 0, 0);
    		dots[arg0].setEnabled(true);  //设置选中可用
    		dots[currentIndex].setEnabled(false);	//设置上一个不可用
    		anim.setFillAfter(true);// True:图片停在动画结束位置
    		anim.setDuration(300);
    		cursor.startAnimation(anim);
    		currentIndex= arg0;
    	}
    }

源码：[点击打开链接][Link 2]

![Center][]

[Link 1]: http://www.cnblogs.com/dwinter/archive/2012/02/27/AndroidViewPager%E5%A4%9A%E9%A1%B5%E9%9D%A2%E6%BB%91%E5%8A%A8%E5%88%87%E6%8D%A2%E4%BB%A5%E5%8F%8A%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C.html
[Link 2]: http://download.csdn.net/detail/anlidengshiwei/8604253
[Center]: /images/20220805/60643f4f451e4515af405d61bf578956.png