這兩天有徹底的玩了一遍ViewPageIndicator，網上有的博主的部落格很好。但是我覺得如果使用了一個框架缺什麼都不留下。下次又會重新來學習。這次記錄一次詳細的部落格。以備後用。

1.   下載

下載後有兩個工程：

Library是第三方庫，sample是簡單的演示工程。能夠看到各種樣式的效果。最好都匯入eclipse，注意在匯入的時候copy到工作空間。

2.   使用

執行sample後選擇自己想要的樣式。我覺得這些樣式可以分成三種：分別是簡單指示，文字tab提示，圖片提示。將逐個記錄。

樣式1）簡單提示

 這種樣式就是最簡單的用一下圓點，短線提示滑動的型別。像：

1.

2.

3

4.

這些提示就基本是用最簡單的幾何提示來提示滑動頁數。非常使用用了做歡迎介面或是app展示的介面。

使用的時候重點是理清各個之間的呼叫關係。

以第一種圓點提示為例：

1》佈局

<LinearLayoutxmlns: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"
    tools:context=".MainActivity"xmlns:app="http://schemas.android.com/apk/res/com.example.testpagerview">
   
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />
   
    <com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:radius="10dp"
        app:pageColor="@android:color/darker_gray"
        app:fillColor="@android:color/holo_blue_light"
        app:strokeColor="#FFAA0000"
        app:strokeWidth="4dp"
        
        />
 
</LinearLayout>
 

基本都是這種上下佈局，上面是v4包中的viewPager，下面是要使用的Indicator，注意選擇自己想要的樣式。關於提示的細節樣式可以在自定義的屬性中修改。

2》相關的類：

相關的類有上個:相關的Activity（必須繼承FragmentActivity）， CircleFragmentPagerAdapter(必須繼承FragmentPagerAdapter)，CircleFragment（必須繼承Fragment———V4包）

使用方法：

1.   定義CircleFragment

Fragment中就按照一般的來進行定義（重寫onCreateView）就可以了，也可以複雜一些：

publicclassTestFragmentextends Fragment{
   //每次Fragment的儲存值
   privateintcontent;
   //每次儲存的鍵值對的鍵域
   privatestaticfinal StringCONTENT_KEY ="Content:key";
  
   //通過這個方法獲得TestFragment
   publicstatic FragmentnewInstance(int resId){
      TestFragment fragment = newTestFragment();
      fragment.content = resId;
      return fragment;
   }
  
   //在oncreate方法中獲取儲存的content
   @Override
   publicvoidonCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      if(savedInstanceState!=null && savedInstanceState.containsKey(CONTENT_KEY)){
         content =savedInstanceState.getInt(CONTENT_KEY);
      }
   }
  
   //建立每次fragment的檢視
   @Override
   public ViewonCreateView(LayoutInflater inflater, ViewGroup container,
         Bundle savedInstanceState) {
      ImageView view = newImageView(getActivity());
      view.setLayoutParams(newLayoutParams(LayoutParams.MATCH_PARENT,
            LayoutParams.MATCH_PARENT));
      view.setBackgroundResource(content);
     
      return view;
   }
   //儲存鍵值對
   @Override
   publicvoidonSaveInstanceState(Bundle outState) {
      super.onSaveInstanceState(outState);
      outState.putInt(CONTENT_KEY,content);
   }
 
}
 

2.定義CircleFragmentPagerAdapter：

按照提示來改錯就可以了重寫的方法也非常簡單：

publicclassTestFragmentPagerAdapterextendsFragmentPagerAdapter{
 
   publicTestFragmentPagerAdapter(FragmentManager fm) {
      super(fm);
   }
   /**
    * 這個方法返回的是在需要像是index為position時需要顯示的fragment
    */
   @Override
   public Fragment getItem(int position){
      returnTestFragment.newInstance(Const.WELCOME_PAGER_IMAGES[position]);
   }
 
   /**
    * 這個方法返回的是一共需要顯示多少個fragment
    */
   @Override
   publicintgetCount() {
      return Const.WELCOME_PAGER_IMAGES.length;
   }
 
}
 

3.Activity中找的新增的兩個空間ViewPager和Indicator做以下操作：

      ViewPager.setAdapter(CircleFragmentPagerAdapter)

      Indicator.setViewPager(viewPager);

關聯關係：

Viewpager->FragmentPagerAdpater->Fragment

Indicator->viewPager

如下：

publicclassMainActivityextends FragmentActivity {
  
   private ViewPagerviewPager;
   private CirclePageIndicatorindicator;
   private FragmentPagerAdapteradapter;
 
    @Override
    protectedvoidonCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
       
        adapter =newTestFragmentPagerAdapter(getSupportFragmentManager());
        viewPager =(ViewPager) findViewById(R.id.viewpager);
        viewPager.setAdapter(adapter);
       
        indicator =(CirclePageIndicator) findViewById(R.id.indicator);
        indicator.setViewPager(viewPager);
       
    }
 
 
    @Override
    publicbooleanonCreateOptionsMenu(Menu menu) {
        // Inflate themenu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        returntrue;
    }
   
}
 

最後效果如下：有點醜，審美啊！

這種事所有Indicator使用的基本方式。其他兩種方式也是在這個上面新增的。一定要自己試驗一些。