android ViewPager詳解

Viewpager 在android界面布局中屬於常用類型 ，它可以做導航，頁面菜單，進入軟件是的歡迎界面 等等。比現在最流行的幾款手機軟件 ，QQ,微信，微博 等 ，其主界面 都用到了ViewPager，所以學好它，勢在必得 ，在這裡總結了下，

先用圖解 ：

這是一個仿微博界面的xml布局 ，他們之間的關系經常搞混淆，怕記不住 ，總結了幾句話：ViewPager裡面含界面，它的改變控制（title）Imageview的變化，Textview控制頁面，並間接控制Title（imageview）。

而要做一個完整的denon，其步驟如下：

1，在xml文件了定義Viewpager，和各種控件。<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+MqOs1Nq0+sLrwO+1w7W9uPfW1r/YvP6jrLKivfjQ0M/g06a1xMeztKbA7aGjPC9wPgo8cD4zo6zOqlZpZXdwYWdlcsno1sPKysXkxvejrLu509C84Mz9xvejrMbky/u/2Lz+0rLJ6NbDz+DTprXEvODM/cb3oaM8L3A+CjxwPiAgILzHwrzSu7j20KFkZW1vo7o8L3A+CjxwPiA8cHJlIGNsYXNzPQ=="brush:java;">package com.example.viewpagerdemo; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.graphics.BitmapFactory; import android.graphics.Matrix; import android.os.Bundle; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.util.DisplayMetrics; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.view.animation.Animation; import android.view.animation.TranslateAnimation; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.TextView; import android.widget.Toast; public class WeiBoActivity extends Activity { private ViewPager viewPager;//頁卡內容 private ImageView imageView;// 動畫圖片 private TextView textView1,textView2,textView3; private List views;// Tab頁面列表 private int offset = 0;// 動畫圖片偏移量 private int currIndex = 0;// 當前頁卡編號 private int bmpW;// 動畫圖片寬度 private View view1,view2,view3;//各個頁卡 @Override protected 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(); 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);// 設置動畫初始位置 } /** * * 頭標點擊監聽 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 mListViews; public MyViewPagerAdapter(List mListViews) { this.mListViews = mListViews; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(mListViews.get(position)); } @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(mListViews.get(position), 0); return mListViews.get(position); } @Override public int getCount() { return mListViews.size(); } @Override public 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(); } } } 它的布局文件：

效果如下：