安卓之ViewPager詳解_ViewPager怎麼用_ViewPager仿微博特效

首先,展示一下ViewPager是什麼樣子的,用過新浪微部落格戶端的應該對下面的畫面很熟悉,(畫面不是很美觀,主要就是那麼個意思,將就著看吧....)下面那個允許你來回滑動顯示不同頁面的地區就是一個ViewPager,在這裡就不解釋了.

布局檔案如下:

activity_weibo.xml

<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"><LinearLayout     android:id="@+id/ll"    android:layout_width="fill_parent"    android:layout_height="40dp"    android:background="#ffffff">    <TextView         android:id="@+id/tt1"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:layout_weight="1"        android:text="@string/tt1"        android:gravity="center"        android:textColor="#000000"        android:textSize="20dp"/>    <TextView         android:id="@+id/tt2"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:layout_weight="1"        android:text="@string/tt2"        android:textSize="20dp"        android:textColor="#000000"/>    <TextView android:id="@+id/tt3"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:layout_weight="1"        android:text="@string/tt3"        android:textSize="20dp"        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/image"/>   <android.support.v4.view.ViewPager       android:id="@+id/vPager"       android:layout_width="wrap_content"       android:layout_height="0dp"       android:layout_weight="1"       android:layout_gravity="center"       android:background="#000000"       android:flipInterval="30"       android:persistentDrawingCache="animation"       /></LinearLayout>

lay1.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <View         android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:background="#66FF33"/></LinearLayout>

lay2.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <View         android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:background="#FF3333"/></LinearLayout>

lay3.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <View         android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:background="#3300FF"/></LinearLayout>

 

下面是java代碼:

package jason.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.Display;import android.view.LayoutInflater;import android.view.Menu;import android.view.View;import android.view.ViewGroup;import android.view.View.OnClickListener;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;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<View> views;//頁面列表private int offset = 0;//遊標移動的位移量private int currentIndex = 0;//當前頁面號碼private int bmpW;//遊標寬度private View view1,view2,view3;//各個頁面卡片@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_weibo);InitImageView();InitTextView();InitViewPager();}private void InitViewPager() {// TODO Auto-generated method stubviewPager = (ViewPager) findViewById(R.id.vPager);views = new ArrayList<View>();LayoutInflater inflater = getLayoutInflater();//這個在我前面寫的幾篇裡面有介紹Inflaterview1 = 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跟ListView一樣,也需要一個適配器,後面對PagerAdapter進行重寫viewPager.setCurrentItem(0);//預設顯示第一個卡片頁viewPager.setOnPageChangeListener(new MyOnPageChangeListener());//給ViewPager加監聽器}private void InitTextView() {textView1 = (TextView) findViewById(R.id.tt1);textView2 = (TextView) findViewById(R.id.tt2);textView3 = (TextView) findViewById(R.id.tt3);textView1.setOnClickListener(new MyOnClickLis(0));textView2.setOnClickListener(new MyOnClickLis(1));textView3.setOnClickListener(new MyOnClickLis(2));//這些監聽器保證在點擊頭部的標籤時候頁面也能滑動}private void InitImageView() {imageView = (ImageView) findViewById(R.id.cursor);bmpW = imageView.getWidth();DisplayMetrics displayMetrics = new DisplayMetrics();getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);int screen = displayMetrics.widthPixels;offset = (screen - bmpW *3)/6;//這個地方就是給每個標籤左右各留出一塊offset,共3個標籤,6個offset,Matrix matrix = new Matrix();//後面我會再寫一篇簡要介紹Matrix的文章matrix.postTranslate(offset, 0);這個就是把遊標放在了第一個標籤下面imageView.setImageMatrix(matrix);}private class MyOnClickLis implements OnClickListener{private int index;public MyOnClickLis(int index) {//注意,這裡的監聽器有一個預設的帶參數的構造器,用來確定你點擊的是哪一個標籤this.index = index;}@Overridepublic void onClick(View v) {viewPager.setCurrentItem(index);}}//下面是比較重點的了,就是之前提到過的重寫PagerAdapter,重寫時候我們至少需要重寫一下4個方法,當然這裡我們也唯寫了這4個方法.public class MyViewPagerAdapter extends PagerAdapter{private List<View> mListView;public MyViewPagerAdapter(List<View> views) {// TODO Auto-generated constructor stubthis.mListView = views;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {// TODO Auto-generated method stubcontainer.removeView(mListView.get(position));}@Overridepublic Object instantiateItem(ViewGroup container, int position) {container.addView(mListView.get(position));return mListView.get(position);}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn mListView.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {// TODO Auto-generated method stubreturn arg0 == arg1;}}public class MyOnPageChangeListener implements OnPageChangeListener{int one = offset *2 + bmpW;//卡片1 --> 卡片2 位移量int two = one * 2;//卡片2 --> 卡片3 位移量@Overridepublic void onPageScrollStateChanged(int arg0) {//arg0 ==1的時候表示正在滑動，arg0==2的時候表示滑動完畢了，arg0==0的時候表示什麼都沒做，就是停在那。}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {     //表示在前一個頁面滑動到後一個頁面的時候，在前一個頁面滑動前調用的方法 }@Overridepublic void onPageSelected(int arg0) {//arg0是表示你當前選中的頁面Animation animation = new TranslateAnimation(one*currentIndex, one * arg0, 0, 0);currentIndex = arg0;animation.setFillAfter(true);//true:圖片停留在動畫結束的位置animation.setDuration(300);imageView.startAnimation(animation);Toast.makeText(WeiboActivity.this, "卡片移向了第" + arg0 + "頁", Toast.LENGTH_SHORT).show();}}}