ViewPager的使用方法和實現過程

看圖先：

? ? ? ??

頁面中填充內容是隨機關鍵詞飛入和飛出動畫效果，隨后會更新，現在請先無視吧

首先是導入jar包 ? 下載地址：?android-support-v4.jar

布局文件里添加viewPager布局

[html] view plaincopyprint?

<android.support.v4.view.ViewPager??
????android:id="@+id/search_viewpager"??
????android:layout_width="wrap_content"??
????android:layout_height="wrap_content"??
????android:layout_gravity="center"?>??
</android.support.v4.view.ViewPager>??

再創建兩個item布局用于填充在ViewPager里

然后就是Activity了，主要寫了左右滑動切換頁面，還有一個小圖片隨頁面切換位移的動畫效果

[java] view plaincopyprint?

public?class?SearchAllcityActivity?extends?Activity?{??
??
????private?KeywordsFlow?keywordsFlow;??
????private?ViewPager?viewPager;??
????private?ImageView?imageView;??
????private?List<View>?lists?=?new?ArrayList<View>();??
????private?ViewPagerAdapter?adapter;??
????private?Bitmap?cursor;??
????private?int?offSet;??
????private?int?currentItem;??
????private?Matrix?matrix?=?new?Matrix();??
????private?int?bmWidth;??
????private?Animation?animation;??
????private?Button?shuaxin_sq,?shuaxin_fl;??
??
????public?void?onCreate(Bundle?savedInstanceState)?{??
????????super.onCreate(savedInstanceState);??
????????setContentView(R.layout.search_allcity);??
??
????????//?隨頁面滑動圖片 ??
????????imageView?=?(ImageView)?findViewById(R.id.viewpaget_img);??
????????//?熱門商圈和熱門分類?頁面添加到viewPager集合 ??
????????lists.add(getLayoutInflater().inflate(R.layout.search_hot_shangqu,?null));??
????????lists.add(getLayoutInflater().inflate(R.layout.search_hot_fenlei,?null));??
????????//?初始化滑動圖片位置 ??
????????initeCursor();??
????????adapter?=?new?ViewPagerAdapter(lists);??
????????viewPager?=?(ViewPager)?findViewById(R.id.search_viewpager);??
????????viewPager.setAdapter(adapter);??
????????//?ViewPager滑動監聽器 ??
????????viewPager.setOnPageChangeListener(new?ViewPager.OnPageChangeListener()?{??
??????????????
????????????@Override??
????????????public?void?onPageSelected(int?arg0)?{??
????????????????//?TODO?Auto-generated?method?stub ??
????????????????//?當滑動時，頂部的imageView是通過animation緩慢的滑動 ??
????????????????switch?(arg0)?{??
????????????????case?0:??
????????????????????if?(currentItem?==?1)?{??
????????????????????????animation?=?new?TranslateAnimation(offSet?*?2?+?bmWidth,?0,?0,0);??
????????????????????}?else?if?(currentItem?==?2)?{??
????????????????????????animation?=?new?TranslateAnimation(offSet?*?4?+?2?*?bmWidth,?0,0,?0);??
????????????????????}??
??????????????????????
????????????????????break;??
????????????????case?1:??
????????????????????if?(currentItem?==?0)?{??
????????????????????????animation?=?new?TranslateAnimation(0,?offSet?*?2?+?bmWidth,?0,0);??
????????????????????}?else?if?(currentItem?==?2)?{??
????????????????????????animation?=?new?TranslateAnimation(4?*?offSet?+?2?*?bmWidth,offSet?*?2?+?bmWidth,?0,?0);??
????????????????????}??
??????????????????????
??????????????????????
????????????????????break;??
????????????????}??
????????????????currentItem?=?arg0;??
????????????????animation.setDuration(500);??
????????????????animation.setFillAfter(true);??
????????????????imageView.startAnimation(animation);??
??
????????????}??
??????????????
????????????@Override??
????????????public?void?onPageScrolled(int?arg0,?float?arg1,?int?arg2)?{??
????????????????//?TODO?Auto-generated?method?stub ??
??????????????????
????????????}??
??????????????
????????????@Override??
????????????public?void?onPageScrollStateChanged(int?arg0)?{??
????????????????//?TODO?Auto-generated?method?stub ??
??????????????????
????????????}??
????????});??
??????????
????}??
??
??????
????/**?
?????*?計算滑動的圖片的位置?
?????*/??
????private?void?initeCursor()?{??
????????cursor?=?BitmapFactory.decodeResource(getResources(),R.drawable.viewpager_img);??
????????bmWidth?=?cursor.getWidth();??
????????DisplayMetrics?dm;??
????????dm?=?getResources().getDisplayMetrics();??
????????offSet?=?(dm.widthPixels?-?2?*?bmWidth)?/?4;??
????????matrix.setTranslate(offSet,?0);??
????????imageView.setImageMatrix(matrix);?//?需要iamgeView的scaleType為matrix ??
????????currentItem?=?0;??
????}??
??
}??

