如何在Android Studio中制作垂直TabLayout

Question

嗨，我正在尝试制作垂直选项卡布局。尝试使用旋转视图，但它无助于它不重新计算视图高度和视图。任何帮助将不胜感激，以实现以下结果。

Answer 1

这可能对你有帮助。

<FrameLayout
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:rotation="-90"
    android:layout_gravity="center_vertical">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        app:tabIndicatorHeight="4dp"
        app:tabTextAppearance="@style/CDTabLayoutTextAppearance"
        app:tabInlineLabel="true"
        app:tabIconTint="@color/tab_tint_color_selector"
        app:tabIndicatorFullWidth="false"
        app:tabIndicator="@drawable/ic_community_tab_selected"
        app:tabIndicatorColor="@color/colorColoringDesk"
        android:background="@color/white" >

        <com.google.android.material.tabs.TabItem
            android:id="@+id/tabItemContacts"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Contacts" />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/tabItemChat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Chat" />

    </com.google.android.material.tabs.TabLayout>
</FrameLayout>

将 TabLayout 与 ViewPager2 一起使用。

Answer 2

我使用以下代码制作了垂直 tabLayout。你也可以尝试一下：-

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:rotation="-90"
    android:transformPivotX="0dp"
    android:layout_marginTop="@dimen/tab_width"
    android:layout_marginLeft="-24dp">
    <com.google.android.material.tabs.TabLayout
        android:layout_width="@dimen/tab_width"
        android:layout_height="wrap_content"
        android:background="@color/black"
        app:tabTextColor="@color/light_grey"
        app:tabSelectedTextColor="@color/white"
        app:tabIndicatorHeight="2dp"
        app:tabIndicatorColor="@color/white"
        app:tabPaddingBottom="-10dp">
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ABC"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="XYZ"/>
    </com.google.android.material.tabs.TabLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 3

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

https://github.com/mohdDanishCode/MDVerticalTabLayout