Android-ViewPagerIndicator框架使用——Circle

前言：Circle適用於應用新功能的展示頁和商品的多張圖片的展示功能。

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

　　　　　布局中定義一個LinearLayout垂直布局，添加一個viewpager和com.viewpagerindicatorCirclePageIndictor必須是完全限定名。

<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.代碼中調用布局

    　　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，關於他的資料大家可以查找http://www.cnblogs.com/qinghuaideren/p/3437898.html

　　　　3.上面是簡單的使用，並沒有修改指示的顏色和大小等屬性，現在通過他提供的方法我們來定義自己的指示。一下是CirclePageIndicator提供的屬性。

<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/項目完全限定名。

<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.代碼里修改：

 　　　　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.主題修改：

　　　　<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主題如下

　　<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設置監聽：

      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) {
            }
        });

以上就是Circle的使用方法介紹。源碼地址下載：http://download.csdn.net/detail/as294985925/6796117