具有補間動畫的水平滾動菜單欄

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> 

這是爲我工作， 它看起來像這樣：