简体   繁体   中英

ViewPager2 misses the tablayout indicator

The following problem occurred with me after migration from viewPager to viewPager2 - when I open my app, the tablyout indicator is missing by default. But if you make some swiping, the indicator will appears, Looks weird. because I made everything correct: There are my simplified Kotlin-code:

 class ScheduleWeekFragment : ScheduleBaseFragment<ScheduleWeekViewModel>(ScheduleWeekViewModel::class) {
    private val viewBinding by viewBinding(FragmentWeekBinding::bind)
    private var titles: Array<String>? = null

    // listeners
    private val viewPagerListener = object : ViewPager2.OnPageChangeCallback() {
        override fun onPageSelected(position: Int) {
            viewModel.updateDayTitle(position)
        }
    }

    // observers
    private val selectedDayObserver = Observer<Int> {
        viewBinding.viewPager2.currentItem = it
    }

    // lifecycle
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        titles = context?.resources?.getStringArray(R.array.schedule_fragment_day_abbreviations)
    }

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? =
            inflater.inflate(R.layout.fragment_week, container, false)

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        viewBinding.viewPager2.adapter = ScheduleViewPagerAdapter(this)
        viewBinding.viewPager2.setPageTransformer(ZoomOutPageTransformer)
        TabLayoutMediator(viewBinding.tabLayout, viewBinding.viewPager2) { tab, position ->
            tab.text = titles?.getOrNull(position)
        }.attach()

        // observers
        viewModel.viewPagerPosition.observe(viewLifecycleOwner, selectedDayObserver)

        // listeners
        viewBinding.viewPager2.registerOnPageChangeCallback(viewPagerListener)
    }

    override fun onDestroyView() {
        viewBinding.viewPager2.unregisterOnPageChangeCallback(viewPagerListener)
        super.onDestroyView()
    }
}

And there is my simplified xml-code:

<?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:id="@+id/fragmentWeek"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        style="@style/TabLayout1"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:verticalScrollbarPosition="left"
        app:layout_constraintEnd_toEndOf="@+id/viewPager2"
        app:layout_constraintStart_toStartOf="@+id/viewPager2"
        app:layout_constraintTop_toBottomOf="@+id/scheduleToolbar"
        app:tabGravity="start"
        app:tabMode="scrollable"
        android:background="@color/white"
        tools:ignore="SpeakableTextPresentCheck" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:background="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tabLayout"
        tools:ignore="SpeakableTextPresentCheck" />
    </androidx.constraintlayout.widget.ConstraintLayout>

The problem was inside my observer:

private val selectedDayObserver = Observer<Int> {
    // viewBinding.viewPager2.currentItem = it            // wrong!
    viewBinding.viewPager2.setCurrentItem(it, false)      // correct!
}

I didn't find why in the official docs, but difference exists: the first variant works good with viewpager1, but for viewpager2, be careful and use the second complex variant.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM