当前位置: 代码迷 >> Android >> Android ViewPager领航-平凡中有奇迹
  详细解决方案

Android ViewPager领航-平凡中有奇迹

热度:8   发布时间:2016-04-28 03:01:53.0
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>




  相关解决方案