TabLayout+ViewPager实现选项卡动态滑动效果

1. 前提准备

今天回顾了下TabLayout与ViewPager的联合使用，顺便写个demo来加深下理解。首先要明确TabLayout是design下的，并非系统原来的widget下的。所以首先在app下的build.gradle的dependencies闭包中加入如下引用：

compile 'com.android.support:design:26.0.0-alpha1'

2. 主界面的布局

其中，android.support.design.widget.TabLayout标签中有个app:tabMode属性，值为scrollable表示可滑动；fixed表示固定不可滑动。默认是不可滑动。

3. Java代码中

public class MainActivity extends AppCompatActivity {
    private ViewPager mViewPager;
    private TabLayout mTabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mTabLayout = (TabLayout) findViewById(R.id.tablayout);
        init();
}

    private void init() {

        //初始化标题数据
        List titles = new ArrayList<>();
        titles.add("新闻");
        titles.add("视频");
        titles.add("音乐");

        for (int i = 0; i < titles.size(); i++) {
            mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(i)));
        }

        //初始化Fragment数据
        List fragments = new ArrayList<>();
        fragments.add(new NewsListFragment());
        fragments.add(new VideoListFragment());
        fragments.add(new MusicListFragment());

        //给ViewPager设置适配器
        mViewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager(),fragments,titles));
        //将TabLayout与ViewPager关联起来
        mTabLayout.setupWithViewPager(mViewPager);
    }
}

其中，初始化了3个标题，并创建了相应的TabLayout和Fragment,给ViewPager设置了适配器，并将TabLayout与ViewPager关联起来。

4. 条目Fragment

为了完善效果演示，对每个Fragment进行了简单的初始化：

public class VideoListFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_video_list, container, false);
    }
}

注：VideoListFragment继承的Fragment是android.support.v4.app.Fragment包下的。

VideoListFragment的布局如下：

NewsListFragment和MusicListFragment()与VideoListFragment类似，这里就不重复叙述。

5. Demo运行效果图如下所示：