这一部分内容其实网上有很多资料了, 我也只是总结整理下, 方便自己以后查看.

主要参考的几个bloger有:

http://chenfuduo.me/2015/07/30/TabLayout-of-design-support-library/

记录下自己安装别人的写了一个自己的demo

1.首先导入库:

compile 'com.android.support:appcompat-v7:23.1.1'

compile 'com.android.support:design:23.1.1'

compile 'com.android.support:support-v4:23.1.1'

2. 然后就是 布局文件

3. 这里将TabLaoyut的样式设置放入到了style文件中了,颜色神马的就不贴了

如果在布局中使用属性, 带tab开头的属性使用"app:"前缀而不是"andorid:"前缀

@color/colorPrimary

@color/colorPrimaryDark

@color/colorAccent

@dimen/tab_max_width     

?attr/colorAccent    

5dp     

12dp    

12dp    

?attr/selectableItemBackground    

@style/MyCustomTabTextAppearance    

?android:textColorPrimary    

14sp

?android:textColorSecondary

false    

36dp

4.然后就是Activity文件了

public class TabLayoutActivity extends AppCompatActivity {

private ViewPagerAdapter viewPagerAdapter;

private ViewPager        viewPager;

private TabLayout        tl;

private static final String POSITION = "position";

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_tablayout);

viewPager = (ViewPager) findViewById(R.id.vp_viewpager);

tl = (TabLayout) findViewById(R.id.tl_tabs);

}

@Override

protected void onResume() {

super.onResume();

viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());

viewPager.setAdapter(viewPagerAdapter);

tl.setupWithViewPager(viewPager);  //ViewPager 和 TabLayout 关联

tl.setTabMode(TabLayout.MODE_SCROLLABLE);  //用于多个TAB, Tablayout可以滚动

//更改TAB默认的文本布局,自定义TAB布局

for (int i = 0; i 

TabLayout.Tab tabAt = tl.getTabAt(i);

tabAt.setCustomView(viewPagerAdapter.getTabView(i));

}

viewPagerAdapter.notifyDataSetChanged();

}

@Override

public void onSaveInstanceState(Bundle outState) {

super.onSaveInstanceState(outState);

outState.putInt(POSITION, tl.getSelectedTabPosition());

}

@Override

protected void onRestoreInstanceState(Bundle savedInstanceState) {

super.onRestoreInstanceState(savedInstanceState);

viewPager.setCurrentItem(savedInstanceState.getInt(POSITION));

}

}

5. 然后就是ViewPager的Adapter了

private class ViewPagerAdapter extends FragmentPagerAdapter {

int pageCount = 10;

private int color[] = new int[]{R.color.orange, R.color.green, R.color.red,

R.color.color_grays, R.color.color_red, R.color.color_black,

R.color.color_furvous, R.color.color_blue, R.color.color_green,R.color.color_orange

};

public ViewPagerAdapter(FragmentManager supportFragmentManager) {

super(supportFragmentManager);

}

@Override

public Fragment getItem(int position) {

return ViewPagerFragment.getInstance(position + 1, color[position]);

}

@Override

public int getCount() {

return pageCount;

}

@Override

public CharSequence getPageTitle(int position) {

//       if (position == 4) {

//          Drawable img = getResources().getDrawable(R.drawable.ic_one);

//          img.setBounds(0, 0, img.getIntrinsicWidth(), img.getIntrinsicHeight());

//          SpannableString sb = new SpannableString("Page" + (position + 1) + " ");

//          ImageSpan imageSpan = new ImageSpan(img, ImageSpan.ALIGN_BASELINE);

//          sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

//          return sb;

//       }else{

//          return "Page" + (position + 1);

//       }

return null;  //如果采用自定义TAB布局,则这里返回null就可以了

}

//引入TAB自定义布局

public View getTabView(int position) {

View      view = View.inflate(TabLayoutActivity.this, R.layout.tab_item, null);

TextView  tv   = (TextView) view.findViewById(R.id.tv);

ImageView iv   = (ImageView) view.findViewById(R.id.iv);

tv.setText("Page" + (position + 1));

if (position == 5) {

iv.setVisibility(View.VISIBLE);

} else {

iv.setVisibility(View.GONE);

}

return view;

}

}

6.然后可能重要的就是Fragment了

public class ViewPagerFragment extends BaseFragment {

public int page;

private int color;

public static final String GETPAGE  = "get_page";

public static final String GETCOLOR = "get_color";

private static List frags = new ArrayList<>();

private View rootView;

public static Fragment getInstance(int page, int color) {

ViewPagerFragment cacheFrag = null;

cacheFrag = getCacheFrag(page, cacheFrag);

if (cacheFrag != null){

return cacheFrag;   //首先尝试获取缓存的Fragment

}

Bundle args = new Bundle();

args.putInt(GETPAGE, page);

args.putInt(GETCOLOR, color);

//new 一个Fragment

ViewPagerFragment pageFragment = new ViewPagerFragment();

pageFragment.setArguments(args);

frags.add(pageFragment);

return pageFragment;

}

//获取缓存的Fragment

private static ViewPagerFragment getCacheFrag(int page, ViewPagerFragment cacheFrag) {

if (frags != null && frags.size() > 0){

for (ViewPagerFragment frag : frags){

if (frag.page == page){

cacheFrag = frag;

break;

}

}

}

return cacheFrag;

}

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

page = getArguments().getInt(GETPAGE);

color = getArguments().getInt(GETCOLOR);

}

@Nullable

@Override

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

Log.i(this.getClass().getSimpleName(), "onCreateView");

if(rootView == null) {

rootView = inflater.inflate(R.layout.layout_fragment, container, false);

TextView tv = (TextView) rootView.findViewById(R.id.tv_fragment);

tv.setText("Page=====>" + page);

rootView.setBackgroundResource(color);

}

//缓存的rootView需要判断是否已经被加过parent， 如果有parent需要从parent删除，

//要不然会发生这个rootview已经有parent的错误。

ViewGroup parent = (ViewGroup) rootView.getParent();

if (parent != null){

parent.removeView(rootView);

}

return rootView;

}

}

主要就是这么些内容了