对 ViewPager 的多个选项卡布局使用单个片段类

Posted 2023-04-18

技术标签:

【中文标题】对 ViewPager 的多个选项卡布局使用单个片段类【英文标题】：Use Single Fragment Class for Multiple tabs layouts of ViewPager 【发布时间】：2020-08-31 13:46:37 【问题描述】：

在 TabsDemoApp 中，我尝试使用一个 Fragment 并在三个 XML 布局之间切换，我看到了这些问题

"How to know which tab is active in onCreateView function?"

"Use Single Fragment in Multiple tabs of ViewPager"

我试图理解它并将其应用到这个例子中

这是完整的代码

TabLayoutAdapter

package com.example.tabsdemoapp;

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

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentStatePagerAdapter;

public class TabLayoutAdapter extends FragmentStatePagerAdapter 

    int mNumOfTabs;

    public TabLayoutAdapter(@NonNull FragmentManager fm, int mNumOfTabs) 
        super(fm, mNumOfTabs);
        this.mNumOfTabs = mNumOfTabs;
    


    @NonNull
    @Override
    public Fragment getItem(int position) 
        return TabFragment.newInstance(position);
    

    @Override
    public int getCount() 
        return mNumOfTabs;

TabFragment

package com.example.tabsdemoapp;

import android.content.Context;
import android.os.Bundle;
import android.provider.SyncStateContract;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class TabFragment extends Fragment 

    private static String ARG_POSITION = "position";
    private static int fragmentId = 0;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater,
                             @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) 

        if(container.getId() == R.id.tab1) 
            return inflater.inflate(R.layout.tab1, container, false);
        else if(container.getId() == R.id.tab2)
            return inflater.inflate(R.layout.tab2, container, false);
        else 
            return inflater.inflate(R.layout.tab3, container, false);
        
    


    public static TabFragment newInstance(int position) 
        TabFragment fragment = new TabFragment();
        Bundle bundle = new Bundle();
        bundle.putInt(ARG_POSITION, position);
        fragment.setArguments(bundle);
        return fragment;
    

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        fragmentId = getArguments().getInt(ARG_POSITION,fragmentId);
    

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) 
        super.onViewCreated(view, savedInstanceState);
        assert getTargetFragment() != null;
        getChildFragmentManager().beginTransaction().
                replace(R.id.container, getTargetFragment()).
                commit();
    

    @Override
    public void onAttach(@NonNull Context context) 
        super.onAttach(context);
    

    @Override
    public void onDetach() 
        super.onDetach();

main_activity.xml

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_
    android:orientation="vertical"
    android:id="@+id/rootView"
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/myTabLayout"
        android:layout_
        android:layout_
        tools:layout_editor_absoluteX="1dp"
        tools:layout_editor_absoluteY="186dp">

    </com.google.android.material.tabs.TabLayout>

    <androidx.viewpager.widget.ViewPager
        android:layout_
        android:layout_
        android:id="@+id/viewPager"
        app:elevation="5dp"
        >

    </androidx.viewpager.widget.ViewPager>

</LinearLayout>

MainActivity 类

    public class MainActivity extends AppCompatActivity 

    TabLayout tabLayout;
    ViewPager viewPager;
    TabLayoutAdapter adapter;

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

        tabLayout = findViewById(R.id.myTabLayout);
        viewPager = findViewById(R.id.viewPager);

        tabLayout.setupWithViewPager(viewPager);
        adapter = new TabLayoutAdapter(getSupportFragmentManager(), tabLayout.getTabCount());
        viewPager.setAdapter(adapter);

        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() 
            @Override
            public void onTabSelected(TabLayout.Tab tab) 
                switch (tab.getPosition()) 
                    case 0:
                        viewPager.setCurrentItem(tab.getPosition());
                        break;
                    case 1:
                        viewPager.setCurrentItem(tab.getPosition());
                        break;
                    case 2:
                        viewPager.setCurrentItem(tab.getPosition());
                        break;
                    default:
                        viewPager.setCurrentItem(tab.getPosition());
                
            

            @Override
            public void onTabUnselected(TabLayout.Tab tab) 

            

            @Override
            public void onTabReselected(TabLayout.Tab tab) 

            
        );

每个选项卡都有一个三个 XML，tab1、tab2、tab3

tab1.xml

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    android:id="@+id/tab1"
    android:orientation="vertical">

    <TextView
        android:layout_
        android:layout_
        android:layout_centerInParent="true"
        android:text="Tab one"
        android:textAppearance="?android:attr/textAppearanceLarge"/>

</RelativeLayout>

tab2.xml

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    android:id="@+id/tab2"
    android:orientation="vertical">

    <TextView

        android:layout_
        android:layout_
        android:layout_centerInParent="true"
        android:text="Tab two"
        android:textAppearance="?android:attr/textAppearanceLarge"/>

</RelativeLayout>

tab3.xml

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    android:orientation="vertical">

    <TextView
        android:id="@+id/tab3"
        android:layout_
        android:layout_
        android:layout_centerInParent="true"
        android:text="Tab three"
        android:textAppearance="?android:attr/textAppearanceLarge"/>

</RelativeLayout>

运行应用程序后，我看到一个空白页面，没有 ViewPager 和 TabLayout

【问题讨论】：

【参考方案1】：

TabLayoutAdapter

getPageTitle

    @Override
    public CharSequence getPageTitle(int position) 
        return "Tab " + position;

container

onCreateView

"@+id/viewPager"

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater,
                             @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) 

        if(container.getId() == R.id.tab1) 
            return inflater.inflate(R.layout.tab1, container, false);
        else if(container.getId() == R.id.tab2)
            return inflater.inflate(R.layout.tab2, container, false);
        else 
            return inflater.inflate(R.layout.tab3, container, false);

将此代码更改为

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater,
                             @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) 

        if(fragmentId == 0) 
            return inflater.inflate(R.layout.tab1, container, false);
        else if(fragmentId == 1)
            return inflater.inflate(R.layout.tab2, container, false);
        else 
            return inflater.inflate(R.layout.tab3, container, false);

tabLayout.getTabCount()

TabLayoutAdapter

 adapter = new TabLayoutAdapter(getSupportFragmentManager(), 3);

【讨论】：

感谢您的回答，在进行这些编辑后，我得到了一个例外

java.lang.NullPointerException: Attempt to invoke virtual method 'java.lang.Class java.lang.Object.getClass()' on a null object reference

在这一行 replace(R.id.container, getTargetFragment()).

以上是关于对 ViewPager 的多个选项卡布局使用单个片段类的主要内容，如果未能解决你的问题，请参考以下文章

如何在将 Tablayout 与 viewpager 一起使用时从另一个片段调用 AsyncTask？

使用Android ViewPager2在回收器视图中滚动到底部时自动更改选项卡项

使用带有选项卡布局的自定义视图时无法从选项卡中删除填充

选项卡布局不显示片段

带有滑动视图的选项卡布局

如何使用 Tablayout 清除 Viewpager 的缓存内存