如何在 Android 屏幕左侧显示 TabLayout 中的选项卡？

Question

因此，我尝试在 TabLayout 中显示三个选项卡 [Easy、Medium、Hard]，并且我希望这些选项卡显示在另一个选项卡之上。目前我得到的结果是这样的

因此，正如您所看到的，这些选项卡是一个挨着一个，而不是一个在另一个下面。以下是我的 XML 文件的代码

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentStart="true"
        android:layout_gravity="start"
        app:tabGravity="fill"
        app:tabMode="scrollable" />

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:background="@drawable/flash_tablebar"
        android:elevation="4dp"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        android:layout_alignParentTop="true">

        <ImageView
            android:id="@+id/back_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:src="@drawable/ic_arrow_back" />

        <RelativeLayout
            android:layout_marginLeft="20dp"
            android:id="@+id/relativeFlashcard"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_toRightOf="@id/back_icon"
            >
        <TextView
        android:id="@+id/title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
            android:textStyle="bold"
            android:layout_marginStart="30dp"
        android:text="Flashcards"
        android:textSize="40sp"
        android:textColor="#FFF" />
            <TextView
                android:id="@+id/subtext_flash"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                android:layout_below="@id/title_text"
                android:layout_marginStart="30dp"
                android:text="Pick a set to practice"
                android:textSize="20sp"
                android:textColor="#FFF" />
        </RelativeLayout>
    </androidx.appcompat.widget.Toolbar>
        <!-- ViewPager -->
        <androidx.viewpager.widget.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="" />

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerViewFlashcards"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="70dp"
            android:layout_marginEnd="5dp"
            android:layout_below="@id/toolbar"
            android:layout_alignParentBottom="true"
            android:scrollbars="vertical">
        </androidx.recyclerview.widget.RecyclerView>
</RelativeLayout>

以下是我的 Fragment 类的代码

import androidx.viewpager.widget.ViewPager
import com.example.visuallithuanian.R
import com.google.android.material.tabs.TabLayout
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentPagerAdapter
import com.example.visuallithuanian.EasyFragment
import com.example.visuallithuanian.HardFragment
import com.example.visuallithuanian.MediumFragment
import dagger.hilt.android.AndroidEntryPoint


@AndroidEntryPoint
class FlashCards : Fragment() {

    private lateinit var tabLayout: TabLayout
    private lateinit var viewPager: ViewPager

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view = inflater.inflate(R.layout.fragment_flash_cards,
container, false)

        // Initialize views
        tabLayout = view.findViewById(R.id.tabLayout)
        viewPager = view.findViewById(R.id.viewPager)

        // Set up the ViewPager and TabLayout
        val adapter = FlashCardsPagerAdapter(childFragmentManager)
        viewPager.adapter = adapter
        tabLayout.setupWithViewPager(viewPager)

        return view
    }

    private inner class FlashCardsPagerAdapter(fm: FragmentManager) :
FragmentPagerAdapter(fm) {

        override fun getCount(): Int {
            return 3 // Number of tabs (Easy, Medium, Hard)
        }

        override fun getItem(position: Int): Fragment {
            return when (position) {
                0 -> EasyFragment()
                1 -> MediumFragment()
                2 -> HardFragment()
                else -> throw IllegalArgumentException("Invalid position")
            }
        }

        override fun getPageTitle(position: Int): CharSequence? {
            return when (position) {
                0 -> "Easy"
                1 -> "Medium"
                2 -> "Hard"
                else -> null
            }
        }
    }
}

所以，我只希望这些选项卡是一个在另一个之上，就像第一个 Easy ，然后是 Medium ，然后是 Hard ，这样我就可以遍历相应的片段。我希望我的标签看起来像这样

Answer 1

从 API11 开始，我们可以通过调用

setRotation()

或设置 XML 属性

android:rotation

来旋转视图。您可以尝试将此属性附加到视图以获得所需的结果。要将视图顺时针旋转 90 度，只需设置

android:rotation="90"

。

使用下面的布局来了解这个想法。请注意，我现在无法对其进行测试，但这可以为您提供一些指导。我们首先顺时针旋转整个 Tablayout，然后旋转回单个 TabItem。

<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:tabInlineLabel="true"
        app:tabIndicatorFullWidth="false"
        android:background="@color/white" >

        <com.google.android.material.tabs.TabItem
            android:id="@+id/tabItemEasy"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:rotation="-90"
            android:text="Easy" />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/tabItemMedium"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:rotation="-90"
            android:text="Medium" />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/tabItemHard"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:rotation="-90"
            android:text="Hard" />

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

另请参阅此 StackOverflow 问题以供参考。

但请注意，这种设计方法通常不符合 Google Material Design 指南，因此您可能需要过度思考是否有更合适的替代方案。