具有补间动画的水平滚动菜单栏

Question

我想构建一个由按钮和菜单栏组成的自定义 UI 组件。

单击按钮时，按钮将补间远离屏幕，然后菜单栏将补间。菜单栏由一组可水平滚动的图标组成。这样的例子就像福克斯新闻应用程序，您可以从滚动条中选择所需的新闻类型。如此处所示。

另一个例子是在Thinking Space应用程序上，当用户单击菜单按钮时，绘图工具栏就会出现。我需要在这个应用程序上准确显示。

我已经阅读了一些关于从 android 页面构建自定义 UI 组件的指南，但还没有找到应该从哪里开始的线索。我是否需要通过扩展 View 类来完全从头开始构建？如果是这样，我如何实现补间动画，我不知道应该在 onDraw() 方法中绘制哪个，因为栏和按钮不会同时出现在屏幕上。

有什么建议或例子可以引导我走向光明吗？这是我第一次构建自定义 UI 组件。

如果需要的话，我会为您提供更多信息来帮助我。

非常感谢！

Answer 1

您是否考虑过使用 Tabhost ，并在每个 Tabspec 中使用包含您的菜单的 Horizo​​ntalScrollView

？这就是你想要的吗？

在你的 LAyout xml 中：

<!-- scroll des pays de filtre -->
    <HorizontalScrollView android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:layout_alignParentTop="true"
        android:id="@+id/scrollPays">

        <LinearLayout android:layout_height="wrap_content"
            android:layout_width="fill_parent" android:id="@+id/layoutScrollPays"
            android:orientation="horizontal">

            <Button android:id="@+id/filtrePaysPromo" android:layout_width="wrap_content"
                android:textStyle="bold" android:textSize="17px" android:textColor="#fafafa" 
                android:layout_height="wrap_content" android:background="@drawable/segment"
                android:text="Promo" android:padding="2px"
                android:layout_gravity="center"/>

            <Button android:id="@+id/filtrePaysMaroc" android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:background="@drawable/segment"
                android:text="Maroc" android:textSize="17px" android:textColor="#fafafa" 
                android:padding="2px" android:layout_gravity="center" />

            <Button android:id="@+id/filtrePaysTunisie" android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:background="@drawable/segment"
                android:text="Tunisie" android:textSize="17px" android:textColor="#fafafa" 
                android:padding="2px" android:layout_gravity="center"/>

            <Button android:id="@+id/filtrePaysEspagne" android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:background="@drawable/segment"
                android:text="Espagne" android:textSize="17px" android:textColor="#fafafa" 
                android:padding="2px" android:layout_gravity="center"/>

            <Button android:id="@+id/filtrePaysTurquie" android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:background="@drawable/segment"
                android:text="Turquie" android:textSize="17px" android:textColor="#fafafa" 
                android:padding="2px" android:layout_gravity="center"/>

            <Button android:id="@+id/filtrePaysGrece" android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:background="@drawable/segment"
                android:text="Grece" android:textSize="17px" android:textColor="#fafafa" 
                android:padding="2px" android:layout_gravity="center"/>

            <Button android:id="@+id/filtrePaysMaurice" android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:background="@drawable/segment"
                android:text="Ile Maurice" android:textSize="17px" android:textColor="#fafafa" 
                android:padding="2px" android:layout_gravity="center"/>

            <Button android:id="@+id/filtrePaysRepDom" android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:background="@drawable/segment"
                android:text="Rep. Dominicaine" android:textSize="17px" 
                android:textColor="#fafafa" android:padding="2px" android:layout_gravity="center"/>

            <Button android:id="@+id/filtrePaysItalie" android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:background="@drawable/segment"
                android:text="Italie" android:textSize="17px" android:textColor="#fafafa" 
                android:padding="2px" android:layout_gravity="center"/>

            <Button android:id="@+id/filtrePaysEgypt" android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:background="@drawable/segment"
                android:text="Egypt" android:textSize="17px" android:textColor="#fafafa" 
                android:padding="2px" android:layout_gravity="center"/>
        </LinearLayout>
    </HorizontalScrollView>

这对我有用，
它看起来像这样：