使用動畫設計複雜的Android UI

Question

我必須爲Android應用程序設計一個UI，其中包含10個包含圖像和文本（圖片中的2個大框）的垂直圖塊，並且在點擊一個圖塊時它會消失，被包含6個元素的可滾動gridview替代（在下圖中顯示）在同一頁上。 （由動畫顯示）

這是我試圖解釋的視圖的快照。此圖像僅顯示10個瓦片中的2個和單擊時出現的gridview。每個白色框包含圖像和文本。我不擅長設計，所以我希望能夠詳細回答一下這個問題。謝謝。

Answer 1

在你的問題中沒有太多的細節，即使圖片沒有說明所有內容，但這裏是一個刺探。

不確定當你說瓷磚「進一步擴展」時你的意思是什麼，你期望看到中間的六塊瓷磚當時出現還是總是在那裏？如果它們出現，那會是動畫嗎？

要實現您的圖片，您應該在頂層獲得RelativeLayout。 這只是因爲你有這個日期TextView在右上角和處理SlidingDrawer在底部。你可以用你的壁紙主題設置該RelativeLayout的背景，如果這是靜態的，我猜想頂部的藍色條。

然後在這個頂級的RelativeLayout裏面，你有一個水平方向的LinearLayout。這一個將包含你的照片上的三個「窗口」。

在那個水平的LinearLayout中，首先你有另一個垂直方向的LinearLayout，然後是一個ViewPager，然後是另一個垂直的LinearLayout類似於第一個（不知道右邊的部分與左邊的不同，或者是假定的做一個完整的鏡子...？）。

因此，在總結：

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
    android:id="@+id/top_level" 
    android:layout_height="fill_parent" 
    android:layout_width="fill_parent"> 

    <TextView 
     android:id="@+id/date_text" 
     android:layout_height="wrap_content" 
     android:layout_width="wrap_content" 
     android:layout_alignParentRight="true" 
     android:layout_alignParentTop="true" 
     android:paddingTop="..." // fill in some space to offset from the top of the screen 
     android:paddingRight="..." // same thing to keep it off the right edge 
     /> 
    <LinearLayout 
     android:layout_height="..." // set the height of your content in the center of your screen 
     android:layout_width="fill_parent" 
     android:layout_below="@+id/date_text" 
     android:orientation="horizontal" > 

     <LinearLayout 
      android:layout_height="fill_parent" 
      android:layout_width="wrap_content" 
      android:orientation="vertical" > 

      < add here some of the stuff you have above your tile like that RSS icon and so on /> 
      <ListView 
       android:id="@+id/tile_list" 
       android:layout_height="fill_parent" 
       android:layout_width="fill_parent"/> 
     </LinearLayout> 

     <ViewPager 
      android:id="@+id/pager" 
      android:layout_height="fill_parent" 
      android:layout_width="0dp" 
      android:layout_weight="1" // so that will fill the remaining space between the left and the right parts 
      /> 

     <LinearLayout 
      android:layout_height="fill_parent" 
      android:layout_width="wrap_content" 
      android:orientation="vertical" > 

      < add here some of the stuff you have above your tile like that RSS icon and so on /> 
      <ListView 
       android:id="@+id/tile_list" 
       android:layout_height="fill_parent" 
       android:layout_width="fill_parent"/> 
     </LinearLayout> 

    </LinearLayout> 

    <SlidingDrawer 
     android:id="@+id/drawer" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:handle="@+id/drawer_handle" 
     android:content="@+id/drawer_contents"> 

     <ImageView 
      android:id="@+id/drawer_handle" 
      android:src="@drawable/image for the tab..." 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content"> 
     </ImageView> 

     <Another Layout for the content of the drawer 
      android:id="@+id/drawer_contents" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
     > 
      .... 
     </Close that layout> 

    </SlidingDrawer> 

</RelativeLayout> 

從那裏，仍然有相當多的東西來填補一些代碼來寫，以填補瓷磚的列表（左，右），處理時用戶點擊一個項目，然後在屏幕中間顯示ViewPager的內容。你可能會想在每個頁面中使用一個GridLayout。

如果您需要隱藏ViewPager，直到用戶單擊某個圖塊，可以將可見性設置爲隱藏並在代碼中將其更改。

UPDATE 現在有關於如何移動的更多信息......

OK，所以保持頂級水平的RelativeLayout的日期和SlidingDrawer底部。

在中間部分，你可以使用由這個人放在一起Horizo​​ntalListView：How can I make a horizontal ListView in Android?，代碼和指令，例如可以在這裏找到：http://www.dev-smart.com/archives/34

然後你需要創建自己的適配器來填充該列表。您可以將其基於BaseAdapter（該決定更依賴於您的圖像/信息的存儲方式）。

在該Adapter的getView函數中，可以有一個佈局，其中摺疊視圖和展開視圖都合併到一個FrameLayout中，但一次只能看到一個。它看起來像這樣的事情：

<FrameLayout 
    android:layout_width="wrap_content" 
    android:layout_height="fill_parent" // assuming the HorizontalListView is set with the right height 
    > 

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

     < add here some of the stuff you have above your tile like that RSS icon and so on /> 
    </LinearLayout> 

    <ViewPager 
     android:id="@+id/expanded_view" 
     android:layout_height="fill_parent" 
     android:layout_width="0dp" 
     android:layout_weight="1" // so that will fill the remaining space between the left and the right parts 
     android:visibility="gone" 
     /> 

</FrameLayout> 

在列表中的適配器，則需要適當的標籤設置爲不同的意見，所以當用戶點擊一個圖像，你知道被點擊哪一個。要展開一個視圖，可以將LinearLayout的可見性更改爲可見，並將ViewPager的可見性更改爲可見。

如果一次只能擴展一個，則可以在適配器中有一個狀態變量來說明它是哪個變量，併爲列表中的所有視圖正確設置可見性屬性。然後你在ListView上調用invalidate來刷新它。

有相當多的代碼來寫做這一切，但如果你把它組織的，它不應該是太糟糕了....