tablayout滑动效果使用

项目中会经常用到滑动的导航栏，例如今日头条中，对于的条目可以先隐藏，滑动后会显示出来。TabLayout的控件以实现类似效果。刚好最近做项目中使用到过，便趁着空闲时间整理下，方便自己以后用到就可以直接拿来使用了。

添加引用：注意必须和v7包版本一致

implementation 'com.android.support:appcompat-v7:26.1.0'
implementation 'com.android.support:design:26.1.0'

创建布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.example.tab.MainActivity"
    android:orientation="vertical">
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#FFF2F2F2"/>
    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        app:tabIndicatorColor="#FF108DE8"
        app:tabPadding="10dp"
        app:tabMode="scrollable"
        app:tabTextColor="#FFAEAEAE"
        app:tabSelectedTextColor="#FF108DE8"
        android:id="@+id/tabLayout"
        android:background="#FFFDFDFE"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp">

    </android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


</LinearLayout>

注意tablayout控件几条属性：

app:tabTextColor="#FFAEAEAE"  //默认文字颜色

app:tabSelectedTextColor="#FF108DE8" //选择后文字颜色

app:tabIndicatorColor="#FF108DE8"  //下方滚动条颜色

且改控件有两种模式，一种是一般模式 

app:tabMode="fixed"

一种是滚动模式

app:tabMode="scrollable"

我们选择滚动模式，这样会有滑动过程中的显示隐藏效果

主要代码如下：

public class MainActivity extends AppCompatActivity {
    private TabLayout tablayout;
    ViewPager viewpager;
    FragmentManager manager;
    private FragmentTransaction transtion;
    private ArrayList<String> titles;
    private List<Fragment> list;
    private MyFragmentPageAdapter adapter;

    /**
     * fragment
     */
   FragmentOne fragmentOne;
   FragmentTwo fragmentTwo;
   FragmentThree fragmentThree;
   FragmentFour fragmentFour;
   FragmentFive fragmentFive;
   FragmentSix fragmentSix;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tablayout= (TabLayout) findViewById(R.id.tabLayout);
        viewpager= (ViewPager) findViewById(R.id.viewpager);
        initData();//初始化数据
        setListener();//点击监听
    }






    private void setListener() {

    }

    private void initData() {

        //将各个标题装在titles里面
        titles = new ArrayList<String>();
        titles.add("全部");
        titles.add("华语");
        titles.add("欧美");
        titles.add("日韩");
        titles.add("清新");
        titles.add("其他");

        //将两个Fragment装进集合中
        list = new ArrayList<Fragment>();
        fragmentOne = new FragmentOne();
        fragmentTwo = new FragmentTwo();
        fragmentThree=new FragmentThree();
        fragmentFour=new FragmentFour();
        fragmentFive=new FragmentFive();
        fragmentSix=new FragmentSix();
        list.add(fragmentOne);
        list.add(fragmentTwo);
        list.add(fragmentThree);
        list.add(fragmentFour);
        list.add(fragmentFive);
        list.add(fragmentSix);

        //使用manager和transtion提交事务后为viewpager设置一个适配器
        manager = getSupportFragmentManager();
        adapter = new MyFragmentPageAdapter(manager);
        transtion = manager.beginTransaction();
        transtion.commit();
        viewpager.setAdapter(adapter);

        // tablayout.addTab可以将标题添加进Tab里面，true表示默认选中
        tablayout.addTab(tablayout.newTab().setText(titles.get(0)), true);
        tablayout.addTab(tablayout.newTab().setText(titles.get(1)), false);
        tablayout.addTab(tablayout.newTab().setText(titles.get(2)), false);
        tablayout.addTab(tablayout.newTab().setText(titles.get(3)), false);
        tablayout.addTab(tablayout.newTab().setText(titles.get(4)), false);
        tablayout.addTab(tablayout.newTab().setText(titles.get(5)), false);

        //这两个方法是将Tablayout和Viewpager联合起来
        tablayout.setupWithViewPager(viewpager);
        //tablayout.setTabsFromPagerAdapter(adapter);

    }


    private class MyFragmentPageAdapter extends FragmentPagerAdapter {


        public MyFragmentPageAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return list.get(position);
        }

        @Override
        public int getCount() {
            return list.size();
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return titles.get(position);
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            super.destroyItem(container, position, object);
        }
    }
}

这样就能实现效果

demo地址：http://download.youkuaiyun.com/download/fugang1230/10222327