Android开发：TabLayout+Fragment+ViewPager实现总结

之前想实现一下就觉得这里面的关系好复杂，实现之后又理了理关系就觉得不是那么麻烦了…技术这个东西就是会者不难难者不会吧，为了把关系理的更透彻一些，就写这么一篇博客吧，用最简单的实现方式来实现这个东西，然后很感谢https://blog.csdn.net/wuyinlei/article/details/50571500这篇博客，虽然有一些地方有错误，但类和界面展示的顺序很舒服，能顺着一步步理到最后。

第一步：添加依赖

compile 'com.android.support:design:26.+'

这里根据每个人的依赖关系，后面的版本应该是不一样的，如果写的不对会直接报错。

我不太清楚最新版本是什么，为了图省事就暂时这么写了，按照AS给的提示这样写是不推荐的…

第二部：准备layout

需要三个以上的layout，其中一个是主界面用于加载“容器”（我自己起的名，Android素养不够..好多技术说不出实际的名字），一个用于做fragment的容器，并”被主界面加载”，剩下的为fragment容器装载用到的界面，相当于一个个tab页的内容

主界面

layout_tabs.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <fragment
            android:id="@+id/fragment_id"        
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            class="com.sailist.secondary.activitys.MainEntry"
            />

    </FrameLayout>

</LinearLayout>

“容器”

fragment_container.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@color/background_gray"
    >

    <android.support.design.widget.TabLayout
        android:id="@+id/f_tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/f_viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">
    </android.support.v4.view.ViewPager>
</LinearLayout>

其他界面

这里暂时用一个界面文件a.xml代替

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

   <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:text="hello world"/>
</LinearLayout>

第二步：类的实现

类则需要三个，有三个是用于界面加载的，可以认为这三个类分别对应上述的三个界面，一个Activity类（主界面），一个Fragment类（被主界面加载的容器类），剩下的同样为Fragment类（被之前的容器Fragment类加载）

以及还有一个Adapter类，用于在容器类中处理/管理各个fragment，由于官方提供的类是抽象类，所以需要我们实现并重写其中的两个抽象方法

Activity类

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_tabs);
        //主Activity加载主界面文件，主界面文件中的fragment通过class的路径找到相应的Fragment类
    }
}

Adapter类

这里我没有添加太多的变化，按照之前参照的那篇博客复制过来的。

FixedPagerAdapter.java

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.view.ViewGroup;

import java.util.List;

/**
 * Created by 若兰 on 2016/1/23.
 * 一个懂得了编程乐趣的小白，希望自己
 * 能够在这个道路上走的很远，也希望自己学习到的
 * 知识可以帮助更多的人,分享就是学习的一种乐趣
 * QQ:1069584784
 * csdn:http://blog.csdn.net/wuyinlei
 */

public class FixedPagerAdapter extends FragmentStatePagerAdapter {
    private String[] titles;

    /**
     * 设置标题
     *
     * @param titles
     */
    public void setTitles(String[] titles) {
        this.titles = titles;
    }

    private List<Fragment> mFragments;

    /**
     * 这个是在继承FragmentStatePagerAdapter会强制写入的
     *
     * @param fm
     */
    public FixedPagerAdapter(FragmentManager fm) {
        super(fm);
    }


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

    /**
     * Return the number of views available.
     * 返回一个可以用的view的个数
     *
     * @return
     */
    @Override
    public int getCount() {
        return mFragments.size();
    }

    /**
     * Create the page for the given position. The adapter is responsible for
     * adding the view to the container given here,
     * although it only must ensure this is done by the time it returns from finishUpdate(ViewGroup).
     * 这个同destroyItem（）相反，是对于给定的位置创建视图，适配器往container中添加
     *
     * @param container
     * @param position
     * @return
     */
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        Fragment fragment = null;
        fragment = (Fragment) super.instantiateItem(container,position);
        return fragment;
    }

    public List<Fragment> getFragments() {
        return mFragments;
    }

    public void setFragments(List<Fragment> fragments) {
        mFragments = fragments;
    }

    /**
     * 得到滑动页面的Title
     *
     * @param position
     * @return
     */
    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }
}

容器Fragment类

这个类是相对逻辑最复杂的一部分了，但同样，实现了后就基本不会再有改动了，套路比较死，这里大多也是参照着之前提到的博客

MainEntry.java

public class MainEntry extends Fragment {//这个类的用途是加载fragment_container.xml
    //分别对应`fragment_container.xml`中的两个组件
    private TabLayout tabLayout;
    private ViewPager viewPager;

    //用于装实际的一个个tab
    private List<Fragment> fragments;
    //标题
    private String[] titles = {"1","2","3"};
    //适配器
    private FixedPagerAdapter fixedPagerAdapter;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_container,null);
        tabLayout = view.findViewById(R.id.f_tablayout);
        viewPager = view.findViewById(R.id.f_viewpager);
        initData();
        return view;
    }

    private void initData() {
        fixedPagerAdapter = new FixedPagerAdapter(getChildFragmentManager());
        fixedPagerAdapter.setTitles(titles);//标题
        fragments = new ArrayList<>();
        for (int i = 0; i < titles.length; i++) {
            fragments.add(PageFragment.newInstance(titles[i]));
        }
        //把要显示的fragment集合传给adapter
        fixedPagerAdapter.setFragments(fragments);
        /**
         * 设置tablayout的模式
         *  模式一：MODE_SCROLLABLE  可以滑动，显示很多个tab中的几个展示出来
         *  模式二：MODE_FIXED Fixed tabs display all tabs concurrently   展示出所有的，适合三四个tab
         */
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
        //给viewPager设置适配器
        viewPager.setAdapter(fixedPagerAdapter);
        //TabLayout绑定ViewPager
        tabLayout.setupWithViewPager(viewPager);

    }

}

Fragment类

基本没什么变化，这里我稍微简化了一下

PageFragment.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.sailist.secondary.R;

public class PageFragment extends Fragment {//这个类的用途是加载a.xml

    private static final String KEY = "EXTRA";
    private View mView;

    private String title;

    /**
     * 在这里我们提供一个静态的方法来实例化PageFragment
     * 在这里我们传入一个参数，用来得到title，然后我们拿到这个title设置给内容
     *
     * @param extra
     * @return
     */
    public static PageFragment  newInstance(String extra){
        //利用bundle传值
        Bundle bundle = new Bundle();
        bundle.putString(KEY,extra);
        //实例化
        PageFragment fragment = new PageFragment();
        fragment.setArguments(bundle);
        return fragment;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        Bundle bundle = getArguments();
        if (bundle != null) {
            title = bundle.getString(KEY);
        }
        if (mView == null) {
            mView = inflater.inflate(R.layout.a, container, false);
        }
        return mView;
    } 
}

注意问题

容器中fragment必须加id，否则会报错

android Caused by: java.lang.IllegalArgumentException: Binary XML file line #7: Must specify unique