Android-ViewPagerIndicator框架使用——TabPageIndicator

前言：TabPageIndicator這個類和之前的不大一樣，他不僅提供了展示的功能，而且可以點擊，下面的viewpager可以跳轉的有點tabhost的感覺。

　　　　一:布局文件的定義，simple_tabs，其中的TabPageIndicator可以放在viewpager的上面或是下面都行，效果還行吧。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/indicator"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

　　　　二:在代碼中使用：

　　　@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.simple_tabs);

        FragmentPagerAdapter adapter= new GoogleMusicAdapter(
                getSupportFragmentManager());

        ViewPager pager = (ViewPager) findViewById(R.id.pager);
        pager.setAdapter(adapter);

        TabPageIndicator indicator = (TabPageIndicator) findViewById(R.id.indicator);
        indicator.setViewPager(pager);
    }

　　　　其中的adapter需要注意，因為標識的標簽文字需要在adapter中添加：

　　　　 /**
   　　  * 標題
   　　  */
   　　 private static final String[] CONTENT = new String[] { "Recent", "Artists",
            "Albums", "Songs", "Playlists", "Genres" };
            "Albums", "Songs", "Playlists", "Genres" };    
    　　/**
         * 繼承PagerAdapter或PagerAdapter子類的時候需要實現這個方法，用於設置標題
         */
        @Override
        public CharSequence getPageTitle(int position) {
            return CONTENT[position % CONTENT.length].toUpperCase();
        }

　　　　若想讓標簽帶一張圖片，在定義adatper的時候，還需要實現IconPagerAdapter接口，並實現其中的getIconResId方法：

     private static final int[] ICONS = new int[] {
            R.drawable.perm_group_calendar, R.drawable.perm_group_camera,
            R.drawable.perm_group_device_alarms,
            R.drawable.perm_group_location, };
　　　　 /**
         * 返回標簽的圖片
         */
        @Override
        public int getIconResId(int index) {
            return ICONS[index];
        }

　　　　三:修改樣式，下面是比較重要的屬性：

        <!-- 點擊時在不同狀態下顯示的背景色 -->
        <item name="android:background">@drawable/custom_tab_indicator</item>
        <!-- 分割線圖片設置 -->
        <item name="android:divider">@drawable/custom_tab_indicator_divider</item>
        <!-- 設置分割線的顯示位置，或是不顯示 -->
        <item name="android:showDividers">none</item>

　　　　四:使用方法這個使用時候比較特別，貌似只能用主題來設置：

　　　　　　　　1.設置主題，必須按照一下三步設置，其中的StyledIndicators這名字可以自定義：

    <!-- 第一步設置主題 -->
    <style name="StyledIndicators" parent="@android:style/Theme.Light">
        <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
    </style>
    <!-- 第二步設置主題 -->
    <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">

        <!-- 點擊時在不同狀態下顯示的背景色 -->
        <item name="android:background">@drawable/custom_tab_indicator</item>
        <!-- 分割線圖片設置 -->
        <item name="android:divider">@drawable/custom_tab_indicator_divider</item>
        <!-- 設置分割線的顯示位置，或是不顯示 -->
        <item name="android:showDividers">none</item>
        
        <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
        <item name="android:textColor">#FF555555</item>
        <item name="android:textSize">16sp</item>
        <item name="android:dividerPadding">10dp</item>
        <item name="android:paddingLeft">8dp</item>
        <item name="android:paddingRight">8dp</item>
        <item name="android:fadingEdgeLength">10dp</item>
        <item name="android:fadingEdge">horizontal</item>
    </style>
    <!-- 第三步設置主題 -->
    <style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
        <item name="android:typeface">monospace</item>
    </style>

　　　　　　　　2.使用主題：

        <activity
            android:name=".SampleTabsStyled"
            android:label="Tabs/Styled" android:theme="@style/StyledIndicators" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="com.jakewharton.android.viewpagerindicator.sample.SAMPLE" />
            </intent-filter>
        </activity>

源碼以及Demo下載地址：http://download.csdn.net/detail/as294985925/6796117