Android多屏滑動:ViewPager自訂小圓圈標籤 仿app初次運行時的導航

上文說了多屏滑動基礎用法，遺留標籤頁的問題。縱觀App的滑屏體驗，標籤頁無非有三種:一種是每個View對應一個小圓圈，當前View對應的小圓圈顏色和其他不一樣。但是所有View的標籤在同一時刻都是可見的。如下兩張圖片所示,這也是本文的效果:

第二種：標籤頁是類似QQ和，只有當前View下有線性標識。其他View麼有。效果如下:

第三種：跟第二種類似，但是沒有標籤頁，整個下面的線時同一個顏色，標籤就是個RaditoButton來作標識，如下所示：

本文介紹第一種效果，類似app第一次安裝後運行顯示的導航頁。這種ViewPager的標籤頁實現如下

1、在ViewPager的母布局中，放ImageView來標識，有幾個View就對應放幾個ImageView。如果希望標籤在ViewPager的布局上，母布局就用幀布局。希望標識在View的下方就用其他布局，或者寫死View的高度.本例中的布局：

activity_main.xml

<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"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context=".MainActivity" >    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_centerInParent="true" >    </android.support.v4.view.ViewPager>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignBottom="@id/viewpager"        android:orientation="horizontal" >        <ImageView            android:id="@+id/page_icon_1"            android:layout_width="20dip"            android:layout_height="20dip"            android:layout_weight="1"            android:src="@drawable/page_icon" />        <ImageView            android:id="@+id/page_icon_2"            android:layout_width="20dip"            android:layout_height="20dip"            android:layout_weight="1"            android:src="@drawable/page_icon" />        <ImageView            android:id="@+id/page_icon_3"            android:layout_width="20dip"            android:layout_height="20dip"            android:layout_weight="1"            android:src="@drawable/page_icon" />    </LinearLayout></RelativeLayout>

2、在Java檔案裡，給ViewPager設定監聽setOnPageChangeListener的onPageSelected(),在View切換時顯示動畫,下面貼出MainActivity.java的全部代碼:

