fragment 中 包含 fragment， 还有 indicator。

fragmentIndicator.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_popular"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/main_popular_indicator"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white" />

    <android.support.v4.view.ViewPager
        android:id="@+id/main_popular_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>



    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">

        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
        <item name="vpiTabPageIndicatorStyle">@style/MusicTube.IndicatorStyle</item>
        <item name="actionBarStyle">@style/MusicTube.ActionBarStyle</item>
        <item name="actionModeStyle">@style/MusicTube.ActionMode</item>
        <item name="actionBarItemBackground">@drawable/bg_menu_item</item>
    </style>

    <style name="MusicTube.IndicatorStyle" parent="Widget.TabPageIndicator">
        <item name="android:background">@drawable/custom_tab_indicator</item>
        <item name="android:gravity">center</item>
        <item name="android:divider">@drawable/custom_tab_indicator_divider</item>
        <item name="android:textColor">@drawable/text_color_viewpager_tab</item>
        <item name="android:textSize">17sp</item>
        <item name="android:textStyle">normal</item>
    </style>
    
    

mainFragment.java

package com.ilegendsoft.toprankapps.musictube.fragments;

import java.lang.reflect.Field;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBarActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;

import com.ilegendsoft.ilsalib.ilsayoutube.LastFMRequest;
import com.ilegendsoft.ilsalib.utils.Logger;
import com.ilegendsoft.toprankapps.musictube.activities.SelectCountryActivity;
import com.ilegendsoft.toprankapps.musictube.adapters.MainPopularPagerAdapter;
import com.toprankapps.musictube4.R;
import com.viewpagerindicator.TabPageIndicator;

public class MainPopularFragment extends Fragment {
	private ActionBarActivity mActivity;
	private ViewPager mViewPager;
	private TabPageIndicator mIndicator;
	private MainPopularPagerAdapter mPagerAdapter;

	@Override
	public void onAttach(Activity activity) {
		super.onAttach(activity);
		mActivity = (ActionBarActivity) activity;
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		Logger.d("----- MainPopularFragment onCreateView -----");
		LastFMRequest.setCOUNTRY(SelectCountryActivity
				.getSavedCuntryName(mActivity));

		LinearLayout mainPopularLayout = (LinearLayout) inflater.inflate(
				R.layout.frag_main_popular, null);
		mViewPager = (ViewPager) mainPopularLayout
				.findViewById(R.id.main_popular_pager);
		mIndicator = (TabPageIndicator) mainPopularLayout
				.findViewById(R.id.main_popular_indicator);

		mPagerAdapter = new MainPopularPagerAdapter(getChildFragmentManager(),
				mActivity);
		mViewPager.setAdapter(mPagerAdapter);
		mIndicator.setViewPager(mViewPager);
		mIndicator
				.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
					@Override
					public void onPageSelected(int position) {
					}
				});

		return mainPopularLayout;
	}

	/**
	 * This seems to be a bug in the newly added support for nested fragments.
	 * Basically, the child FragmentManager ends up with a broken internal state
	 * when it is detached from the activity. A short-term workaround that fixed
	 * it for me is to add the following to onDetach() of every Fragment which
	 * you call getChildFragmentManager() on:
	 */
	@Override
	public void onDetach() {
		super.onDetach();
		try {
			Field childFragmentManager = Fragment.class
					.getDeclaredField("mChildFragmentManager");
			childFragmentManager.setAccessible(true);
			childFragmentManager.set(this, null);

		} catch (NoSuchFieldException e) {
			e.printStackTrace();
			Logger.d("----- MainPopularFragment onDetach NoSuchFieldException ----");
		} catch (IllegalAccessException e) {
			e.printStackTrace();
			Logger.d("----- MainPopularFragment onDetach IllegalAccessException ----");
		}
	}
}

PagerAdapter.java

package com.ilegendsoft.toprankapps.musictube.adapters;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import com.toprankapps.musictube4.R;
import com.ilegendsoft.toprankapps.musictube.fragments.HotArtistFragment;
import com.ilegendsoft.toprankapps.musictube.fragments.PopularFragment;

public class MainPopularPagerAdapter extends FragmentPagerAdapter {
	private Context mContext;
	private PopularFragment mPopularFragment;
	private HotArtistFragment mHotArtistFragment;

	public MainPopularPagerAdapter(FragmentManager fm, Context context) {
		super(fm);
		mContext = context;
		if (mPopularFragment == null || mHotArtistFragment == null) {
			mPopularFragment = new PopularFragment();
			mHotArtistFragment = new HotArtistFragment();
		}
	}

	@Override
	public Fragment getItem(int i) {
		Fragment currentFragment = null;
		switch (i) {
		case 0:
			currentFragment = mPopularFragment;
			break;
		case 1:
			currentFragment = mHotArtistFragment;
			break;
		default:
			break;
		}
		return currentFragment;
	}

	@Override
	public int getCount() {
		return 2;
	}

	@Override
	public CharSequence getPageTitle(int position) {
		switch (position) {
		case 0:
			return mContext.getResources().getString(
					R.string.main_frag_popular_title_popular);
		case 1:
			return mContext.getResources().getString(
					R.string.main_frag_popular_title_hotartist);
		default:
			break;
		}
		return super.getPageTitle(position);
	}

}