Tablayout出现之前，由于google不再推荐使用tabActivity来实现页签切换的效果，或是那种页签切换满足不了我们实际的使用要求，因此出现了第三方的库：PagerSlidingTabStrip，viewpagerindicator等，使用上很方便；

后来，google官方提供了PagerTabStrip和PagerTitleStrip，效果上还是不尽如人意，直到最近，推出了design包，包含了tablayout来替代我们以前自定义的tablayout，然后就有很多人来进行开发，比如：

使用很方便，集成也较容易，甚至自定义tab布局也可以。

我此处说的问题如下：

1.实现效果：

这是一个很常见的效果，初步的效果是：每个页签为自定义的布局--文字描述居下，图标居上；切换页签时，变换文字即可；

2.实现步骤：

  a.布局文件

   b.代码：

package com.test.first.tabs;import android.os.Bundle;import android.support.design.widget.TabLayout;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.support.v7.widget.Toolbar;import android.view.LayoutInflater;import android.view.View;import android.widget.ImageView;import android.widget.TextView;import com.test.first.R;/** * MainActivity * * this is the main page * * create by gaoxiaohui */public class TabsActivity extends FragmentActivity {    private final static String TAG = TabsActivity.class.getSimpleName();    SectionsPagerAdapter mSectionsPagerAdapter;    private Toolbar toolbar;    private ViewPager mViewPager;    private TextView tv_title;    private TabLayout tabLayout;    private String[] mTitles = new String[] { "我的设备", "历史记录", "个人中心" };    private int[] imageResId = new int[] { R.drawable.ic_menu_allfriends, R.drawable.ic_menu_emoticons,        R.drawable.ic_menu_friendslist };    private String POSITION = "position";    @Override    protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_tabs);    // setToolBarAndTitle(toolbar, R.string.app_name, false, tv_title);    toolbar = (Toolbar) findViewById(R.id.toolbar);    tv_title = (TextView) findViewById(R.id.tv_title);    mViewPager = (ViewPager) findViewById(R.id.container);    final TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);    mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());    mViewPager.setAdapter(mSectionsPagerAdapter);    tabLayout.setupWithViewPager(mViewPager);    setCustomTablayout(tabLayout);    }    /**     * set custom tab layout     *      * @param tabLayout     */    private void setCustomTablayout(final TabLayout tabLayout) {    for (int i = 0; i < tabLayout.getTabCount(); i++) {        TabLayout.Tab tab = tabLayout.getTabAt(i);        if (tab != null) {        boolean isSelected = tab.isSelected();        tab.setCustomView(mSectionsPagerAdapter.getTabView(i, isSelected));        }    }    tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {        @Override        public void onTabSelected(TabLayout.Tab tab) {        mViewPager.setCurrentItem(tab.getPosition());        }        @Override        public void onTabUnselected(TabLayout.Tab tab) {        }        @Override        public void onTabReselected(TabLayout.Tab tab) {        }    });    }    /**     * A {@link FragmentPagerAdapter} that returns a fragment corresponding to     * one of the sections/tabs/pages.     */    public class SectionsPagerAdapter extends FragmentPagerAdapter {    public SectionsPagerAdapter(FragmentManager fm) {        super(fm);    }    public View getTabView(int position, boolean isSelected) {        View v = LayoutInflater.from(TabsActivity.this).inflate(R.layout.custom_tab, null);        TextView tv = (TextView) v.findViewById(R.id.textView);        tv.setText(getPageTitle(position));        tv.setSelected(isSelected);        ImageView img = (ImageView) v.findViewById(R.id.imageView);        img.setImageResource(imageResId[position]);        img.setSelected(isSelected);        return v;    }    @Override    public Fragment getItem(int position) {        // getItem is called to instantiate the fragment for the given page.        // Return a PlaceholderFragment (defined as a static inner class        // below).        switch (position) {        case 0:        return BaseFragment.newInstance(getPageTitle(position));        case 1:        return BaseFragment.newInstance(getPageTitle(position));        case 2:        return BaseFragment.newInstance(getPageTitle(position));        }        return null;    }    @Override    public int getCount() {        // Show mTitles.length total pages.        return mTitles.length;    }    @Override    public CharSequence getPageTitle(int position) {        return mTitles[position];    }    }}

   c.自定义的tabview：

  d.BaseFragment:

/**  *  */ package com.test.first.tabs;  import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;  /**  * @author King  */ public class BaseFragment extends Fragment {      private static final String ARG_PAGE_TITLE = "page_title";      /**      * Returns a new instance of this fragment for the given section number.      */     public static BaseFragment newInstance(CharSequence pageTitle) {     BaseFragment fragment = new BaseFragment();     Bundle args = new Bundle();     args.putCharSequence(ARG_PAGE_TITLE, pageTitle);     fragment.setArguments(args);     return fragment;     }      public BaseFragment() {     }      @Override     public void onCreate(@Nullable Bundle savedInstanceState) {     //     super.onCreate(savedInstanceState);      }      @Override     @Nullable     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,         @Nullable Bundle savedInstanceState) {      return super.onCreateView(inflater, container, savedInstanceState);     }      @Override     public void onPause() {     //     super.onPause();      }  }

  e.相关的图标暂不考虑；

  现在来说一说问题：

  效果图1.，打开页面，默认选中第一个

  效果图2.，切换到第二个页签，两个都选中

  效果图3.，切换到第三个页签，第一第三个都选中

  效果图4.，切换会第一个页签，正常，并且以后都正常显示；

  好了，这就是我遇到的问题，希望大神给予帮助。。。

2016-4-18 6:40补充：

问题解决，代码如下：

/** * init the datas and views */private void initDataAndView() {    // Create the adapter that will return a fragment for each of the three    // primary sections of the activity.    mTabPagerAdapter = new TabPagerAdapter(getSupportFragmentManager(), mTitles );    // Set up the ViewPager with the sections adapter.    mViewPager = (ViewPager) findViewById(R.id.container);    mViewPager.setAdapter(mTabPagerAdapter);    mTabLayout = (TabLayout) findViewById(R.id.tabs);    mTabLayout.setupWithViewPager(mViewPager);    initTabIcons(mTabLayout);}private void initTabIcons(@NonNull TabLayout tabLayout) {    for (int i = 0; i < tabLayout.getTabCount(); i++) {        TabLayout.Tab tab = tabLayout.getTabAt(i);        if (tab != null) {            setTabIconByPosition(tab, i);        }    }}private void setTabIconByPosition(@NonNull TabLayout.Tab tab, int position) {    switch (position) {        case 0:            tab.setIcon(R.drawable.selector_tab_home);            break;        case 1:            tab.setIcon(R.drawable.selector_tab_msg);            break;        case 2:            tab.setIcon(R.drawable.selector_tab_my);            break;        default:            break;    }}

另外，发现的另一个问题是，tablayout高度，一直不是很nice，继续调试中。。。