package org.yanzi.testviewpager1;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.content.Context;import android.os.Bundle;import android.support.v4.view.PagerTabStrip;import android.support.v4.view.PagerTitleStrip;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.LayoutInflater;import android.view.Menu;import android.view.View;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;import android.widget.Button;import android.widget.ImageView;import android.widget.Toast;public class MainActivity extends Activity {List<View> mViews = new ArrayList<View>();String[] mTitles = {"頁面1", "頁面2", "頁面3"};MyPagerAdapter pagerAdapter;PagerTabStrip pagerTabStrip;PagerTitleStrip pagerTitleStrip;ViewPager viewPager;View view1, view2, view3;Button btn1, btn2, btn3;ImageView img1, img2, img3;BtnListener btnListener;private int currIndex = -1;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initUI();initPageIcon();LayoutInflater flater = (LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);view1 = flater.inflate(R.layout.first_pager_layout, null);view2 = flater.inflate(R.layout.second_pager_layout, null);view3 = flater.inflate(R.layout.third_pager_layout, null);mViews.add(view1);mViews.add(view2);mViews.add(view3);pagerAdapter = new MyPagerAdapter(mViews, mTitles);viewPager.setAdapter(pagerAdapter);initBtns();viewPager.setCurrentItem(1);currIndex = 1;img2.setImageResource(R.drawable.page_selected);/*//設定pagerTabStrippagerTabStrip.setTabIndicatorColor(Color.RED);pagerTabStrip.setTextColor(Color.RED);pagerTabStrip.setClickable(false);pagerTabStrip.setTextSpacing(40);pagerTabStrip.setBackgroundColor(Color.GRAY);pagerTabStrip.setDrawFullUnderline(true);*///ViewPager滑動監聽viewPager.setOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageSelected(int arg0) {// TODO Auto-generated method stubAnimation anim = null;switch(arg0){case 0:img1.setImageResource(R.drawable.page_selected);img2.setImageResource(R.drawable.page_icon);if(currIndex == (arg0 + 1)){anim = new TranslateAnimation(arg0 + 1, arg0, 0, 0);}break;case 1:img2.setImageResource(R.drawable.page_selected);img1.setImageResource(R.drawable.page_icon);img3.setImageResource(R.drawable.page_icon);if(arg0 == (currIndex + 1)){anim = new TranslateAnimation(arg0 - 1, arg0, 0, 0);}else if(arg0 == (currIndex - 1)){anim = new TranslateAnimation(arg0 + 1, arg0, 0, 0);}break;case 2:img3.setImageResource(R.drawable.page_selected);img2.setImageResource(R.drawable.page_icon);if(arg0 == (currIndex + 1)){anim = new TranslateAnimation(arg0 - 1, arg0, 0, 0);}break;default:break;}currIndex = arg0;anim.setFillAfter(true);anim.setDuration(300);showToast("切換至:" + mTitles[arg0]);}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}@Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}});}@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;}private void initUI(){viewPager = (ViewPager)findViewById(R.id.viewpager);//pagerTabStrip = (PagerTabStrip)findViewById(R.id.pagertab);}private void initBtns(){if(view1 != null){btn1 = (Button)view1.findViewById(R.id.btn_in_first);}if(view2 != null){btn2 = (Button)view2.findViewById(R.id.btn_in_second);}if(view3 != null){btn3 = (Button)view3.findViewById(R.id.btn_in_third);}btnListener = new BtnListener();btn1.setOnClickListener(btnListener);btn2.setOnClickListener(btnListener);btn3.setOnClickListener(btnListener);}class BtnListener implements View.OnClickListener{@Overridepublic void onClick(View v) {// TODO Auto-generated method stubswitch (v.getId()){case R.id.btn_in_first:showToast("您點擊了第一個介面");break;case R.id.btn_in_second:showToast("您點擊了第2個介面");break;case R.id.btn_in_third:showToast("您點擊了第3個介面");break;default:break;}}}private void showToast(String s){Toast.makeText(getApplicationContext(), s, Toast.LENGTH_SHORT).show();}private void initPageIcon(){img1 = (ImageView)findViewById(R.id.page_icon_1);img2 = (ImageView)findViewById(R.id.page_icon_2);img3 = (ImageView)findViewById(R.id.page_icon_3);}}

在initPageIcon()函數裡執行個體化3個ImageView，然後再onCreate()裡設定預設顯示ViewPager的中間的View:

viewPager.setCurrentItem(1);
currIndex = 1;
img2.setImageResource(R.drawable.page_selected);

接著就是滑動監聽,在這裡改變標籤:

@Overridepublic void onPageSelected(int arg0) {// TODO Auto-generated method stubAnimation anim = null;switch(arg0){case 0:img1.setImageResource(R.drawable.page_selected);img2.setImageResource(R.drawable.page_icon);if(arg0 == (currIndex- 1)){anim = new TranslateAnimation(arg0 + 1, arg0, 0, 0);}break;case 1:img2.setImageResource(R.drawable.page_selected);img1.setImageResource(R.drawable.page_icon);img3.setImageResource(R.drawable.page_icon);if(arg0 == (currIndex + 1)){anim = new TranslateAnimation(arg0 - 1, arg0, 0, 0);}else if(arg0 == (currIndex - 1)){anim = new TranslateAnimation(arg0 + 1, arg0, 0, 0);}break;case 2:img3.setImageResource(R.drawable.page_selected);img2.setImageResource(R.drawable.page_icon);if(arg0 == (currIndex + 1)){anim = new TranslateAnimation(arg0 - 1, arg0, 0, 0);}break;default:break;}currIndex = arg0;anim.setFillAfter(true);anim.setDuration(300);showToast("切換至:" + mTitles[arg0]);}

       因為三個ImageView在xml都寫成預設狀態，而currIndex標識切換view前的標籤頁，arg0表示當前頁。以從中間View切換到左邊為例，當arg0 = currIndex - 1,就表示從右滑動到了左，anim = new TranslateAnimation(arg0 + 1, arg0, 0, 0);如果切換到的View左右都有View則要設定它左右的view標籤到自然態，更多可以參考這個仿導航的文章.

TranslateAnimation是一個移位動畫，其實這裡不用動畫直接ImageView改變也是可以的，不知道為啥上面那個仿的連結裡為啥用動畫。。這裡是代碼的方式啟動一個動畫，可以參考 連結1 連結2 。這塊比較奇怪的是沒有調用startAnimation()這個方法，難道anim.setFillAfter(true)？設定下就ok了嗎？？？ 待改日仔細研究下動畫再給答案。