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