TabLayout 中的选项卡不可点击

问题描述 投票：0回答：3

我在 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_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainFragment">

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

        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        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_width="match_parent"
        android:layout_height="match_parent"
      app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"/>


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

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/minusFab"
            android:visibility="invisible"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            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_width="wrap_content"
            android:layout_height="wrap_content"
            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_width="wrap_content"
            android:layout_height="wrap_content"
            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;
}

}

主要活动布局：

   <?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_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

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

            <com.google.android.material.switchmaterial.SwitchMaterial
                android:id="@+id/color_mode_switch"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                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_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph"
        tools:layout_editor_absoluteX="127dp"
        tools:layout_editor_absoluteY="297dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
android android-fragments android-viewpager android-tablayout
3个回答
2
投票

您必须在选项卡布局上添加监听器来监听选项卡选择事件。喜欢，

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);
   }
});
1
投票

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

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

 <androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="629dp"
    android:layout_gravity="bottom"
    app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />
0
投票

TabLayout 已弃用 setOnTabSelectedListener，因此您可以使用以下代码

     tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
        override fun onTabSelected(tab: TabLayout.Tab?) {
           // add your code
        }

        override fun onTabUnselected(tab: TabLayout.Tab?) {
           // add your code
        }

        override fun onTabReselected(tab: TabLayout.Tab?) {
           // add your code
        }

    })
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.