当前位置: 代码迷 >> Android >> android(八) ViewPager页面滑动切换
  详细解决方案

android(八) ViewPager页面滑动切换

热度:297   发布时间:2016-04-28 00:47:44.0
android(8) ViewPager页面滑动切换

一.ViewPager页面滑动切换实现:

   借鉴了别人的源码,还是比较容易实现的,而且这种效果还是经常使用的,特此记录一下:

效果图:



主界面:

public class MainActivity extends Activity {	private ViewPager mPager;// 页卡内容	private List<View> listViews; // Tab页面列表	private ImageView cursor;// 动画图片	private TextView t1, t2, t3;// 页卡头标	private int offset = 0;// 动画图片偏移量	private int currIndex = 0;// 当前页卡编号	private int bmpW;// 动画图片宽度	@Override	public void onCreate(Bundle savedInstanceState) {		super.onCreate(savedInstanceState);		setContentView(R.layout.activity_tab_main);		InitImageView();		InitTextView();		InitViewPager();	}	// 初始选项	private void InitTextView() {		t1 = (TextView) findViewById(R.id.text1);		t2 = (TextView) findViewById(R.id.text2);		t3 = (TextView) findViewById(R.id.text3);		t1.setOnClickListener(new MyOnClickListener(0));		t2.setOnClickListener(new MyOnClickListener(1));		t3.setOnClickListener(new MyOnClickListener(2));	}	// 初始化ViewPager	private void InitViewPager() {		mPager = (ViewPager) findViewById(R.id.vPager);		listViews = new ArrayList<View>();		LayoutInflater mInflater = getLayoutInflater();		listViews.add(mInflater				.inflate(R.layout.activity_tab_one_pager, null));		listViews.add(mInflater				.inflate(R.layout.activity_tab_two_pager, null));		listViews.add(mInflater				.inflate(R.layout.activity_tab_three_pager, null));		mPager.setAdapter(new MyViewPagerAdapter(listViews, this));		//默认选中第一个页面		mPager.setCurrentItem(0);		mPager.setOnPageChangeListener(new MyOnPageChangeListener());	}	// 初始化动画	private void InitImageView() {		cursor = (ImageView) findViewById(R.id.cursor);		bmpW = BitmapFactory.decodeResource(getResources(),				R.drawable.icon_tab_page_bg).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);// 设置动画初始位置	}	// 页卡监听	public class MyOnClickListener implements View.OnClickListener {		private int index = 0;		public MyOnClickListener(int i) {			index = i;		}		public void onClick(View v) {			mPager.setCurrentItem(index);		}	};	// 滑动监听	public class MyOnPageChangeListener implements OnPageChangeListener {		int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量		int two = one * 2;// 页卡1 -> 页卡3 偏移量        //arg0表示页数		public void onPageSelected(int arg0) {			// TranslateAnimation位移动画			Animation animation = null;			//表示从第一个页卡跳转到当前页卡			switch (arg0) {			case 0:				if (currIndex == 1) {					animation = new TranslateAnimation(one, 0, 0, 0);				} else if (currIndex == 2) {					animation = new TranslateAnimation(two, 0, 0, 0);				}				break;			case 1:				if (currIndex == 0) {					animation = new TranslateAnimation(offset, one, 0, 0);				} else if (currIndex == 2) {					animation = new TranslateAnimation(two, one, 0, 0);				}				break;			case 2:				if (currIndex == 0) {					animation = new TranslateAnimation(offset, two, 0, 0);				} else if (currIndex == 1) {					animation = new TranslateAnimation(one, two, 0, 0);				}				break;			}			currIndex = arg0;			animation.setFillAfter(true);// true:表示图片停在动画结束位置			animation.setDuration(300);			cursor.startAnimation(animation);		}		public void onPageScrolled(int arg0, float arg1, int arg2) {		}		public void onPageScrollStateChanged(int arg0) {		}	}}

viewPager适配器:
public class MyViewPagerAdapter extends PagerAdapter {	private List<View> mListViews;	private Context context;	public MyViewPagerAdapter(List<View> mListViews, Context context) {		this.mListViews = mListViews;		this.context = context;	}	@Override	public void destroyItem(View arg0, int arg1, Object arg2) {		((ViewPager) arg0).removeView(mListViews.get(arg1));	}	@Override	public void finishUpdate(View arg0) {	}	@Override	public int getCount() {		return mListViews.size();	}	@Override	public Object instantiateItem(View arg0, int arg1) {		if (arg1 < 3) {			((ViewPager) arg0).addView(mListViews.get(arg1 ), 0);		}		// 页卡内点击事件		if (arg1 == 0) {			Button btn = (Button) arg0.findViewById(R.id.btn);			btn.setOnClickListener(new View.OnClickListener() {				public void onClick(View v) {					showDialog("1");				}			});		}		if (arg1 == 1) {			Button btn = (Button) arg0.findViewById(R.id.btn);			btn.setOnClickListener(new View.OnClickListener() {				public void onClick(View v) {					showDialog("2");				}			});		}		if (arg1 == 2) {			Button btn = (Button) arg0.findViewById(R.id.btn);			btn.setOnClickListener(new View.OnClickListener() {				public void onClick(View v) {					showDialog("3");				}			});		}		return mListViews.get(arg1);	}	public void showDialog(String arg) {		new AlertDialog.Builder(context).setTitle("说明")				.setMessage("这是第"+arg+"个页面")				.setNegativeButton("确定", new DialogInterface.OnClickListener() {					public void onClick(DialogInterface dialog, int which) {					}				}).show();	}	@Override	public boolean isViewFromObject(View arg0, Object arg1) {		return arg0 == (arg1);	}	@Override	public void restoreState(Parcelable arg0, ClassLoader arg1) {	}	@Override	public Parcelable saveState() {		return null;	}	@Override	public void startUpdate(View arg0) {	}}

xml:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:background="#FF969696"    android:orientation="vertical" >    <LinearLayout        android:id="@+id/linearLayout1"        android:layout_width="fill_parent"        android:layout_height="45dp"        android:background="#FFDFD7D7" >        <TextView            android:id="@+id/text1"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:gravity="center"            android:text="\n页卡1"            android:textColor="#000000" />        <TextView            android:id="@+id/text2"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:gravity="center"            android:text="\n页卡2"            android:textColor="#000000" />        <TextView            android:id="@+id/text3"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:gravity="center"            android:text="\n页卡3"            android:textColor="#000000" />    </LinearLayout>    <ImageView        android:id="@+id/cursor"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:scaleType="matrix"        android:src="@drawable/icon_tab_page_bg" />    <android.support.v4.view.ViewPager        android:id="@+id/vPager"        android:layout_width="wrap_content"        android:layout_height="fill_parent"        android:layout_gravity="center"        android:layout_weight="1"        android:background="#FFDFD7D7"        android:flipInterval="30"        android:persistentDrawingCache="animation" /></LinearLayout>

三个页面:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:background="#FFDFD7D7"    android:orientation="vertical" >        <Button        android:id="@+id/btn"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:gravity="center"        android:text="点击我" /></LinearLayout>

ok完成了。

  相关解决方案