Android ViewPager导航------平凡中有奇迹

ViewPager做导航想不想有这样的效果:

比如说有四张图片,下面有四个圆点,当页面滑动的时候一个点变大一个点变小(或者是一个点变小一个点变大),等于说同时在执行两个动画。

技术分享

package com.example.day_2014_10_17_viewpager;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.LinkedHashMap;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.widget.ImageView;

import com.nineoldandroids.view.ViewHelper;
import com.panpass.adapter.MyViewPagerAdapter;
import com.panpass.view.MyViewPager;
import com.panpass.view.MyViewPager.DiyPageScrollListener;

public class MainActivity extends Activity {

	private Context mContext = this;
	private MyViewPager mViewPager;
	private ImageView imageView1, imageView2, imageView3, imageView4;
	private ArrayList<ImageView> mList;
	private HashMap<Integer, ImageView> mHashMap = new LinkedHashMap<Integer, ImageView>();
	private static final float SCALE_MAX = 0.55f;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mList = new ArrayList<ImageView>();
		ImageView img = new ImageView(mContext);
		img.setBackgroundResource(R.drawable.guide_page1);
		mList.add(img);
		img = new ImageView(mContext);
		img.setBackgroundResource(R.drawable.guide_page2);
		mList.add(img);
		img = new ImageView(mContext);
		img.setBackgroundResource(R.drawable.guide_page3);
		mList.add(img);
		img = new ImageView(mContext);
		img.setBackgroundResource(R.drawable.guide_page4);
		mList.add(img);
		mViewPager = (MyViewPager) findViewById(R.id.view_pager);
		mViewPager.setAdapter(new MyViewPagerAdapter(mList));

		imageView1 = (ImageView) findViewById(R.id.imageView1);
		imageView2 = (ImageView) findViewById(R.id.imageView2);
		imageView3 = (ImageView) findViewById(R.id.imageView3);
		imageView4 = (ImageView) findViewById(R.id.imageView4);
		ViewHelper.setScaleX(imageView2, SCALE_MAX);
		ViewHelper.setScaleY(imageView2, SCALE_MAX);
		ViewHelper.setScaleX(imageView3, SCALE_MAX);
		ViewHelper.setScaleY(imageView3, SCALE_MAX);
		ViewHelper.setScaleX(imageView4, SCALE_MAX);
		ViewHelper.setScaleY(imageView4, SCALE_MAX);

		mHashMap.put(0, imageView1);
		mHashMap.put(1, imageView2);
		mHashMap.put(2, imageView3);
		mHashMap.put(3, imageView4);
		mViewPager.setDiyOnPageScrollListener(new DiyPageScrollListener() {

			@Override
			public void diyOnPageScrollListener(int position,
					float positionOffset, int positionOffsetPixels,
					boolean left, boolean right) {

				// 获取左边的View
				ImageView mLeftImg = mHashMap.get(position);
				// 获取右边的View
				ImageView mRightImg = mHashMap.get(position + 1);
				// 判断滑动的方向
				float mScaleRight;
				float mScaleLeft;
				/**
				 * 注意事件: 1 注意你要很灵敏的判断ViewPager的切换方向是很难的,对于要求很高的应用来说是做不到了。 2
				 * 不管是向左滑动还是向右滑动,他们有的都是同一种算法
				 */

				if (mRightImg != null) {
					/**
					 * 缩小比例 如果手指从右到左的滑动(切换到后一个):0.0~1.0,即从一半到最大
					 * 如果手指从左到右的滑动(切换到前一个):1.0~0,即从最大到一半
					 */
					mScaleRight = (1-SCALE_MAX) * positionOffset + SCALE_MAX;
					/**
					 * x偏移量: 如果手指从右到左的滑动(切换到后一个):0-720 如果手指从左到右的滑动(切换到前一个):720-0
					 */
					ViewHelper.setScaleX(mRightImg, mScaleRight);
					ViewHelper.setScaleY(mRightImg, mScaleRight);
				}
				if (mLeftImg != null) {

					mScaleLeft = (1-SCALE_MAX) * (1 - positionOffset) + SCALE_MAX;
					/**
					 * x偏移量: 如果手指从右到左的滑动(切换到后一个):0-720 如果手指从左到右的滑动(切换到前一个):720-0
					 */
					ViewHelper.setScaleX(mLeftImg, mScaleLeft);
					ViewHelper.setScaleY(mLeftImg, mScaleLeft);

				}

			}
		});

	}
}


