ViewPager+FragmentPagerAdapter+TabPageIndicator实现Tab效果（推荐）

编写布局文件代码：

activity_main.xml：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    xmlns:tools="http://schemas.android.com/tools"    tools:context="com.example.pagerindicator_tab.MainActivity"    >    <com.viewpagerindicator.TabPageIndicator        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:id="@+id/tabPageIndicator"        android:background="@color/colorAccent"/>    <android.support.v4.view.ViewPager        android:layout_width="match_parent"        android:layout_height="match_parent"        android:id="@+id/viewPager"/></LinearLayout>

frag.xml:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="Hello"        android:id="@+id/tv"        android:textSize="25sp"/></LinearLayout><

编写TabFragment继承fragment,用来显示页面数据:

public class TabFragment extends Fragment{    private int pos;    @SuppressLint("ValidFragment")    public TabFragment(int pos){          this.pos = pos;    }    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.frag,container,false);        TextView tv = (TextView) view.findViewById(R.id.tv);        tv.setText(TabAdapter.TITLES[pos]);        return view;    }}

ViewPager与FragmentPagerAdapter的配合去装载页面，可自定义一个TabAdapter继承FragmentPagerAdapter

public class TabAdapter extends FragmentPagerAdapter{    public static String TITLES[] = {"新朋友","群聊","公众号","商城"};    public TabAdapter(FragmentManager fm) {        super(fm);    }// viewPager填充的每个fragment页面,    @Override    public Fragment getItem(int position) {        TabFragment fragment = new TabFragment(position);        return fragment;    }//  Tab的数目    @Override    public int getCount() {        return TITLES.length;    }//  填充Tab的标题    @Override    public CharSequence getPageTitle(int position) {        return TITLES[position];    }}

编写MainActivity代码：

public class MainActivity extends FragmentActivity {    private TabAdapter tabAdapter;    private ViewPager viewPager;    private TabPageIndicator tabPageIndicator;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        tabAdapter = new TabAdapter(getSupportFragmentManager());        initViews();        viewPager.setAdapter(tabAdapter);        tabPageIndicator.setViewPager(viewPager,0);    }    private void initViews(){        viewPager =  (ViewPager) findViewById(R.id.viewPager);        tabPageIndicator = (TabPageIndicator) findViewById(R.id.tabPageIndicator);    }}

使用viewPager.setAdapter(fragmentPagerAdapter)填充ViewPager，tabPageIndicator.setViewPager(viewPager)使TabPageIndicator实现对viewPager的适配

关于TabPageIndicator的样式可以在style.xml中进行配置，如下：

  <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">        <!-- Customize your theme here. -->        <item name="colorPrimary">@color/colorPrimary</item>        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>        <item name="colorAccent">@color/colorAccent</item>        <!--设置TabPageIndicator样式为MyTabPageIndicator-->        <item name="vpiTabPageIndicatorStyle">@style/MyTabPageIndicator</item>          <item name="android:windowNoTitle">true</item>    </style>    <style name="MyTabPageIndicator" parent="Widget">        <item name="android:background">@drawable/vpi__tab_indicator</item>      <<span style="font-family: Arial, Helvetica, sans-serif;">!--设置TabPageIndicator的背景样式--></span>        <item name="android:textSize">20sp</item>                 <!--设置TabPageIndicator中文字的大小-->    </style>

对TabPageIndicator还有很多样式可以改变，这里不多讲

实现的效果如下：

注：com.viewpagerindicator.TabPageIndicator需要导入相关包，在Android Studio中导入这个包，可以参见我的博客介绍：http://blog.csdn.net/csdn_blog_lcl/article/details/52744101