Vertical Android TabLayout 不垂直滚动答案

【问题标题】：Vertical Android TabLayout not scroll verticallyVertical Android TabLayout 不垂直滚动
【发布时间】：2017-01-02 07:04:48
【问题描述】：

我尝试像这张图片一样开发left 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>

【问题讨论】：

Tablayout 不适用于垂直滚动，它们仅用于水平滚动。我觉得你应该看看别的。
@PriyaSinghal ，什么是正确的方法请建议我。我在 GitHub 上找到了一些库，但还有其他方法吗？
使用可以使用具有固定宽度的 ListView 或 RecyclerView，因为我认为您需要使用选定的选项类型填充屏幕......您尝试制作的 UI 也是在IOS 的指导方针，如果可能的话，请你的设计师将设计作为 android 的指导方针。
@PriyaSinghal 你是对的，这是 IOS 设计指南，但没有其他办法。现在我跟随 RecyclerView 来做这个。谢谢。

标签： android scroll tabs slider

【解决方案1】：

根据Android Documentation：

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

【讨论】：

有趣，但是...但是您自定义的 TabLayout 没有垂直滚动:(我错过了什么吗？
您可以将它们包装在 AppBarLayout 中并尝试为其使用滚动标志。

【解决方案2】：

如 android 文档中所述，请参阅 this

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

这意味着您不能使用TabLayout 来显示垂直标签。不过，您可以使用TabHost 来实现。

看看这些赞：

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

Vertical tabs in Android

【讨论】：

谢谢，但在您给定的示例中找不到左标签。
stackoverflow 的回答中有一个垂直标签的例子。看到这个stackoverflow.com/a/7268225/5722608
我已经尝试过这种类型的例子，主要问题是这个选项卡不是动态的，并且视图看起来不像 TabLayout。