垂直 Android TabLayout 不垂直滚动 [英] Vertical Android TabLayout not scroll vertically

问题描述

<块引用>

我尝试像这张图片一样开发左 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"机器人:layout_alignParentLeft =真"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"><android.support.design.widget.TabLayoutandroid:id="@+id/标签"android:layout_width="60dp"android:layout_height="match_parent"应用程序:tabBackground="@drawable/tab_color_selector"应用程序:tabGravity =填充"app:tabMode="scrollable"/></android.support.design.widget.AppBarLayout></RelativeLayout>

解决方案

根据

I try to develop left TabLayout like this image.

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:

TabLayout provides a horizontal layout to display tabs

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 不垂直滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！