Android Fragments TabLayout中的选项卡不可单击

3qpi33ja  于 12个月前  发布在  Android
关注(0)|答案(3)|浏览(160)

我在Fragment文件中有一个简单的tabLayout,它是CoordinatorLayout。它的工作原理很好,当用户滑动,不同的片段显示。

问题是,标签没有响应点击,用户无法选择特定的标签,它有机会只刷

下面我将启动包含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>
pftdvrlh

pftdvrlh1#

您必须在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);
   }
});
eqfvzcg8

eqfvzcg82#

我终于找到答案了。在这种情况下,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" />
hk8txs48

hk8txs483#

setOnTabSelectedTab不推荐用于TabLayout,因此您可以使用以下代码

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
        }

    })

相关问题