Android TabLayout에 가로 스크롤 표시기를 추가하는 방법

Question

Android TabLayout에 가로 스크롤보기를 추가 하려고 합니다.

TabLayout에는 여러 개의 탭이 있으며 스크롤 할 수 있습니다. 여러 탭으로 인해 일부는 한 눈에 보이지 않습니다. 사용자는 맨 오른쪽에있는 탭 (보통 숨겨져 있음)으로 이동하려면 스크롤해야하므로 해당 탭은 사용자의주의를 끌지 못합니다.

수평 스크롤 표시기 또는 오른쪽에 더 많은 탭이 있음을 나타내는 화살표가있어 사용자가 스크롤하여 검색 / 사용할 수 있습니다.

디자인 아이디어는 scrollIndicator가 있고 tabIndicator는없는 것입니다. 아이디어에 더 가까운 Google에서 다음 이미지를 발견했습니다.

미리 감사드립니다.

Answer 1

다음과 같이 가로 스크롤 뷰 안에 탭 레이아웃을 캡슐화하여 원하는 것을 얻을 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="8dp"
        android:scrollbars="horizontal">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            app:tabGravity="center"
            app:tabIndicator="@color/white"
            app:tabMode="fixed">

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 1"/>

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 2"/>

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 3"/>

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 4"/>

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 5"/>

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 6"/>


            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 7"/>



            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 8"/>



            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 9"/>

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 10"/>
        </com.google.android.material.tabs.TabLayout>

    </HorizontalScrollView>

</LinearLayout>

이렇게 생겼어요 ......

Answer 2

안녕하세요, app : tabMode = "scroll"을 추가 할 수 있습니다 .

예에서 다음과 같이 사용하십시오.

<android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="scroll"
            app:tabGravity="fill"/>
    </android.support.design.widget.AppBarLayout>