TabLayout与ViewPager的联动

今天写一下TabLayout与ViewPager的联动效果，以平常我们写的ViewPager与按钮的联动基本上是一样的，相比较下，更显简单。

首先，先导入依赖

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

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

这里导入依赖要如意，我刚开始在网上找了一个依赖，最后报错了，说版本号不匹配，所以大家导入依赖的时候，都注意点！

接下来，就直接上代码了：

先看一下布局文件：activity_main.xml:

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

与Viewpager的联动效果，肯定是少不了Fragment的，所以，TabLayout中有几个按钮，就应该有几个fragment，当然，导航栏内容过多，可以建一个fragment，重复利用，今天我整的比较少，所以，就不重复使用了，

接下来，我们建4个fragment（需要几个建几个）：分别为：fragment1、fragment2、fragment3、fragment4，这里我就不粘贴代码了，这个还是比较简单的。

4个fragment建完之后，相应的，接着建4个fragment.class

这里由于基本上都是一样的，我就展示一个就行了，剩下的3个，就可以自己看着整了；

fragment1.class：

package com.bwie.test.tablayouttext;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;/** * Created by 笔片 on 2017/10/25. */public class fragment1 extends Fragment{    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment1,container,false);        return view;    }}

主要还是对应上就可以了，不要粗心写岔了；

有了Viewpager，当然就应该有对应的Adapter了。

ViewPagerAdapter：

package adapter;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import java.util.ArrayList;import java.util.List;/** * Created by 笔片 on 2017/10/25. */public class ViewPagerAdapter extends FragmentPagerAdapter{    ArrayList<Fragment> list;    private List<String> list_Title;    public ViewPagerAdapter(FragmentManager fm, ArrayList<Fragment> list, List<String> list_Title) {        super(fm);        this.list = list;        this.list_Title = list_Title;    }    public ViewPagerAdapter(FragmentManager fm) {        super(fm);    }    @Override    public Fragment getItem(int position) {        return list.get(position);    }    @Override    public int getCount() {        return list.size();    }    //重写这个方法，将设置每个Tab的标题    //此方法用来显示tab上的名字    @Override    public CharSequence getPageTitle(int position) {        return list_Title.get(position % list_Title.size());    }}

接下来，就剩下MainActivity了：

package com.bwie.test.yuekaotext;import android.support.design.widget.TabLayout;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import java.util.ArrayList;import adapter.ViewPagerAdapter;import fragments.fragment1;import fragments.fragment2;import fragments.fragment3;import fragments.fragment4;public class MainActivity extends AppCompatActivity {    TabLayout tabLayout;    ViewPager viewpager;    ArrayList<Fragment> list;    ViewPagerAdapter adapter;    FragmentManager manager;    fragment1 f1;    fragment2 f2;    fragment3 f3;    fragment4 f4;    private ArrayList<String> list_title;    @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);        manager = getSupportFragmentManager();        list = new ArrayList<Fragment>();        list_title = new ArrayList<>();        f1 = new fragment1();        f2 = new fragment2();        f3 = new fragment3();        f4 = new fragment4();        list.add(f1);        list.add(f2);        list.add(f3);        list.add(f4);        list_title = new ArrayList<>();        list_title.add("最新日报");        list_title.add("专栏");        list_title.add("热门");        list_title.add("主题日报");        //设置TabLayout的模式        tabLayout.setTabMode(TabLayout.MODE_FIXED);        //为TabLayout添加tab名称        tabLayout.addTab(tabLayout.newTab().setText(list_title.get(0)));        tabLayout.addTab(tabLayout.newTab().setText(list_title.get(1)));        tabLayout.addTab(tabLayout.newTab().setText(list_title.get(2)));        tabLayout.addTab(tabLayout.newTab().setText(list_title.get(3)));        adapter = new ViewPagerAdapter(manager,list,list_title);        viewpager.setAdapter(adapter);        //绑定        tabLayout.setupWithViewPager(viewpager);    }}

最重要的还是最后一句了，

tabLayout.setupWithViewPager(viewpager);

将TabLayout与Viewpager联系到一起。最后展示一下效果图：