Android之TabLayout+ViewPager+Fragment实现标题栏与页面联动

1. TabLayout组件的使用
   
2. 主界面activity_main.xml文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    
    
    
    
    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@android:color/holo_blue_dark"
        app:tabSelectedTextColor="@android:color/holo_blue_dark"
        app:tabTextColor="@android:color/background_dark">
    android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    android.support.v4.view.ViewPager>  
LinearLayout>

1. 定义四个Fragment
   1) Fragment1.java

package com.example.zhaoxin.commonbaseadapter.fragment;

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;
import android.widget.ListView;

import com.example.zhaoxin.commonbaseadapter.R;
import com.example.zhaoxin.commonbaseadapter.adapter.MyListViewAdapter;
import com.example.zhaoxin.commonbaseadapter.entity.Book;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.Unbinder;

/**
 * Created by zhaoxin on 17/11/24.
 *
 */

public class Fragment1 extends Fragment {

    private List bookList;// 图书集合
    private Unbinder unbinder;// 解绑

    @BindView(R.id.list)
    ListView list;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment1, null);
        unbinder = ButterKnife.bind(this, view);
        initListView();
        return view;
    }

    /**
     * 初始化ListView
     */
    private void initListView() {
        // 获取图书集合对象
        bookList = new ArrayList<>();
        // 循环添加集合数据
        for (int i = 0; i < 10; i++) {
            Book book = new Book("Android", "45");
            bookList.add(book);
        }
        // 为组件设置适配器展示数据
        list.setAdapter(new MyListViewAdapter(getActivity(), R.layout.item_list, bookList));
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        unbinder.unbind();
    }
}

2) Fragment2.java

package com.example.zhaoxin.commonbaseadapter.fragment;

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;

import com.example.zhaoxin.commonbaseadapter.R;

/**
 * Created by zhaoxin on 17/11/24.
 */

public class Fragment2 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment2, null);
        return view;
    }
}

3) Fragment3.java

package com.example.zhaoxin.commonbaseadapter.fragment;

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;

import com.example.zhaoxin.commonbaseadapter.R;

/**
 * Created by zhaoxin on 17/11/24.
 */

public class Fragment3 extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment3, null);
        return view;
    }
}

4) Fragment4.java

package com.example.zhaoxin.commonbaseadapter.fragment;

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;

import com.example.zhaoxin.commonbaseadapter.R;

/**
 * Created by zhaoxin on 17/11/24.
 */

public class Fragment4 extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment4, null);
        return view;
    }
}

1. 四个Fragment对应的xml文件
   1) fragment1.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    ListView>

LinearLayout>

2) fragment2.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="内容二"/>

LinearLayout>

3) fragment3.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="内容三"/>

LinearLayout>

4) fragment4.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="内容四"/>

LinearLayout>

1. 实现联动
   1) MainActivity.java

package com.example.zhaoxin.commonbaseadapter;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.widget.ListView;

import com.example.zhaoxin.commonbaseadapter.adapter.MyFragmentPagerAdapter;
import com.example.zhaoxin.commonbaseadapter.adapter.MyListViewAdapter;
import com.example.zhaoxin.commonbaseadapter.entity.Book;
import com.example.zhaoxin.commonbaseadapter.fragment.Fragment1;
import com.example.zhaoxin.commonbaseadapter.fragment.Fragment2;
import com.example.zhaoxin.commonbaseadapter.fragment.Fragment3;
import com.example.zhaoxin.commonbaseadapter.fragment.Fragment4;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.Unbinder;

public class MainActivity extends AppCompatActivity {

    private List titleList;// 标题集合
    private List fragmentList;// 碎片集合
    private MyFragmentPagerAdapter mMyFragmentPagerAdapter;// viewPager适配器

    private Unbinder unbinder;// 解绑


    @BindView(R.id.tab_layout)
    TabLayout tab_layout;// 标题栏
    @BindView(R.id.view_pager)
    ViewPager view_pager;// 可滑动页面

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

        unbinder = ButterKnife.bind(this);
        initTabLayout();
    }

    /**
     * 初始化标题栏
     */
    private void initTabLayout() {

        // 初始化标题集合
        titleList = new ArrayList<>();
        titleList.add("标题一");
        titleList.add("标题二");
        titleList.add("标题三");
        titleList.add("标题四");

        // 初始化fragment集合
        fragmentList = new ArrayList<>();
        fragmentList.add(new Fragment1());
        fragmentList.add(new Fragment2());
        fragmentList.add(new Fragment3());
        fragmentList.add(new Fragment4());

        // 添加标题
        tab_layout.addTab(tab_layout.newTab().setText(titleList.get(0)));
        tab_layout.addTab(tab_layout.newTab().setText(titleList.get(1)));
        tab_layout.addTab(tab_layout.newTab().setText(titleList.get(2)));
        tab_layout.addTab(tab_layout.newTab().setText(titleList.get(3)));

        // 设置viewPager适配器
        mMyFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), titleList, fragmentList);
        view_pager.setAdapter(mMyFragmentPagerAdapter);

        // 绑定viewPager与其联动
        tab_layout.setupWithViewPager(view_pager);

        // 设置打开应用时当前viewPager是第一个
        view_pager.setCurrentItem(0);

        // tabLayout添加标题选择事件
        tab_layout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {

                switch (tab.getPosition()){
                    case 0:
                        fragmentList.get(0);
                        break;
                    case 1:
                        fragmentList.get(1);
                        break;
                    case 2:
                        fragmentList.get(2);
                        break;
                    case 3:
                        fragmentList.get(3);
                        break;
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                // 未选中tab
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                // 再次选中tab
            }
        });
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        unbinder.unbind();
    }
}

2) MyFragmentPagerAdapter.java

package com.example.zhaoxin.commonbaseadapter.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**
 * Created by zhaoxin on 17/11/24.
 */

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    private List mTitleList;
    private List mFragmentList;

    public MyFragmentPagerAdapter(FragmentManager fm, List titleList, List fragmentList) {
        super(fm);
        this.mTitleList = titleList;
        this.mFragmentList = fragmentList;
    }

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

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

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

至此，就完成了标题栏与页面的联动，其中ListView的适配器在上一篇博客中有完整的代码。