Android-ViewPagerIndicator框架使用——CirclePageIndicator

前言：Circle适用于应用新功能的展示页和商品的多张图片的展示功能。

　　　　1.定义布局文件：SampleCirclesDefault中添加了一个布局：simple_circles。

　　　　　布局中定义一个LinearLayout垂直布局，添加一个viewpager和com.viewpagerindicatorCirclePageIndictor必须是完全限定名。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="fill_parent"     android:layout_height="fill_parent"     android:orientation="vertical" >       <android.support.v4.view.ViewPager         android:id="@+id/pager"         android:layout_width="fill_parent"         android:layout_height="0dp"         android:layout_weight="1" />       <com.viewpagerindicator.CirclePageIndicator         android:id="@+id/indicator"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:padding="10dip" />   </LinearLayout>

　2.代码中调用布局

1 2 3 4 5 6 7 8 9

setContentView(R.layout.simple_circles);         //定义一个iewpager的adaper         mAdapter = new TestFragmentAdapter(getSupportFragmentManager());         //定义个Pager，即布局中定义的那个pagerview         mPager = (ViewPager) findViewById(R.id.pager);         mPager.setAdapter(mAdapter);         //定义一个指示变量，即布局中定义的那个         CirclePageIndicator indicator = (CirclePageIndicator) findViewById(R.id.indicator);         indicator.setViewPager(mPager);

完成以上的代码就可以使用了。这里面需要一个ViewPagerAdatper

　3.上面是简单的使用，并没有修改指示的颜色和大小等属性，现在通过他提供的方法我们来定义自己的指示。一下是CirclePageIndicator提供的属性。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<declare-styleable name="CirclePageIndicator">           <!-- 指示标识是否居中 -->         <attr name="centered" />         <!-- 当前选择指示的颜色 -->         <attr name="fillColor" format="color" />         <!-- 当前未被选择指示的颜色 -->         <attr name="pageColor" format="color" />         <!-- 指示的布局方式，水平还是垂直 -->         <attr name="android:orientation" />         <!-- 指示的大小 -->         <attr name="radius" format="dimension" />         <!-- 指示是否快速滑动 -->         <attr name="snap" format="boolean" />         <!-- 描边的颜色 -->         <attr name="strokeColor" format="color" />         <!-- 描边的宽度 -->         <attr name="strokeWidth" />         <!-- 指示整体的背景色 -->         <attr name="android:background" />     </declare-styleable>

　　　　4.改变属性：有三种方法

　　　　　　1.在布局中更改：其中的xmlns:app是后面那个http路径的简称，方便使用，这个结尾用的是res-auto，没见过，估计是自动查找，正常的写法是这样的

　　　　　　　 xmlns:app1="http://schemas.android.com/apk/res/com.viewpagerindicator.sample"，即res/项目完全限定名。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     android:orientation="vertical"     android:layout_width="fill_parent"     android:layout_height="fill_parent">       <android.support.v4.view.ViewPager         android:id="@+id/pager"         android:layout_width="fill_parent"         android:layout_height="0dp"         android:layout_weight="1"         />     <com.viewpagerindicator.CirclePageIndicator         android:id="@+id/indicator"         android:padding="10dip"         android:layout_height="wrap_content"         android:layout_width="fill_parent"         android:background="#FFCCCCCC"         app:radius="10dp"         app:fillColor="#FF888888"         app:pageColor="#88FF0000"         app:strokeColor="#FF000000"         app:strokeWidth="2dp"         /> </LinearLayout>

　2.代码里修改：

1 2 3 4 5 6 7 8 9 10

CirclePageIndicator indicator = (CirclePageIndicator)findViewById(R.id.indicator);         indicator.setViewPager(mPager);           final float density = getResources().getDisplayMetrics().density;         indicator.setBackgroundColor(0xFFCCCCCC);         indicator.setRadius(10 * density);         indicator.setPageColor(0x880000FF);         indicator.setFillColor(0xFF888888);         indicator.setStrokeColor(0xFF000000);         indicator.setStrokeWidth(2 * density);

3.主题修改：

1 2 3 4 5 6 7 8 9 10

<activity             android:name=".SampleCirclesStyledTheme"             android:label="Circles/Styled (via theme)"             android:theme="@style/CustomCirclePageIndicator" >             <intent-filter>                 <action android:name="android.intent.action.MAIN" />                   <category android:name="com.jakewharton.android.viewpagerindicator.sample.SAMPLE" />             </intent-filter>         </activity>

　CustomCirclePageIndicator主题如下

1 2 3 4 5 6 7

<style name="CustomCirclePageIndicator" parent="@android:style/Theme.Light">         <item name="fillColor">#FF888888</item>         <item name="strokeColor">#FF000000</item>         <item name="strokeWidth">2dp</item>         <item name="radius">10dp</item>         <item name="centered">true</item>     </style>

4.为viewpager设置监听：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

mIndicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {             @Override             public void onPageSelected(int position) {                 Toast.makeText(SampleCirclesWithListener.this, "Changed to page " + position, Toast.LENGTH_SHORT).show();             }               @Override             public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {             }               @Override             public void onPageScrollStateChanged(int state) {             }         });