ViewPagerIndicator開源框架簡單使用

首先看能實現的效果圖

詳細介紹請見官網 http://viewpagerindicator.com/

本文的效果圖

首先看實現，先看主佈局文件，上面一個TabPageIndicator，下面一個ViewPager

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

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/indicator"
        android:background="@drawable/base_action_bar_bg"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        />
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />

</LinearLayout>

接着看主activity

package com.example.viewpageindicator;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.widget.Toast;

import com.viewpagerindicator.TabPageIndicator;

public class MainActivity extends FragmentActivity {
	/**
	 * Tab標題
	 */
	private static final String[] TITLE = new String[] { "推薦", "熱點", "娛樂", "科技","財經", "數碼", "情感" };

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		//ViewPager的adapter
		FragmentPagerAdapter adapter = new TabPageAdapter(getSupportFragmentManager(),TITLE);
        ViewPager pager = (ViewPager)findViewById(R.id.pager);
        pager.setAdapter(adapter);

        //實例化TabPageIndicator然後設置ViewPager與之關聯
        TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator);
        indicator.setViewPager(pager);
        
        //如果我們要對ViewPager設置監聽，用indicator設置就行了
        indicator.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int arg0) {
				Toast.makeText(getApplicationContext(), TITLE[arg0], Toast.LENGTH_SHORT).show();
			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				
			}
		});
        
	}

	
	

}

1.TabPageIndicator和ViewPager控件，並關聯indicator.setViewPager(pager);

2.給viewpaper對象設置adapter，adapter對象getItem返回的就是vewpaper顯示的界面，getPageTitle返回的就是indicator顯示的導航文本，getCount返回多個選項卡

TabPageAdapter

package com.example.viewpageindicator;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

/**
 * ViewPager適配器
 */
class TabPageAdapter extends FragmentPagerAdapter {
	private String[] data;
	
    public TabPageAdapter(FragmentManager fm, String[] data) {
    	super(fm);
    	this.data = data;
    }
    

    @Override
    public Fragment getItem(int position) {
    	//新建一個Fragment來展示ViewPager item的內容，並傳遞參數
    	Fragment fragment = new ItemFragment();  
        Bundle args = new Bundle();  
        args.putString("arg", data[position]);  
        fragment.setArguments(args);  
    	
        return fragment;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return data[position % data.length];
    }

    @Override
    public int getCount() {
        return data.length;
    }
}

這裏可以看到對應每個選項卡的viewpaper顯示的內容是一個ItemFragment

package com.example.viewpageindicator;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;


public class ItemFragment extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		
		View contextView = inflater.inflate(R.layout.fragment_item, container, false);
		TextView mTextView = (TextView) contextView.findViewById(R.id.textview);
		
		//獲取Activity傳遞過來的參數
		Bundle mBundle = getArguments();
		String title = mBundle.getString("arg");
		
		mTextView.setText(title);
		
		return contextView;
	}

}

一個Fragement就是一個簡單的textview

Adapter和Framment的代碼都比較簡單，這裏不再繼續展開說明，最後貼出需要根據實際場景需要改動的地方

styles.xml

 <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    </style>
    
    <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">8dp</item>
        <item name="android:showDividers">middle</item>
        <item name="android:paddingLeft">10dp</item>
        <item name="android:paddingRight">10dp</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>

這個名字爲StyledIndicators的樣式到底哪裏用到了呢？我們看AndroidManifest.xml中application的theme就知道了

 <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/StyledIndicators" >
        <activity
            android:name="com.example.viewpageindicator.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

最後Demo源碼附上