垂直Android TabLayout不能垂直滚动

Question

垂直Android TabLayout不能垂直滚动

8

我试着开发左侧的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>

- Md Imran Choudhury

1

TabLayout 不适用于垂直滚动，它们只能水平滚动。我认为你应该寻找其他的东西。 - Priya Singhal

@PriyaSinghal，请问正确的方法是什么？我在GitHub上找到了一些库，但还有其他方法吗？ - Md Imran Choudhury

2

你可以使用固定宽度的ListView或RecyclerView，因为我认为你需要根据所选选项类型填充屏幕......另外，你正在尝试制作的UI是按照IOS指南制作的，如果可能，请让你的设计师按照Android指南为Android制作设计。 - Priya Singhal

@PriyaSinghal，你说得对，这是IOS设计指南，但没有其他办法。现在我正在遵循RecyclerView来制作它。谢谢。 - Md Imran Choudhury

2个回答

5

如在Android文档中所述，请参见此链接。

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

这意味着您不能使用TabLayout来显示垂直选项卡。然而，您可以使用TabHost来实现它。

请查看以下链接：

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

Android中的垂直选项卡

- Faraz

谢谢您，但是在您给出的示例中找不到左制表符。 - Md Imran Choudhury

Stackoverflow的答案中有垂直选项卡的示例。请查看此网址https://dev59.com/EWw05IYBdhLWcg3wZA8C#7268225 - Faraz

我已经尝试了这种类型的示例，主要问题是该选项卡不是动态的，并且视图看起来不像TabLayout。 - Md Imran Choudhury

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Embydextrous · Accepted Answer

根据Android文档，TabLayout提供一个水平布局以展示标签。

然而，我最近在垂直方向上实现了TabLayout。以下是我的做法：

使用android:rotation="90"旋转TabLayout。
由于TabLayout旋转了90度，我使用带有-90度旋转的自定义视图来取消净旋转。
编程将宽度设置为与屏幕高度匹配。
编程设置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)
            }
        }
    }