TabLayout 中的选项卡不可点击

Posted 2023-04-18

【中文标题】TabLayout 中的选项卡不可点击

【英文标题】：Tabs in TabLayout aren't available for click

【发布时间】：2021-04-13 04:02:42

【问题描述】：

我在 Fragment 文件中有一个简单的 tabLayout，它是 CoordinatorLayout。 效果很好，当用户滑动时，会显示不同的 Fragment。

问题是，标签对点击没有响应，用户无法选择特定标签，它只能滑动

下面我启动了包含 XML、ViewPager2 适配器和 Fragment.java 的文件，在这些文件中我实现了滑动机制。

对于全局，我在 MainActivity 中实现了工具栏，这就是为什么在 Fragment 的 TabLayout 中我使用margin top 50dp。 我还午餐它的代码。

 <androidx.coordinatorlayout.widget.CoordinatorLayout 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:id="@+id/coordinatorLayout"
    android:layout_
    android:layout_
    tools:context=".MainFragment">

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

        android:id="@+id/tab_layout"
        android:layout_
        android:layout_
        style="@style/Widget.MyApp.TabLayout"
        android:layout_marginTop="56dp"
        android:layout_below="@+id/toolbar"
        app:tabMode="fixed" />
 
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_
        android:layout_
      app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"/>


    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_
        android:layout_
        android:layout_gravity="bottom|end|right">

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/minusFab"
            android:visibility="invisible"
            android:layout_
            android:layout_
            android:src="@drawable/ic_remove_circle_outline_24px"
            app:layout_constraintEnd_toEndOf="@id/plusFab"
            app:layout_constraintTop_toTopOf="parent" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/plusFab"
            android:layout_
            android:layout_
            android:visibility="invisible"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="24dp"
            android:src="@drawable/ic_add_circle_outline_24px"
            app:layout_constraintBottom_toTopOf="@+id/mainFab"
            app:layout_constraintEnd_toEndOf="@+id/mainFab"
            app:layout_constraintTop_toBottomOf="@+id/minusFab" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/mainFab"
            android:layout_
            android:layout_
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="16dp"

            android:src="@drawable/ic_expand_less_24px"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

我已经配置了所有负责标签逻辑的机制：

    public class ViewPagerAdapter extends FragmentStateAdapter 


    public ViewPagerAdapter(@NonNull FragmentActivity fragmentActivity) 
        super(fragmentActivity);
    

    @NonNull
    @Override
    public Fragment createFragment(int position) 
        switch (position)
        
            case 0: return new FirstFragment();
            case 1: return new SecondFragment();
            case 2: return new ThirdFragment();
            default:
                return  null;
        

    
    @Override
    public int getItemCount() 
        return 3;
    

以及在 Fragment.Java 中的实现

public class MainFragment extends Fragment 

public MainFragment() 
    // Required empty public constructor


@Override
public void onCreate(Bundle savedInstanceState) 
    super.onCreate(savedInstanceState);



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


    View view = inflater.inflate(R.layout.fragment_main, container, false);


    ViewPager2 viewPager2 = view.findViewById(R.id.viewPager);
    viewPager2.setAdapter(new ViewPagerAdapter(getActivity()));
    TabLayout tabLayout = view.findViewById(R.id.tab_layout);
    TabLayoutMediator tabLayoutMediator = new TabLayoutMediator(
            tabLayout, viewPager2, new TabLayoutMediator.TabConfigurationStrategy() 
        @Override
        public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) 
                switch (position)
                    case 0: tab.setText("First");
                        break;
                    case 1: tab.setText("Second");
                        break;
                    case 2: tab.setText("Third");
                        break;
                
        
    
    );
    tabLayoutMediator.attach();
    // Inflate the layout for this fragment
    return view;

MainActivity 布局：

   <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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_
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_
        android:layout_
        android:theme="@style/Theme.FragmentsWithTabs.AppBarOverlay"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_
            android:layout_
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/Theme.FragmentsWithTabs.PopupOverlay">

            <com.google.android.material.switchmaterial.SwitchMaterial
                android:id="@+id/color_mode_switch"
                android:layout_
                android:layout_
                android:layout_gravity="center|end"
                android:text="Switch here"
                android:textAppearance="@style/TextAppearance.AppCompat.Small" />
        </androidx.appcompat.widget.Toolbar>
    </com.google.android.material.appbar.AppBarLayout>

    <fragment
        android:id="@+id/fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_
        android:layout_
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph"
        tools:layout_editor_absoluteX="127dp"
        tools:layout_editor_absoluteY="297dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

【参考方案1】：

您必须在 tablayout 上添加侦听器才能侦听选项卡选择事件。喜欢，

tabLayout.setupWithViewPager(viewPager);
tabLayout.setOnTabSelectedListener(
   new TabLayout.ViewPagerOnTabSelectedListener(viewPager) 
   @Override
   public void onTabSelected(TabLayout.Tab tab) 
      //here you can write code to change page of viewpager based on tab id.
      // like, viewpager.setCurrentItem(0);
   
);

【参考方案2】：

我终于找到了答案。在这种情况下，ViewPager2 在所有屏幕上展开，因此在 TabLayout 上的点击重叠 :)

所以解决方案很简单，现在 MainFragment 的 ViewPager2 代码如下所示：

 <androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_
    android:layout_
    android:layout_gravity="bottom"
    app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />