如何像在 YouTube 上一样创建过滤器栏？答案

【问题标题】：How can I create a filter bar like on YouTube?如何像在 YouTube 上一样创建过滤器栏？
【发布时间】：2022-01-15 03:58:41
【问题描述】：

我想知道如何创建一个像图片中那样的条形图。我想它是水平滚动视图，但我不知道“按钮”是什么元素，我也尝试使用任何按钮，但是当按下它们时，滚动视图不会向它们移动。

【问题讨论】：

标签： android youtube android-actionbar

【解决方案1】：

这是一个普通的按钮和芯片。

https://material.io/components/chips/android

这是一个简单的例子

 <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


        <com.google.android.material.appbar.MaterialToolbar
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            app:title="Example App"/>

        <HorizontalScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:orientation="horizontal" >


                <com.google.android.material.button.MaterialButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="Explore"/>

                <com.google.android.material.chip.Chip
                    android:id="@+id/chip5"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="All"/>

                <com.google.android.material.chip.Chip
                    android:id="@+id/chip6"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="Mixes"/>

                <com.google.android.material.chip.Chip
                    android:id="@+id/chip8"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="Computer"/>

                <com.google.android.material.chip.Chip
                    android:id="@+id/chip4"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="Todos"/>

                <com.google.android.material.chip.Chip
                    android:id="@+id/chip7"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="Other"/>
            </LinearLayout>
        </HorizontalScrollView>


    </com.google.android.material.appbar.AppBarLayout>

【讨论】：