android ViewPager 例子

標籤：android   viewpager   

今天用到viewpager，要實現多view動畫切換。自己動手做了一個。

先上，只是很簡單的例子。

步驟：1、在main布局檔案裡添加viewPager布局

<RelativeLayout 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"    >    <LinearLayout        android:id="@+id/top_ly"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal" >        <TextView             android:id="@+id/textView1"            android:layout_weight="1"            android:layout_width="wrap_content"            android:layout_height="50dp"            android:background="#999999"            android:gravity="center"            android:text="頁面1"            android:textColor="#222222"            />        <TextView             android:id="@+id/textView2"            android:layout_weight="1"            android:layout_width="wrap_content"            android:layout_height="50dp"            android:background="#999999"            android:gravity="center"            android:text="頁面2"            android:textColor="#222222"            />        <TextView            android:id="@+id/textView3"            android:layout_weight="1"            android:layout_width="wrap_content"            android:layout_height="50dp"            android:background="#999999"            android:gravity="center"            android:text="頁面3"            android:textColor="#222222"            />    </LinearLayout>        <ImageView         android:id="@+id/cursor"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@id/top_ly"        android:scaleType="matrix"        android:src="@drawable/cursor"        />        <android.support.v4.view.ViewPager        android:id="@+id/viewPager"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_below="@id/cursor"        android:layout_gravity="center"        />    </RelativeLayout>

（可能需要匯入jar包。：android-support-v4.jar）

再建立3個layout用於填充在ViewPager。我這裡就是一個textview而已。

2、viewPager需要一個pagerAdapter的子類。

package com.away.viewpager;import java.util.List;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.View;public class ViewPagerAdapter extends PagerAdapter {List<View> viewLists;        public ViewPagerAdapter(List<View> lists)    {        viewLists = lists;    }    //獲得size    @Override    public int getCount() {         return viewLists.size();    }    @Override    public boolean isViewFromObject(View arg0, Object arg1) {                                 return arg0 == arg1;    }        //銷毀Item    @Override    public void destroyItem(View view, int position, Object object)    {        ((ViewPager) view).removeView(viewLists.get(position));    }        //執行個體化Item    @Override    public Object instantiateItem(View view, int position)    {        ((ViewPager) view).addView(viewLists.get(position), 0);        return viewLists.get(position);    }}

3、最後mainActivity，主要寫了左右滑動切換頁面，還有一個小圖片隨頁面切換位移的動畫效果。

package com.away.viewpager;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Matrix;import android.os.Bundle;import android.support.v4.view.ViewPager;import android.util.DisplayMetrics;import android.view.Menu;import android.view.View;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;import android.widget.ImageView;import android.widget.TextView;public class MainActivity extends Activity {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 TextView textView1;private TextView textView2;private TextView textView3;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);imageView = (ImageView) findViewById(R.id.cursor);textView1 = (TextView) findViewById(R.id.textView1);textView2 = (TextView) findViewById(R.id.textView2);textView3 = (TextView) findViewById(R.id.textView3);lists.add(getLayoutInflater().inflate(R.layout.layout1, null));lists.add(getLayoutInflater().inflate(R.layout.layout2, null));lists.add(getLayoutInflater().inflate(R.layout.layout3, null));initeCursor();adapter = new ViewPagerAdapter(lists);viewPager = (ViewPager) findViewById(R.id.viewPager);viewPager.setAdapter(adapter);viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {// 當滑動式，頂部的imageView是通過animation緩慢的滑動@Overridepublic void onPageSelected(int arg0) {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;case 2:if (currentItem == 0) {animation = new TranslateAnimation(0, 4 * offSet + 2* bmWidth, 0, 0);} else if (currentItem == 1) {animation = new TranslateAnimation(offSet * 2 + bmWidth, 4 * offSet + 2 * bmWidth,0, 0);}}currentItem = arg0;animation.setDuration(150); // 游標滑動速度animation.setFillAfter(true);imageView.startAnimation(animation);}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}});textView1.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View arg0) {viewPager.setCurrentItem(0);}});textView2.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View arg0) {viewPager.setCurrentItem(1);}});textView3.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View arg0) {viewPager.setCurrentItem(2);}});}private void initeCursor() {cursor = BitmapFactory.decodeResource(getResources(), R.drawable.cursor);bmWidth = cursor.getWidth();DisplayMetrics dm;dm = getResources().getDisplayMetrics();offSet = (dm.widthPixels - 3 * bmWidth) / 6;matrix.setTranslate(offSet, 0);imageView.setImageMatrix(matrix); // 需要iamgeView的scaleType為matrixcurrentItem = 0;}@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;}}

最後附上游標圖。

android ViewPager 例子