垂直Android TabLayout不垂直滚动

Question

我尝试像下图一样开发左侧 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.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>

Answer 1

根据 Android 文档：

TabLayout 提供水平布局来显示选项卡

但是，我最近在垂直方向实现了

TabLayout

。这就是我所做的。

1. 使用

   TabLayout

   旋转

   android:rotation="90"

   。
2. 由于

   TabLayout

   旋转了 90 度，我使用旋转 -90 度的自定义视图来取消净旋转。
3. 以编程方式设置宽度以匹配屏幕的高度。
4. 以编程方式设置translationX和translationY，将其与屏幕右边缘对齐并垂直居中。

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"/>

代码中设置

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)
            }
        }
    }

Answer 2

正如android文档中提到的，请参阅this

TabLayout 提供水平布局来显示选项卡。

这意味着您无法使用

TabLayout

显示垂直选项卡。但是，您可以使用

TabHost

来实现它。

查看这些喜欢的内容：

http://www.androidhive.info/2011/08/android-tab-layout-tutorial/

Android 中的垂直选项卡

Answer 3

这是使用 Jetpack Compose 实现的 Vertical-TabLayout 库

https://github.com/mohdDanishCode/MDVerticalTabLayout