public class SearchAllcityActivity extends Activity {private KeywordsFlow keywordsFlow;private ViewPager viewPager;private ImageView imageView;private List<View> lists = new ArrayList<View>();private ViewPagerAdapter adapter;private Bitmap cursor;private int offSet;private int currentItem;private Matrix matrix = new Matrix();private int bmWidth;private Animation animation;private Button shuaxin_sq, shuaxin_fl;public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.search_allcity);// 隨頁面滑動圖片imageView = (ImageView) findViewById(R.id.viewpaget_img);// 熱門商圈和熱門分類 頁面添加到viewPager集合lists.add(getLayoutInflater().inflate(R.layout.search_hot_shangqu, null));lists.add(getLayoutInflater().inflate(R.layout.search_hot_fenlei, null));// 初始化滑動圖片位置initeCursor();adapter = new ViewPagerAdapter(lists);viewPager = (ViewPager) findViewById(R.id.search_viewpager);viewPager.setAdapter(adapter);// ViewPager滑動監聽器viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {@Overridepublic void onPageSelected(int arg0) {// TODO Auto-generated method stub// 當滑動時，頂部的imageView是通過animation緩慢的滑動switch (arg0) {case 0:if (currentItem == 1) {animation = new TranslateAnimation(offSet * 2 + bmWidth, 0, 0,0);} else if (currentItem == 2) {animation = new TranslateAnimation(offSet * 4 + 2 * bmWidth, 0,0, 0);}break;case 1:if (currentItem == 0) {animation = new TranslateAnimation(0, offSet * 2 + bmWidth, 0,0);} else if (currentItem == 2) {animation = new TranslateAnimation(4 * offSet + 2 * bmWidth,offSet * 2 + bmWidth, 0, 0);}break;}currentItem = arg0;animation.setDuration(500);animation.setFillAfter(true);imageView.startAnimation(animation);}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}@Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}});}/*** 計算滑動的圖片的位置*/private void initeCursor() {cursor = BitmapFactory.decodeResource(getResources(),R.drawable.viewpager_img);bmWidth = cursor.getWidth();DisplayMetrics dm;dm = getResources().getDisplayMetrics();offSet = (dm.widthPixels - 2 * bmWidth) / 4;matrix.setTranslate(offSet, 0);imageView.setImageMatrix(matrix); // 需要iamgeView的scaleType為matrixcurrentItem = 0;}}

最后，不能忘了ViewPager的Adapter

[java] view plaincopyprint?

public?class?ViewPagerAdapter?extends?PagerAdapter{??
??
????List<View>?viewLists;??
??????
????public?ViewPagerAdapter(List<View>?lists)??
????{??
????????viewLists?=?lists;??
????}??
??
????@Override??
????public?int?getCount()?{?????????????????????????????????????????????????????????????????//獲得size ??
????????//?TODO?Auto-generated?method?stub ??
????????return?viewLists.size();??
????}??
??
????@Override??
????public?boolean?isViewFromObject(View?arg0,?Object?arg1)?{???????????????????????????
????????//?TODO?Auto-generated?method?stub ??
????????return?arg0?==?arg1;??
????}??
??????
????@Override??
????public?void?destroyItem(View?view,?int?position,?Object?object)???????????????????????//銷毀Item ??
????{??
????????((ViewPager)?view).removeView(viewLists.get(position));??
????}??
??????
????@Override??
????public?Object?instantiateItem(View?view,?int?position)????????????????????????????????//實例化Item ??
????{??
????????((ViewPager)?view).addView(viewLists.get(position),?0);??
??????????
????????return?viewLists.get(position);??
????}??
??????
}??