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