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

Question

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

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

另一个例子是在应用程序思考空间，当用户点击菜单按钮和绘图工具栏出现。我需要在这个应用程序中精确显示。

我读过几篇关于从android页面构建自定义UI组件的指南，但还没有弄清楚我应该从哪里开始。我是否需要通过扩展View类从头开始完全构建？如果是这样，我该如何实现补间动画，我不知道应该在onDraw（）方法中绘制哪个，因为该条和按钮不会同时出现在屏幕上。

任何建议或例子，以指导我的光？这是我第一次构建自定义UI组件。

如果需要，我会提供更多信息以帮助我。

非常感谢！

Answer 1

没有你想使用Tabhost，并在每则tabspec，使用方法，包含你的菜单

的Horizo​​ntalScrollView？那是你要的吗 ？

在布局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> 

这是为我工作， 它看起来像这样：