Android中的Viewpager+Fragment+Tablayout

Android viewpager+Fragment和tablayout的使用

前言

我自己学习Viewpager的时候遇到许多坑，现在总结一下；

一、Viewpager +Fragment+ Tablayout

Viewpager现在的app基本上都离不开，主要的功能就是提供一个页面切换滑动的效果，同时也提供了预加载的功能。而tablayout就是结合viewpager使用的一个类似导航栏的标题栏布局。

二、使用步骤

1.添加AndroidX下Viewpager控件和添加XTablayout

在Android下的Gradle Scripts中build.gradle（Moudle：）引入XTablayout依赖

    implementation 'com.androidkun:XTabLayout:1.1.4'

在MainActivity里面 ，添加一个viewpager控件和XTablayout控件，大小可以自调，注意初学尽量在LinearLayout里面试，不容易报错。

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

    </com.androidkun.xtablayout.XTabLayout>


    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_1"
        android:layout_width="match_parent"
        android:layout_height="584dp" 
        android:layout_weight="13">


    </androidx.viewpager.widget.ViewPager>
</LinearLayout>

2.新建Fragment类和Fragment视图

先创建三个空白的layout，在创建三个类继承Fragment类

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

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

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

3.在MainActivity里面初始化控件

public class MainActivity extends AppCompatActivity {

    private ViewPager vp;
    private XTabLayout tb;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();//初始化控件
        setVp();//配置viewpager
    }


	//初试化控件
    public void initView(){
        vp = findViewById(R.id.vp_1);
        tb = findViewById(R.id.tb_1);
    }


}

---

4.创建FragmentPagerAdapter类

   public class TabFragmentPagerAdapter extends FragmentPagerAdapter{
        List<Fragment> mlist;
        ArrayList<String> tabList = new ArrayList<>();//标题tab列表
        public TabFragmentPagerAdapter(@NonNull FragmentManager fm,List<Fragment> list) {
            super(fm);
            this.mlist = list;
            //标题添加进列表
            tabList.add("首页");
            tabList.add("功能");
            tabList.add("我的");
            Log.d(TAG, "TabFragmentPagerAdapter: "+tabList);
        }

        @NonNull
        @Override
        public Fragment getItem(int position) {
            return mlist.get(position);//显示第几个页面
        }

        @Override
        public int getCount() {
            return mlist.size();//有几个页面
        }
        @Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            return tabList.get(position);
        }
    }

5.将viewpager和fragmentAdapter绑定

 public void setVp(){
        ArrayList aList = new ArrayList();
        //实例Fragment
        Fragment f1 = new Fragment1();
        Fragment f2 = new Fragment2();
        Fragment f3 = new Fragment3();
        //添加到list
        aList.add(f1);
        aList.add(f2);
        aList.add(f3);
        FragmentManager fm = getSupportFragmentManager();//fragment管理器
        TabFragmentPagerAdapter adapter = new TabFragmentPagerAdapter(fm,aList);//实例适配器
        //Viewpager绑定适配器
        vp.setAdapter(adapter);
        //设定预加载页数 默认是1
        vp.setOffscreenPageLimit(3);
        //tablayout绑定viewpager
        tb.setupWithViewPager(vp);
    }

在MainActivity里面调用setVp方法就行

显示结果

注意：

如果是在Fragment里面嵌套Viewpager+Fragment则要注意几个点：

1.初始化控件 findViewById 时要传入当前视图。

  public void initView(View v){

        vp2 = v.findViewById(R.id.vp_2);
        tb2 = v.findViewById(R.id.tb_2);
    }

2.在Fragment里面使用fragment管理器要是用子管理器：

FragmentManager fm = getChildFragmentManager();

嵌套之后的效果图