一、简介
ViewPager包含在Support v4包中，继承自ViewGroup，能非常方便的实现页面的左右滑动，需要配合Adapter来使用。
官方说明：
Layout manager that allows the user to flip left and right through pages of data. You supply an implementation of a PagerAdapter to generate the pages that the view shows.
ViewPager is most often used in conjunction with Fragment, which is a convenient way to supply and manage the lifecycle of each page.There are standard adapters implemented for using fragments with the ViewPager, which cover the most common use cases. These are FragmentPagerAdapter and FragmentStatePagerAdapter; each of these classes have simple code showing how to build a full user interface with them.
推荐使用Fragment来管理页面的的生命周期，这样会让管理更加方便。
二、通过PagerAdapter来管理页面
PagerAdapter中必须要实现的几个函数：
- instantiateItem (ViewGroup container, int position) 在指定的位置创建页面
- destroyItem(ViewGroup, int, Object) 销毁条目
- getCount() 获取条目数量
- isViewFromObject(View, Object) 判断页面是否跟指定的key对象关联，key对象由instantiateItem(ViewGroup, int)返回。一般
return arg0 == arg1。
示例一、图片的滑动切换效果
页面布局：
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" ><android.support.v4.view.ViewPagerandroid:id="@+id/viewPager"android:layout_width="fill_parent"android:layout_height="wrap_content" /><RelativeLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:orientation="vertical" ><LinearLayout <!--图片下的小圆点-->android:id="@+id/viewGroup"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_marginBottom="30dp"android:gravity="center_horizontal"android:orientation="horizontal" ></LinearLayout></RelativeLayout></FrameLayout>
主Activity：
public class MainActivity extends Activity implements OnPageChangeListener{private ViewPager viewPager;private ImageView[] tips;private ImageView[] mImageViews;private int[] imgIdArray ;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);ViewGroup group = (ViewGroup)findViewById(R.id.viewGroup);viewPager = (ViewPager) findViewById(R.id.viewPager);//载入图片资源IDimgIdArray = new int[]{R.drawable.item01, R.drawable.item02, R.drawable.item03, R.drawable.item04,R.drawable.item05,R.drawable.item06, R.drawable.item07, R.drawable.item08};//将点点加入到ViewGroup中tips = new ImageView[imgIdArray.length];for(int i=0; i<tips.length; i++){ImageView imageView = new ImageView(this);imageView.setLayoutParams(new LayoutParams(10,10));tips[i] = imageView;if(i == 0){tips[i].setBackgroundResource(R.drawable.page_indicator_focused);}else{tips[i].setBackgroundResource(R.drawable.page_indicator_unfocused);}group.addView(imageView);}//将图片装载到数组中mImageViews = new ImageView[imgIdArray.length];for(int i=0; i<mImageViews.length; i++){ImageView imageView = new ImageView(this);mImageViews[i] = imageView;imageView.setBackgroundResource(imgIdArray[i]);}//设置AdapterviewPager.setAdapter(new MyAdapter());//设置监听，主要是设置点点的背景viewPager.setOnPageChangeListener(this);//设置ViewPager的默认项, 设置为长度的100倍，这样子开始就能往左滑动viewPager.setCurrentItem((mImageViews.length) * 100);}public class MyAdapter extends PagerAdapter{@Overridepublic int getCount() {return Integer.MAX_VALUE;}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic void destroyItem(View container, int position, Object object) {((ViewPager)container).removeView(mImageViews[position % mImageViews.length]);}/*** 载入图片进去，用当前的position 除以 图片数组长度取余数是关键*/@Overridepublic Object instantiateItem(View container, int position) {((ViewPager)container).addView(mImageViews[position % mImageViews.length], 0);return mImageViews[position % mImageViews.length];}}@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageSelected(int arg0) {setImageBackground(arg0 % mImageViews.length);}/*** 设置选中的tip的背景* @param selectItems*/private void setImageBackground(int selectItems){for(int i=0; i<tips.length; i++){if(i == selectItems){tips[i].setBackgroundResource(R.drawable.page_indicator_focused);}else{tips[i].setBackgroundResource(R.drawable.page_indicator_unfocused);}}}}
示例二、App引导界面制作
利用SharedPreference判断是否第一次打开App。
public class SplashActivity extends Activity {boolean isFirstIn = false;private static final int GO_HOME = 1000;private static final int GO_GUIDE = 1001;private static final long SPLASH_DELAY_MILLIS = 3000;private static final String SHAREDPREFERENCES_NAME = "first_pref";private Handler mHandler = new Handler() {@Overridepublic void handleMessage(Message msg) {switch (msg.what) {case GO_HOME:goHome();break;case GO_GUIDE:goGuide();break;}super.handleMessage(msg);}};@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.splash);init();}private void init() {// 读取SharedPreferences中需要的数据// 使用SharedPreferences来记录程序的使用次数SharedPreferences preferences = getSharedPreferences(SHAREDPREFERENCES_NAME, MODE_PRIVATE);// 取得相应的值，如果没有该值，说明还未写入，用true作为默认值isFirstIn = preferences.getBoolean("isFirstIn", true);// 判断程序与第几次运行，如果是第一次运行则跳转到引导界面，否则跳转到主界面if (!isFirstIn) {// 使用Handler的postDelayed方法，3秒后执行跳转到MainActivitymHandler.sendEmptyMessageDelayed(GO_HOME, SPLASH_DELAY_MILLIS);} else {mHandler.sendEmptyMessageDelayed(GO_GUIDE, SPLASH_DELAY_MILLIS);}}private void goHome() {Intent intent = new Intent(SplashActivity.this, MainActivity.class);SplashActivity.this.startActivity(intent);SplashActivity.this.finish();}private void goGuide() {Intent intent = new Intent(SplashActivity.this, GuideActivity.class);SplashActivity.this.startActivity(intent);SplashActivity.this.finish();}}
引导界面
public class GuideActivity extends Activity implements OnPageChangeListener {private ViewPager vp;private ViewPagerAdapter vpAdapter;private List<View> views;private ImageView[] dots; // 底部小点图片private int currentIndex; // 记录当前选中位置@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.guide);initViews(); // 初始化页面initDots(); // 初始化底部小点}private void initViews() {LayoutInflater inflater = LayoutInflater.from(this);views = new ArrayList<View>();// 初始化引导图片列表views.add(inflater.inflate(R.layout.what_new_one, null));views.add(inflater.inflate(R.layout.what_new_two, null));views.add(inflater.inflate(R.layout.what_new_three, null));views.add(inflater.inflate(R.layout.what_new_four, null));vpAdapter = new ViewPagerAdapter(views, this);vp = (ViewPager) findViewById(R.id.viewpager);vp.setAdapter(vpAdapter);vp.setOnPageChangeListener(this);}private void initDots() {LinearLayout ll = (LinearLayout) findViewById(R.id.ll);dots = new ImageView[views.size()];// 循环取得小点图片for (int i = 0; i < views.size(); i++) {dots[i] = (ImageView) ll.getChildAt(i);dots[i].setEnabled(true);// 都设为灰色}currentIndex = 0;dots[currentIndex].setEnabled(false);// 设置为白色，即选中状态}private void setCurrentDot(int position) {if (position < 0 || position > views.size() - 1|| currentIndex == position) {return;}dots[position].setEnabled(false);dots[currentIndex].setEnabled(true);currentIndex = position;}// 当滑动状态改变时调用@Overridepublic void onPageScrollStateChanged(int arg0) {}// 当当前页面被滑动时调用@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}// 当新的页面被选中时调用@Overridepublic void onPageSelected(int arg0) {// 设置底部小点选中状态setCurrentDot(arg0);}}
ViewPager.java
public class ViewPagerAdapter extends PagerAdapter {// 界面列表private List<View> views;private Activity activity;private static final String SHAREDPREFERENCES_NAME = "first_pref";public ViewPagerAdapter(List<View> views, Activity activity) {this.views = views;this.activity = activity;}// 销毁arg1位置的界面@Overridepublic void destroyItem(View arg0, int arg1, Object arg2) {((ViewPager) arg0).removeView(views.get(arg1));}@Overridepublic void finishUpdate(View arg0) {}// 获得当前界面数@Overridepublic int getCount() {if (views != null) {return views.size();}return 0;}// 初始化arg1位置的界面@Overridepublic Object instantiateItem(View arg0, int arg1) {((ViewPager) arg0).addView(views.get(arg1), 0);if (arg1 == views.size() - 1) {ImageView mStartWeiboImageButton = (ImageView) arg0.findViewById(R.id.iv_start_weibo);mStartWeiboImageButton.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// 设置已经引导setGuided();goHome();}});}return views.get(arg1);}private void goHome() {// 跳转Intent intent = new Intent(activity, MainActivity.class);activity.startActivity(intent);activity.finish();}/**** method desc：设置已经引导过了，下次启动不用再次引导*/private void setGuided() {SharedPreferences preferences = activity.getSharedPreferences(SHAREDPREFERENCES_NAME, Context.MODE_PRIVATE);Editor editor = preferences.edit();// 存入数据editor.putBoolean("isFirstIn", false);// 提交修改editor.commit();}// 判断是否由对象生成界面@Overridepublic boolean isViewFromObject(View arg0, Object arg1) { return (arg0 == arg1);}@Overridepublic void restoreState(Parcelable arg0, ClassLoader arg1) {}@Overridepublic Parcelable saveState() {return null;}@Overridepublic void startUpdate(View arg0) {}}
示例三、导航效果实现
主Activity:
public class WeiBoActivity extends Activity {private ViewPager viewPager;//页卡内容private ImageView imageView;// 动画图片private TextView textView1,textView2,textView3;private List<View> views;// Tab页面列表private int offset = 0;// 动画图片偏移量private int currIndex = 0;// 当前页卡编号private int bmpW;// 动画图片宽度private View view1,view2,view3;//各个页卡@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.weibo);InitImageView();InitTextView();InitViewPager();}private void InitViewPager() {viewPager=(ViewPager) findViewById(R.id.vPager);views=new ArrayList<View>();LayoutInflater inflater=getLayoutInflater();view1=inflater.inflate(R.layout.lay1, null);view2=inflater.inflate(R.layout.lay2, null);view3=inflater.inflate(R.layout.lay3, null);views.add(view1);views.add(view2);views.add(view3);viewPager.setAdapter(new MyViewPagerAdapter(views));viewPager.setCurrentItem(0);viewPager.setOnPageChangeListener(new MyOnPageChangeListener());}/*** 初始化头标*/private void InitTextView() {textView1 = (TextView) findViewById(R.id.text1);textView2 = (TextView) findViewById(R.id.text2);textView3 = (TextView) findViewById(R.id.text3);textView1.setOnClickListener(new MyOnClickListener(0));textView2.setOnClickListener(new MyOnClickListener(1));textView3.setOnClickListener(new MyOnClickListener(2));}/**2 * 初始化动画，这个就是页卡滑动时，下面的横线也滑动的效果，在这里需要计算一些数据3 */private void InitImageView() {imageView= (ImageView) findViewById(R.id.cursor);bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.a).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);imageView.setImageMatrix(matrix);// 设置动画初始位置}<img src="https://img-my.csdn.net/uploads/201211/10/1352554452_1685.jpg" alt="">/**** 头标点击监听 3 */private class MyOnClickListener implements OnClickListener{private int index=0;public MyOnClickListener(int i){index=i;}public void onClick(View v) {viewPager.setCurrentItem(index);}}public class MyViewPagerAdapter extends PagerAdapter{private List<View> mListViews;public MyViewPagerAdapter(List<View> mListViews) {this.mListViews = mListViews;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(mListViews.get(position));}@Overridepublic Object instantiateItem(ViewGroup container, int position) {container.addView(mListViews.get(position), 0);return mListViews.get(position);}@Overridepublic int getCount() {return mListViews.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0==arg1;}}public class MyOnPageChangeListener implements OnPageChangeListener{int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量int two = one * 2;// 页卡1 -> 页卡3 偏移量public void onPageScrollStateChanged(int arg0) {}public void onPageScrolled(int arg0, float arg1, int arg2) { }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;}*/Animation animation = new TranslateAnimation(one*currIndex, one*arg0, 0, 0);//显然这个比较简洁，只有一行代码。currIndex = arg0;animation.setFillAfter(true);// True:图片停在动画结束位置animation.setDuration(300);imageView.startAnimation(animation);Toast.makeText(WeiBoActivity.this, "您选择了"+ viewPager.getCurrentItem()+"页卡", Toast.LENGTH_SHORT).show();}}}
布局文件：
<?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" ><LinearLayoutandroid:id="@+id/linearLayout1"android:layout_width="fill_parent"android:layout_height="40.0dip"android:background="#FFFFFF" ><TextViewandroid:id="@+id/text1"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="1.0"android:gravity="center"android:text=" @我"android:textColor="#000000"android:textSize="20.0dip" /><TextViewandroid:id="@+id/text2"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="1.0"android:gravity="center"android:text="评论"android:textColor="#000000"android:textSize="20.0dip" /><TextViewandroid:id="@+id/text3"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="1.0"android:gravity="center"android:text="私信"android:textColor="#000000"android:textSize="20.0dip" /></LinearLayout><ImageViewandroid:id="@+id/cursor"android:layout_width="fill_parent"android:layout_height="wrap_content"android:scaleType="matrix"android:src="@drawable/a" /><android.support.v4.view.ViewPagerandroid:id="@+id/vPager"android:layout_width="wrap_content"android:layout_height="0dp"android:layout_gravity="center"android:layout_weight="1.0"android:background="#000000"android:flipInterval="30"android:persistentDrawingCache="animation" /></LinearLayout>
三、ViewPager与FragmentPagerAdapter
当你实现一个FragmentPagerAdapter,你必须至少覆盖以下方法:
- getCount()
- getItem()
示例：利用ViewPager+Fragment实现导航
布局文件：
<?xml version="1.0" encoding="utf-8"?><LinearLayout 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"android:orientation="vertical"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><TextViewandroid:id="@+id/tv_guid1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1.0"android:gravity="center"android:text="特性1"android:textSize="18sp"/><TextViewandroid:id="@+id/tv_guid2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1.0"android:gravity="center"android:text="特性2"android:textSize="18sp"/><TextViewandroid:id="@+id/tv_guid3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1.0"android:gravity="center"android:text="特性3 "android:textSize="18sp"/><TextViewandroid:id="@+id/tv_guid4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1.0"android:gravity="center"android:text="特性4"android:textSize="18sp"/></LinearLayout><ImageViewandroid:id="@+id/cursor"android:layout_width="wrap_content"android:layout_height="wrap_content"android:scaleType="matrix"android:src="@drawable/cursor"/><android.support.v4.view.ViewPagerandroid:id="@+id/viewpager"android:layout_width="fill_parent"android:layout_height="fill_parent"android:flipInterval="30"android:persistentDrawingCache="animation"/></LinearLayout>
主Activity：
public class MainActivity extends FragmentActivity {private ViewPager mPager;private ArrayList<Fragment> fragmentList;private FragmentPagerAdapter mAdapter;private ImageView image;private TextView view1, view2, view3, view4;private int currIndex;//当前页卡编号private int bmpW;//横线图片宽度private int offset;//图片移动的偏移量@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);InitTextView();InitImage();InitViewPager();}/** 初始化标签名*/public void InitTextView(){view1 = (TextView)findViewById(R.id.tv_guid1);view2 = (TextView)findViewById(R.id.tv_guid2);view3 = (TextView)findViewById(R.id.tv_guid3);view4 = (TextView)findViewById(R.id.tv_guid4);view1.setOnClickListener(new txListener(0));view2.setOnClickListener(new txListener(1));view3.setOnClickListener(new txListener(2));view4.setOnClickListener(new txListener(3));}public class txListener implements View.OnClickListener{private int index=0;public txListener(int i) {index =i;}@Overridepublic void onClick(View v) {mPager.setCurrentItem(index);}}/** 初始化图片的位移像素*/public void InitImage(){image = (ImageView)findViewById(R.id.cursor);bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.cursor).getWidth();DisplayMetrics dm = new DisplayMetrics();getWindowManager().getDefaultDisplay().getMetrics(dm);int screenW = dm.widthPixels;offset = (screenW/4 - bmpW)/2;//imgageview设置平移，使下划线平移到初始位置（平移一个offset）Matrix matrix = new Matrix();matrix.postTranslate(offset, 0);image.setImageMatrix(matrix);}/** 初始化ViewPager*/public void InitViewPager(){mPager = (ViewPager)findViewById(R.id.viewpager);fragmentList = new ArrayList<Fragment>();Fragment btFragment= new ButtonFragment();Fragment secondFragment = TestFragment.newInstance("this is second fragment");Fragment thirdFragment = TestFragment.newInstance("this is third fragment");Fragment fourthFragment = TestFragment.newInstance("this is fourth fragment");fragmentList.add(btFragment);fragmentList.add(secondFragment);fragmentList.add(thirdFragment);fragmentList.add(fourthFragment);mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()){@Overridepublic int getCount(){return fragmentList.size();}@Overridepublic Fragment getItem(int arg0){return fragmentList.get(arg0);}};mPager.setAdapter(mAdapter);mPager.setCurrentItem(0);//设置当前显示标签页为第一页mPager.setOnPageChangeListener(new MyOnPageChangeListener());//页面变化时的监听器}public class MyOnPageChangeListener implements OnPageChangeListener{private int one = offset *2 +bmpW;//两个相邻页面的偏移量@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageSelected(int arg0) {// TODO Auto-generated method stubAnimation animation = new TranslateAnimation(currIndex*one,arg0*one,0,0);//平移动画currIndex = arg0;animation.setFillAfter(true);//动画终止时停留在最后一帧，不然会回到没有执行前的状态animation.setDuration(200);//动画持续时间0.2秒image.startAnimation(animation);//是用ImageView来显示动画的int i = currIndex + 1;Toast.makeText(MainActivity.this, "您选择了第"+i+"个页卡", Toast.LENGTH_SHORT).show();}}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.main, menu);return true;}}
ButtonFragment.java
public class ButtonFragment extends Fragment{Button myButton;@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {View rootView = inflater.inflate(R.layout.guide_1, container, false);//关联布局文件myButton = (Button)rootView.findViewById(R.id.mybutton);//根据rootView找到buttonmyButton.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubToast.makeText(ButtonFragment.this.getActivity(), "button is click!", Toast.LENGTH_SHORT).show();}});return rootView;}}
TestFragment.java
public class TestFragment extends Fragment {private static final String TAG = "TestFragment";private String hello;// = "hello android";private String defaultHello = "default value";static TestFragment newInstance(String s) {TestFragment newFragment = new TestFragment();Bundle bundle = new Bundle();bundle.putString("hello", s);newFragment.setArguments(bundle);return newFragment;}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {Log.d(TAG, "TestFragment-----onCreateView");Bundle args = getArguments();hello = args != null ? args.getString("hello") : defaultHello;View view = inflater.inflate(R.layout.guide_2, container, false);TextView viewhello = (TextView) view.findViewById(R.id.tv);viewhello.setText(hello);return view;}}
布局：
<?xml version="1.0" encoding="UTF-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="#ff0000ff" ><Buttonandroid:id="@+id/mybutton"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="hit me"android:gravity="center"/></RelativeLayout>
布局文件：
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical"android:background="#158684" ><TextViewandroid:id="@+id/tv"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="TextView" /></RelativeLayout>
扫一扫
632
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
