Пользовательское представление TabLayout ведет себя по-разному для разных размеров экрана - PullRequest
Новая
       67

Пользовательское представление TabLayout ведет себя по-разному для разных размеров экрана

0 голосов
/ 01 апреля 2020

По какой-то причине мой макет вкладки не реагирует одинаково для разных размеров экрана.

Вот как это выглядит на маленьком устройстве -

enter image description here

Но вот как это выглядит на большом устройстве -

enter image description here

Как видно, на большей вкладке макет вкладки не заполняет центр, как на маленьких.

что касается кодов -

У меня есть следующий TabLayout - 

 <com.google.android.material.tabs.TabLayout
        android:id="@+id/activity_dashboard_tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:tabUnboundedRipple="true"
        app:tabGravity="fill"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/activity_dashboard_toolbar"
        app:tabIndicator="@null"
        app:tabMode="auto" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/activity_dashboard_viewpager"
        android:layout_width="match_parent"
        android:layout_height="600dp"
        app:layout_constraintTop_toBottomOf="@+id/activity_dashboard_tablayout" />

со следующим настраиваемым представлением - 

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fontFamily="@font/roboto_medium"
    android:maxLines="1"
    android:paddingStart="10dp"
    android:paddingTop="5dp"
    android:paddingEnd="10dp"
    android:paddingBottom="5dp"
    android:textSize="18sp"
    tools:text="Chats">

</TextView>

и вот моя реализация - 

private fun initTabLayoutAndViewPager() {
        setSupportActionBar(toolbar)
        supportActionBar?.title = null
        toolbar.overflowIcon = ContextCompat.getDrawable(this,R.drawable.application_toolbar_overflow_resized_size)
        viewpager.adapter = DashboardViewPagerAdapter(this)
        TabLayoutMediator(tabLayout, viewpager, TabLayoutMediator.TabConfigurationStrategy { _, _ -> }).attach()

        val chatsView = View.inflate(this, R.layout.dashboard_activity_custom_tab, null)
        val callsView = View.inflate(this, R.layout.dashboard_activity_custom_tab, null)
        val walletView = View.inflate(this, R.layout.dashboard_activity_custom_tab, null)
        val marketView = View.inflate(this, R.layout.dashboard_activity_custom_tab, null)

        (chatsView as TextView).text = pageTitles[0]
        (callsView as TextView).text = pageTitles[1]
        (walletView as TextView).text = pageTitles[2]
        (marketView as TextView).text = pageTitles[3]

        chatTextView = chatsView
        callsTextView = callsView
        walletTextView = walletView
        marketTextView = marketView


        tabLayout.getTabAt(0)?.customView = chatTextView
        tabLayout.getTabAt(1)?.customView = callsTextView
        tabLayout.getTabAt(2)?.customView = walletTextView
        tabLayout.getTabAt(3)?.customView = marketTextView

        viewpager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {

            override fun onPageSelected(position: Int) {
                super.onPageSelected(position)
                when(position) {

                    DashboardTabs.CHATS.type -> {
                        ViewPagerUtils.setSelectedTab(chatTextView, callsView, walletView, marketView)
                    }
                    DashboardTabs.CALLS.type -> {
                        ViewPagerUtils.setSelectedTab(callsView, chatTextView, walletView, marketView)
                    }
                    DashboardTabs.WALLET.type -> {
                        ViewPagerUtils.setSelectedTab(walletView, callsView, chatTextView, marketView)
                    }
                    DashboardTabs.MARKET.type -> {
                        ViewPagerUtils.setSelectedTab(marketView, callsView, walletView, chatTextView)
                    }

                }
            }
        })
    }

Я не могу понять, что мне не хватает.

Я хочу, чтобы макет моей вкладки заполнял центр ширины независимо от того, насколько велико или мало устройство.

...