当前位置: 代码迷 >> Android >> android ViewPager控件的使用
  详细解决方案

android ViewPager控件的使用

热度:33   发布时间:2016-05-01 20:48:23.0
【原创】android ViewPager控件的使用
android4.0有个控件,就是viewpager,用来实现左右滑动效果的。我们具体来看看是如何使用的。
首先看一下效果图

3个tab,每个tab有个layout,滑动的时候指示滑动条跟着走(当然,我觉得这个滑动条可以用三张图片来实现,更简单点)。
具体的我们看代码吧,主页xml就是实现上面三个tabbar,滑动条和一个viewpager控件,如下:
<?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:orientation="vertical" >    <LinearLayout        android:id="@+id/linearLayout1"        android:layout_width="fill_parent"        android:layout_height="100.0dip"        android:background="#FFFFFF" >        <TextView            android:id="@+id/text1"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_weight="1.0"            android:gravity="center"            android:text="页卡1"            android:textColor="#000000"            android:textSize="22.0dip" />        <TextView            android:id="@+id/text2"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_weight="1.0"            android:gravity="center"            android:text="页卡2"            android:textColor="#000000"            android:textSize="22.0dip" />        <TextView            android:id="@+id/text3"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_weight="1.0"            android:gravity="center"            android:text="页卡3"            android:textColor="#000000"            android:textSize="22.0dip" />    </LinearLayout>    <ImageView        android:id="@+id/cursor"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:scaleType="matrix"        android:src="@drawable/slide" />    <android.support.v4.view.ViewPager        android:id="@+id/vPager"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:layout_weight="1.0"        android:background="#000000"        android:flipInterval="30"        android:persistentDrawingCache="animation" /></LinearLayout>


然后主要是看代码里面怎么用的,viewpager需要一个adapter来适配里面的每个layout。
public class ViewPageDemoActivity 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;// 动画图片宽度	MyPagerAdapter adapter;	LayoutInflater mInflater;	/** Called when the activity is first created. */	@Override	public void onCreate(Bundle savedInstanceState) {		super.onCreate(savedInstanceState);		setContentView(R.layout.main);		Log.i("Viewpage","--onCreate--");		initImageView();		initTextView();		initPageView();			}	private void initPageView() {		mInflater = getLayoutInflater();		listViews = new ArrayList<View>();		listViews.add(mInflater.inflate(R.layout.item1, null));		listViews.add(mInflater.inflate(R.layout.item2, null));		listViews.add(mInflater.inflate(R.layout.item3, null));		adapter = new MyPagerAdapter(listViews);		mPager = (ViewPager) findViewById(R.id.vPager);		mPager.setAdapter(adapter);		mPager.setCurrentItem(0);		mPager.setOnPageChangeListener(new MyOnPageChangeListener());	}	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));	}	private void initImageView() {		cursor = (ImageView) findViewById(R.id.cursor);		bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.slide)				.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);// 设置动画初始位置	}	private class MyOnClickListener implements View.OnClickListener {		private int index = 0;		public MyOnClickListener(int i) {			index = i;		}		@Override		public void onClick(View v) {			// TODO Auto-generated method stub			mPager.setCurrentItem(index);		}	}	public class MyPagerAdapter extends PagerAdapter {		public List<View> mListViews;		public MyPagerAdapter(List<View> mListViews) {			this.mListViews = mListViews;		}		public void destroyItem(View arg0, int arg1, Object arg2) {			((ViewPager) arg0).removeView(mListViews.get(arg1));		}		public void finishUpdate(View arg0) {		}		@Override		public int getCount() {			return mListViews.size();		}		@Override		public Object instantiateItem(View arg0, int arg1) {			((ViewPager) arg0).addView(mListViews.get(arg1), 0);			return mListViews.get(arg1);		}		@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) {		}	}	public class MyOnPageChangeListener implements OnPageChangeListener {		int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量		int two = one * 2;// 页卡1 -> 页卡3 偏移量		@Override		public void onPageSelected(int arg0) {			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);		}		@Override		public void onPageScrolled(int arg0, float arg1, int arg2) {		}		@Override		public void onPageScrollStateChanged(int arg0) {		}	}}

当然,你需要为每个tab对应一个layout,就想上面的item1,item2,item3一样。
这样就能实现左右滑动的一个效果了。

顺便说一下,viewpager刚开始推出,还没加入到正式的sdk,需要一个额外的jar包,运行工程的时候导入一下jar包就好了。
源码见附件。
  相关解决方案