ViewPagerIndictor框架的使用（第一部分）

这两天有彻底的玩了一遍ViewPageIndicator，网上有的博主的博客很好。但是我觉得如果使用了一个框架缺什么都不留下。下次又会重新来学习。这次记录一次详细的博客。以备后用。

优秀的博客：http://blog.csdn.net/xiaanming/article/details/10766053

           http://www.linuxidc.com/Linux/2015-02/113545.htm

1.   下载

下载地址：https://github.com/JakeWharton/ViewPagerIndicator

下载后有两个工程：

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使用的基本方式。其他两种方式也是在这个上面添加的。一定要自己试验一些。