Android ViewPager+ViewPagerIndicator實現Tab主界面

實現類似網易精選這樣的效果：

技術分析

ViewPager+ViewPagerIndicator實現

佈局

主界面從上到下是

1. top標題欄
2. 中間是ViewPagerIndicator
3. 下面是ViewPager

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <include layout="@layout/top" />

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/indicator"
        android:background="@color/tab_bg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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

</LinearLayout>

MainAcitivity裏，
1. 控件初始化，
2. ViewPager設置適配器
3. 將ViewPager和ViewPagerIndicator關聯，

public class MainActivity extends FragmentActivity {

    private ViewPager mViewPager;
    private TabPageIndicator mIndicator;
    private MyAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        mViewPager = (ViewPager) findViewById(R.id.vp_content);
        mIndicator = (TabPageIndicator) findViewById(R.id.indicator);

        mAdapter = new MyAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(mAdapter);
        //將ViewPager和Indicator關聯起來，設置默認選中第一個title
        mIndicator.setViewPager(mViewPager, 0);

    }

}

適配器FragmentPageAdapter

重寫下面的三個方法即可，注意getPageTitle（）

public class MyAdapter extends FragmentPagerAdapter {


    //標題字符串數組
    public static final String[] TITLES = new String[] { "課程", "問答", "求課",
            "學習", "計劃" };

    public MyAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int arg0) {
        NewsFragment newsFragment = new NewsFragment(arg0);
        return newsFragment;
    }

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

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

}

其中的Fragment

這裏需要注意的是標記type，通過type確定當前選中的是哪個標題
然後顯示相應的內容

@SuppressLint("ValidFragment") 
public class NewsFragment extends Fragment {

    private int newsType = 0;


    //初始化時，傳入當前選中的title的id，通過id選擇內容
    public NewsFragment(int newsType) {
        super();
        this.newsType = newsType;
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment_news, null);
        TextView tv = (TextView) view.findViewById(R.id.tv_news_content);
        tv.setText(MyAdapter.TITLES[newsType]);
        return view;
    }

}

最後設置ViewPagerIndicator的樣式

在清單文件中，將其設置到所在Activity的主題上

<style name="MyTheme" parent="AppBaseTheme">
        <item name="vpiTabPageIndicatorStyle">@style/MyWidget.TabPageIndicator</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:animationDuration">5000</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

    <style name="MyWidget.TabPageIndicator" parent="Widget">
        <item name="android:gravity">center</item>
        <item name="android:background">@drawable/vpi__tab_indicator</item>
        <item name="android:paddingLeft">22dip</item>
        <item name="android:paddingRight">22dip</item>
        <item name="android:paddingTop">8dp</item>
        <item name="android:paddingBottom">8dp</item>
        <item name="android:textAppearance">@style/MyTextAppearance.TabPageIndicator</item>
        <item name="android:textSize">16sp</item>
        <item name="android:maxLines">1</item>
    </style>

    <style name="MyTextAppearance.TabPageIndicator" parent="Widget">
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">@android:color/black</item>
    </style>

例子代碼

https://github.com/qiwei0727/ViewPagerIndicatorDemo