Android在Fragment中使用Tab

Tab使用非常常见，实现方式也很多，这里分享一种使用ViewPagerIndicator快速实现tab的方法，并且可以根据需要实现不同的效果，包括文字title、文字title+图标、小点指示灯，并可以实现滑动自动切换标签效果。

来张效果截图：

添加tab步骤如下：

1、添加使用ViewPagerIndicator库（AS中直接导入library）

2、Fragment布局文件fragment.xml中添加

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

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

3、fragment中加载xml文件，并使用库中包含的style

在OnCreateView函数中添加

final Context contextThemeWrapper = new ContextThemeWrapper(getActivity(), R.style.StyledIndicators);
LayoutInflater localInflater = inflater.cloneInContext(contextThemeWrapper);

View view = localInflater.inflate(R.layout.activity_order, null);
initView(view);
initData();
return view;

initView函数如下：

private void initView(View view){
    mViewPager = (ViewPager) view.findViewById(R.id.fragmentviewpager);
    mIndicator = (TabPageIndicator) view.findViewById(R.id.indicator);
}

initData函数如下：

private void initData() {
    FragmentManager mFm = getChildFragmentManager();
    List<Fragment> fragments = new ArrayList<Fragment>();
    fragments.add(Fragment1.getInstance());
    fragments.add(Fragment2.getInstance());
    fragments.add(Fragment3.getInstance());
    MyAdapter mAdapter = new MyAdapter(mFm, fragments, getActivity());
    mViewPager.setAdapter(mAdapter);
    mIndicator.setViewPager(mViewPager);
}

4、覆写Adapter

class MyAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragments;  private Context context;  private static final int[] CONTENT = {R.string.home, R.string.message, R.string.me};

    private String getContent(int resId) {
        return context.getString(resId);
    }

    public OrderAdapter(FragmentManager fm, List<Fragment> fragments, Context context) {
        super(fm);
        this.fragments = fragments;
        this.context = context;
    }

    @Override
    public Fragment getItem(int arg0) {
        return fragments.get(arg0);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return getContent(CONTENT[position]);
    }

}

字体颜色更改方法：

1、在drawable中添加tab_color_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_selected="true" android:color="#f9a202"></item>
    <item android:state_selected="false" android:color="#000000"></item>

</selector>

2、在对应的sytle下（如使用TabPage,修改CustomTabPageIndicator）更改

<item name="android:textColor">@drawable/tab_color_selector</item>

备注：如果将xml文件放在color目录下，对应的style设置为@color/tab_color_selector