垂直Android TabLayout不能垂直滚动

问题描述

但是问题是 TabLayout 元素未显示并垂直滚动.下面是我的代码，也许我错过了一些东西:

 < RelativeLayout xmlns:android ="http://schemas.android.com/apk/res/android"xmlns:app ="http://schemas.android.com/apk/res-auto"android:layout_width ="match_parent"android:layout_height ="match_parent">< android.support.v4.view.ViewPagerandroid:id ="@ + id/viewpager"android:layout_width ="match_parent"android:layout_height ="match_parent"android:layout_toRightOf ="@ + id/appBarLay"app:layout_behavior ="@ string/appbar_scrolling_view_behavior"/>< android.support.design.widget.AppBarLayoutandroid:id ="@ + id/appBarLay"android:layout_width ="wrap_content"android:layout_height ="match_parent"android:layout_alignParentLeft ="true"android:theme ="@ style/ThemeOverlay.AppCompat.Dark.ActionBar">< android.support.design.widget.TabLayoutandroid:id ="@ + id/tabs"android:layout_width ="60dp"android:layout_height ="match_parent"app:tabBackground ="@ drawable/tab_color_selector"app:tabGravity ="fill"app:tabMode ="scrollable"/></android.support.design.widget.AppBarLayout></RelativeLayout> 

解决方案

根据

But the problem is TabLayout element not shows and scrolling Vertically. There is my code below maybe I missed something:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_toRightOf="@+id/appBarLay"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLay"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="60dp"
            android:layout_height="match_parent"
            app:tabBackground="@drawable/tab_color_selector"
            app:tabGravity="fill"
            app:tabMode="scrollable" />
    </android.support.design.widget.AppBarLayout>
</RelativeLayout>

解决方案

As per the Android Documentation:

However, I recently implemented TabLayout in vertical orientation. Here's what I did.

1. Rotated TabLayout using android:rotation="90".
2. Since the TabLayout is rotated by 90, I used custom views with a rotation of -90 to cancel net rotation.
3. Programtically set width to match the height of the screen.
4. Programtically set translationX and translationY to align it to the right edge of the screen and center vertically.

XML

 <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="88dp"
                app:tabIndicatorHeight="4dp"
                app:tabIndicator="@drawable/category_tab_indicator"
                app:tabBackground="@drawable/category_tab_selector"
                app:tabTextColor="@color/black"
                app:tabSelectedTextColor="@color/meesho_primary_text"
                app:tabMode="scrollable"
                android:rotation="90"/>

Setup in Code

private fun setupTabs(tabLayout: TabLayout, tabItems: List<String>) {
        val contentHeight = activity!!.window.findViewById<View>(Window.ID_ANDROID_CONTENT).run { bottom - top }
        // 112dp is a deduction, 56dp for Toolbar and 56dp for BottomNavigationTab
        val tabLayoutWidth =  contentHeight - dpToPx(112)
        tabLayout.layoutParams.width = tabLayoutWidth
        // 44dp is basically half of assigned height[![enter image description here][2]][2]
        tabLayout.translationX = (tabLayoutWidth / 2 - dpToPx(44)).toFloat() * -1
        tabLayout.translationY = (tabLayoutWidth / 2 - dpToPx(44)).toFloat()
        tabItems.forEach { tabData ->
            tabLayout.newTab().also { tab ->
                val view = View.inflate(tabLayout.context, R.layout.item_category_tab, null)
                view.findViewById<TextView>(R.id.tv).text = tabData
                tab.customView = view
                tabLayout.addTab(tab)
            }
        }
    }

这篇关于垂直Android TabLayout不能垂直滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！