Android-ViewPagerIndicator架構使用——CirclePageIndicator

標籤：

前言：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

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

 

Android-ViewPagerIndicator架構使用——CirclePageIndicator