首先来看下实现的效果吧：
最近在项目中实现这个效果的时候。尽管自己磕磕绊绊的实现了，可是知识确实模模糊糊的，今天天气异常的冷，在加上这个知识不太熟练，实在是没有心情进行接下来的计划，干脆借着这个时间，好好的整理一下这个实现方式。也在次总结一下，记忆更加深刻。
TabLayout简单介绍
在的Google I/O大会上，Google公布的新的Android Support Design库，里面也包括了几个新的控件，那么TabLayout就是当中一个。使用该组件我们能够非常轻松的实现TabPageIndicator效果。而且该为官方的，能够向下兼容非常多版本号而且能够更加统一Material Design效果。使用的时候要在库依赖中增加
假设不太清楚，能够看下/wuyinlei/article/details/50570018
教你怎么在项目中增加依赖。
compile'com.android.support:design:23.1.1’
接下来，在TabLayout中增加
<android.support.design.widget.TabLayout android:id="@+id/tabLayout"android:layout_width="match_parent"android:layout_height="wrap_content"<!-- 下方滚动的下划线颜色 -->app:tabIndicatorColor="#33aa22"<!-- 下方指示条的高度 -->app:tabIndicatorHeight="5dp"<!-- tab被选中后，文字的颜色 -->app:tabSelectedTextColor="#33aa22"<!--能够改变tab中的字体的大小-->app:tabTextAppearance="@style/App_Theme"<!-- tab中字体的颜色 -->app:tabTextColor="#33aa22"/>
能够在这里设置字体大小，然后引用：
<style name="App_Theme" parent="Theme.AppCompat"><item name="android:windowNoTitle">true</item><item name="android:textSize">18dp</item><item name="android:textAllCaps">false</item></style>
注意：上面的这个style必须在承载他的activity中theme中增加，要不然会出现
Cause by ：java.lang.IllegalArgumentException: You need to use a Theme.AppCompat theme (or descendant) with the design library;（我没有加上之前各种错，加上正常执行。可是执行之后去掉，居然也能够正常执行。不得解)
好了。接下来我们看下详细怎么实现的吧，里面有解释：
MainActivity.java：
package com.example.tablayoutfragment;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);}}
activity_main.xml:
<?
xml version="1.0" encoding="utf-8"?
>
<LinearLayout xmlns:android="/apk/res/android" xmlns:tools="/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.tablayoutfragment.MainActivity"> <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" > <!--在这里直接增加fragment。而且制定fragment类名--> <fragment android:id="@+id/main_info_fragment" class="com.example.tablayoutfragment.MainFragment" android:layout_width="fill_parent" android:layout_height="match_parent"/> </FrameLayout> </LinearLayout>
MAinFragment.java：
package com.example.tablayoutfragment;import android.os.Bundle;import android.support.design.widget.TabLayout;import android.support.v4.app.Fragment;import android.support.v4.view.ViewPager;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import java.util.ArrayList;import java.util.List;/*** A simple {@link Fragment} subclass.*/public class MainFragment extends Fragment {private TabLayout mTabLayout;private ViewPager mViewPager;//fragment存储器private List<Fragment> mFragments;//tab条目中的内容private String[]titles = {"第一个","第二个","第三个","第四个","第五个","第六个","第七个","第八个"};private FixedPagerAdapter mAdapter;@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {View view = inflater.inflate(R.layout.fragment_blank, container, false);mTabLayout = (TabLayout) view.findViewById(R.id.tabLayout);mViewPager = (ViewPager) view.findViewById(R.id.viewPager);initData();return view;}/*** 初始化数据*/private void initData() {mAdapter = new FixedPagerAdapter(getChildFragmentManager());mAdapter.setTitles(titles);//标题mFragments = new ArrayList<>();for (int i = 0; i < titles.length; i++) {mFragments.add(PageFragment.newInstance(titles[i]));}//把要显示的fragment集合传给adaptermAdapter.setFragments(mFragments);/*** 设置tablayout的模式* 模式一：MODE_SCROLLABLE 能够滑动，显示非常多个tab中的几个展示出来* 模式二：MODE_FIXED Fixed tabs display all tabs concurrently 展示出全部的。适合三四个tab*/mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//给viewPager设置适配器mViewPager.setAdapter(mAdapter);//TabLayout绑定ViewPagermTabLayout.setupWithViewPager(mViewPager);}}
fragment_main.xml:
<LinearLayout xmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#fff"android:orientation="vertical"tools:context=".MainFragment"><android.support.design.widget.TabLayoutandroid:id="@+id/tabLayout"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabIndicatorColor="#33aa22"app:tabIndicatorHeight="5dp"app:tabSelectedTextColor="#33aa22"app:tabTextAppearance="@style/App_Theme"app:tabTextColor="#33aa22"/><android.support.v4.view.ViewPagerandroid:id="@+id/viewPager"android:layout_width="match_parent"android:layout_height="match_parent"</android.support.v4.view.ViewPager></LinearLayout>
PageFragment.java:
package com.example.tablayoutfragment;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;/*** Created by 若兰 on /1/23.* 一个懂得了编程乐趣的小白，希望自己* 能够在这个道路上走的非常远，也希望自己学习到的* 知识能够帮助很多其它的人,分享就是学习的一种乐趣* QQ:1069584784* csdn:/wuyinlei*/public class PageFragment extends Fragment {private View mView;/*** key值*/private static final String KEY = "EXTRA";private String title;/*** 在这里我们提供一个静态的方法来实例化PageFragment* 在这里我们传入一个參数。用来得到title，然后我们拿到这个title设置给内容** @param extra* @return*/public static PageFragment newInstance(String extra){//利用bundle传值Bundle bundle = new Bundle();bundle.putString(KEY,extra);//实例化PageFragment fragment = new PageFragment();fragment.setArguments(bundle);return fragment;}/* @Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);Bundle bundle = getArguments();if (bundle != null) {title = bundle.getString(KEY);}}*/private TextView mTextView;@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {Bundle bundle = getArguments();if (bundle != null) {title = bundle.getString(KEY);}if (mView == null) {mView = inflater.inflate(R.layout.page_fragment, container, false);}initView();return mView;}public void initView() {mTextView = (TextView) mView.findViewById(R.id.text_fragment);mTextView.setText(title);}}
这个fragment的布局里面就一个textview，我就不写上了。
以下看下这个adapter吧
FixedPagerAdapter.java:
package com.example.tablayoutfragment;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentStatePagerAdapter;import android.view.ViewGroup;import java.util.List;/*** Created by 若兰 on /1/23.* 一个懂得了编程乐趣的小白，希望自己* 能够在这个道路上走的非常远。也希望自己学习到的* 知识能够帮助很多其它的人,分享就是学习的一种乐趣* QQ:1069584784* csdn:/wuyinlei*/public class FixedPagerAdapter extends FragmentStatePagerAdapter {private String[] titles;/*** 设置标题** @param titles*/public void setTitles(String[] titles) {this.titles = titles;}private List<Fragment> mFragments;/*** 这个是在继承FragmentStatePagerAdapter会强制写入的** @param fm*/public FixedPagerAdapter(FragmentManager fm) {super(fm);}@Overridepublic Fragment getItem(int position) {return mFragments.get(position);}/*** Return the number of views available.* 返回一个能够用的view的个数** @return*/@Overridepublic int getCount() {return mFragments.size();}/*** Create the page for the given position. The adapter is responsible for* adding the view to the container given here,* although it only must ensure this is done by the time it returns from finishUpdate(ViewGroup).* 这个同destroyItem（）相反，是对于给定的位置创建视图。适配器往container中增加** @param container* @param position* @return*/@Overridepublic Object instantiateItem(ViewGroup container, int position) {Fragment fragment = null;fragment = (Fragment) super.instantiateItem(container,position);return fragment;}public List<Fragment> getFragments() {return mFragments;}public void setFragments(List<Fragment> fragments) {mFragments = fragments;}/*** Remove a page for the given position. The adapter is responsible for* removing the view from its container,* although it only must ensure this is done by the time it returns from finishUpdate(View).* 移除给定位置的数据。适配器负责从container（容器）中取出。可是这个必须保证是在finishUpdate（view）* 返回的时间内完毕** @param container* @param position* @param object*/@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {super.destroyItem(container, position, object);}/*** 得到滑动页面的Title** @param position* @return*/@Overridepublic CharSequence getPageTitle(int position) {return titles[position];}}
好了，到此为止。执行就能够出现了开头的效果了。如今附上github该demo的地址：/wuyinlei/TTFVF, 有疑问能够交流哈。多谢支持！！
