【Android UI】案例03滑動轉場效果的實現(ViewPager)

標籤：android   介面設計   滑動   viewpager   

       本例使用ViewPager實現滑動切換的效果。本例涉及的ViewPager，為android.support.v4.view.ViewPager。所以需要在android項目中匯入android-support-v4.jar。
       本例中ViewPager是實現滑動效果的核心部分。對其設定PageChangeListener監聽事件，是實現滑動效果的核心思路。

【轉載使用，請註明出處：http://blog.csdn.net/mahoking】
       首先是主介面layout.xml檔案，activity_03_viewpager.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" >    <LinearLayout android:layout_width="match_parent"        android:layout_height="40dp"        android:orientation="horizontal">        <TextView android:layout_height="match_parent"            android:layout_width="match_parent"            android:layout_weight="1"            android:gravity="center"            android:text="選項卡01"            android:id="@+id/activity_03_viewpager_textview_01"/>        <TextView android:layout_height="match_parent"            android:layout_width="match_parent"            android:layout_weight="1"            android:text="選項卡02"            android:gravity="center"            android:id="@+id/activity_03_viewpager_textview_02"/>        <TextView android:layout_height="match_parent"            android:layout_width="match_parent"            android:layout_weight="1"            android:gravity="center"            android:text="選項卡03"            android:id="@+id/activity_03_viewpager_textview_03"/>    </LinearLayout><ImageView        android:id="@+id/cursor"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:scaleType="matrix"        android:src="@drawable/example03_cursor" /><android.support.v4.view.ViewPager        android:id="@+id/activity_03_viewpager_vPager"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:layout_weight="1.0"        android:background="#000000"        android:flipInterval="30"        android:persistentDrawingCache="animation" /></LinearLayout>

       以上需要一個ImageView組件，該組件實現一種動態移動標籤的效果，讀者可以自行選擇喜歡的標籤下的底部長方形圖片。可參考效果。
      主Activity(ViewPagerActivity)的編寫。首先是全域變數的定義：

private ViewPager mPager;// 頁卡內容private List<View> listViews; // Tab頁面列表private ImageView cursor;// 動畫圖片private TextView t1, t2, t3;// 頁卡頭標private int offset = 0;// 動畫圖片位移量private int currIndex = 0;// 當前頁卡編號private int bmpW;// 動畫圖片寬度

         本例提供了三個初始化布局空間的方法，分別為：initTextViews()、initImageView()、initViewPager()。

initTextViews()

private void initTextViews() {t1 = (TextView) findViewById(R.id.activity_03_viewpager_textview_01);t2 = (TextView) findViewById(R.id.activity_03_viewpager_textview_02);t3 = (TextView) findViewById(R.id.activity_03_viewpager_textview_03);t1.setOnClickListener(new MyOnClickListener(0));t2.setOnClickListener(new MyOnClickListener(1));t3.setOnClickListener(new MyOnClickListener(2));}

initImageView()

private void initViewPager() {mPager = (ViewPager) findViewById(R.id.activity_03_viewpager_vPager);listViews = new ArrayList<View>();LayoutInflater mInflater = getLayoutInflater();listViews.add(mInflater.inflate(R.layout.layout_03_layout01, null));listViews.add(mInflater.inflate(R.layout.layout_03_layout02, null));listViews.add(mInflater.inflate(R.layout.layout_03_layout03, null));mPager.setAdapter(new ViewPagerAdapter(listViews));mPager.setCurrentItem(0);mPager.setOnPageChangeListener(new MyOnPageChangeListener());}

 

initViewPager()

/** * 初始化動畫 */private void initImageView() {cursor = (ImageView) findViewById(R.id.cursor);bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.example03_cursor).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);cursor.setImageMatrix(matrix);// 設定動畫初始位置}

        有上述方法可見，本例需要兩內部類MyOnClickListener、MyOnPageChangeListener，去處理監聽事件。
MyOnClickListener

/** * 點擊監聽事件 * */public class MyOnClickListener implements View.OnClickListener {private int index = 0;public MyOnClickListener(int i) {index = i;}@Overridepublic void onClick(View v) {mPager.setCurrentItem(index);}};

MyOnPageChangeListener

/** *  *頁卡切換監聽 */public class MyOnPageChangeListener implements OnPageChangeListener{ int one = offset * 2 + bmpW;// 頁卡1 -> 頁卡2 位移量       int two = one * 2;// 頁卡1 -> 頁卡3 位移量        @Override         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;            }             currIndex = arg0;             animation.setFillAfter(true);// True:圖片停在動畫結束位置            animation.setDuration(300);             cursor.startAnimation(animation);         }         @Override        public void onPageScrolled(int arg0, float arg1, int arg2) {         }          @Override        public void onPageScrollStateChanged(int arg0) {        }}

         在此補充一下，本例需要展示三個頁卡，所以還需要三個頁卡內容的介面設計，在這裡我們只設定了背景顏色，只為起到區別作用。

layout_03_layout01.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"     android:background="#FF6666">    </LinearLayout>

效果：

 

【轉載使用，請註明出處：http://blog.csdn.net/mahoking】

 

【Android UI】案例03滑動轉場效果的實現(ViewPager)