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联系到一起。最后展示一下效果图：