package com.panpass.adapter;

import java.util.ArrayList;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class MyViewPagerAdapter extends PagerAdapter {


	private ArrayList<ImageView> imgList;
	
	public MyViewPagerAdapter(ArrayList<ImageView> imgList) {
		super();
		this.imgList = imgList;
	}

	@Override
	public int getCount() {
		return imgList.size();
	}

	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		
		ImageView img = imgList.get(position);
		container.addView(img);
		return img;
	}
	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		
		container.removeView((ImageView)object);
		
	}
	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {
		return arg0 == (View)arg1;
	}

}


package com.panpass.view;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;

public class MyViewPager extends ViewPager {

	private boolean left = false;  
	private boolean right = false;  
	private boolean isScrolling = false; 
	
	private int lastValue = -1;  
	private ChangeViewCallback changeViewCallback = null;  

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

	public MyViewPager(Context context) {  
		super(context);  
		init();  
	}  

	private DiyPageScrollListener listener1;

	public interface DiyPageScrollListener{

		void diyOnPageScrollListener(int position, float positionOffset,  
				int positionOffsetPixels,boolean left,boolean right);
	}

	public void setDiyOnPageScrollListener(DiyPageScrollListener listener){

		this.listener1 = listener;
	}
	@Override
	protected void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
		listener1.diyOnPageScrollListener(position, positionOffset, positionOffsetPixels,left,right);
		super.onPageScrolled(position, positionOffset, positionOffsetPixels);
	}

	/** 
	 * init method . 
	 */  
	private void init() {  
//		setOnPageChangeListener(listener);  
	}  

	/** 
	 * listener ,to get move direction . 
	 */  
	public  OnPageChangeListener listener = new OnPageChangeListener() {  
		@Override  
		public void onPageScrollStateChanged(int arg0) {  
			if (arg0 == 1) {  
				isScrolling = true;  
			} else {  
				isScrolling = false;  
			}  

			if (arg0 == 2) {  
			
				if(changeViewCallback!=null){  
					changeViewCallback.changeView(left, right);  
				}  
				right = left = false;  
			}  

		}  

		@Override  
		public void onPageScrolled(int arg0, float arg1, int arg2) {  
			if (isScrolling) {  
				if (lastValue > arg2) {  
					// 递减,向右侧滑动  
					right = true;  
					left = false;  
				} else if (lastValue < arg2) {  
					// 递减,向右侧滑动  
					right = false;  
					left = true;  
				} else if (lastValue == arg2) {  
					right = left = false;  
				}  
			}  
			lastValue = arg2;  
		}  

		@Override  
		public void onPageSelected(int arg0) {  
			if(changeViewCallback!=null){  
				changeViewCallback.getCurrentPageIndex(arg0);  
			}  
		}  
	};  

	/** 
	 * 得到是否向右侧滑动 
	 * @return true 为右滑动 
	 */  
	public boolean getMoveRight(){  
		return right;  
	}  

	/** 
	 * 得到是否向左侧滑动 
	 * @return true 为左做滑动 
	 */  
	public boolean getMoveLeft(){  
		return left;  
	}  

	/** 
	 *  滑动状态改变回调 
	 * @author zxy 
	 * 
	 */  
	public interface ChangeViewCallback{  
		public  void changeView(boolean left,boolean right);  
		public  void  getCurrentPageIndex(int index);  
	}  

	public void  setChangeViewCallback(ChangeViewCallback callback){  
		changeViewCallback = callback;  
	}  


}

<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" >

    <com.panpass.view.MyViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="50dp"
        android:gravity="center" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/banner_circle_big" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:src="@drawable/banner_circle_big" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:src="@drawable/banner_circle_big" />

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:src="@drawable/banner_circle_big" />
    </LinearLayout>

</RelativeLayout>




郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。