viewpagerindicator的使用

1.下載下傳viewpagerindicator的開源庫

http://download.csdn.net/detail/and_hl/9558221

2. 進行項目的依賴

選中自己的項目---->右擊選擇properties---->選擇左側的Android---->在Library節點下Add下載下傳好的viewpagerindicator的開源庫

3. （如想用Fragment做ViewPager的item）建立ViewPager擴充卡

<span style="font-size:18px;">/**
	 * ViewPager擴充卡
	 */
    class TabPageIndicatorAdapter extends FragmentPagerAdapter {
        public TabPageIndicatorAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
        	//建立一個Fragment來展示ViewPager item的内容，并傳遞參數  參數為每一個Item的标題
        	Fragment fragment = new ViewPageIndicatorFragment(DataUtil.titles.get(position), MainContentFragment.this);
        	
            return fragment;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return DataUtil.titles.get(position % DataUtil.titles.size());
        }

        @Override
        public int getCount() {
            return DataUtil.titles.size();
        }
    }</span>
           

4. 建立布局檔案

<span style="font-size:18px;"><com.viewpagerindicator.TabPageIndicator
        android:id="@+id/tp_indicator"
        android:background="#EEEEEE"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        />
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        /></span>
           

5. 在活動中進行配置

TabPageIndicator tp_indicator = (TabPageIndicator)view.findViewById(R.id.tp_indicator);
ViewPager pager = (ViewPager)view.findViewById(R.id.vp_content);

//ViewPager的adapter
FragmentPagerAdapter adapter = new TabPageIndicatorAdapter(mainActivity.getSupportFragmentManager());
           

pager.setAdapter(adapter); // ViewPager設定擴充卡
		        
tp_indicator.setViewPager(pager); // 使标題與ViewPager關聯
           

6. 在資源檔案values下的styles.xml檔案中進行配置

<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/tab_indicator</item> -->
        <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
        <item name="android:textSize">14sp</item>
        <item name="android:dividerPadding">2dp</item>
        <item name="android:showDividers">middle</item>
        <item name="android:paddingLeft">13dp</item>
        <item name="android:paddingRight">13dp</item>
        <item name="android:fadingEdge">horizontal</item>
        <item name="android:fadingEdgeLength">8dp</item>
    </style>

    <style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
        <item name="android:typeface">monospace</item>
        <item name="android:textColor">@drawable/selector_tabtext</item>
    </style>
           

7. 在AndroidManifest.xml清單檔案中的目前活動中進行引用style

<activity
            android:name="com.own.todaytop.activity.MainActivity"
            android:label="@string/title_activity_main"
            android:theme="@style/StyledIndicators" >
        </activity>
           

8. 好了，運作你的程式吧！