Android-如何創建類似於市場或Shopsavvy的UI

Question

最近，Android市場和購物狂對UI進行了大修。 結果是列表似乎在帶有按鈕的彎曲頂部區域下滑動。 頂部似乎在列表上投下了陰影，列表本身與其余列表帶有不同的標題。 這對android UI的外觀而言確實是一個很大的改進，外觀更加專業。

那么，如何在帶有投影的彎曲頂部下方滑動呢？

多謝你們

Answer 1

開發者在開發市場應用程序時發表了一篇很棒的博客文章，您可以在這里找到它http://www.pushing-pixels.org/2010/12/13/meet-the-green-goblin-part-1 html的

在shopsavvy，我們采取了一種簡單得多的方法，並獲得了大致相同的結果。 我們使用具有兩個彼此重疊的子布局的框架布局。 頂部布局具有作為背景的自定義圖像，其中包括陰影（我們有一個很棒的圖形專家）。 底部布局只是一個列表視圖，其頂部有一個邊距可將其放置在我們想要的位置。 它的偽代碼如下所示。

 <FrameLayout>
    <!-- Listview that sits under another view -->
    <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

         <ListView
           android:id="@+id/backgroundlist"
           android:layout_marginTop="150dp"
           android:layout_height="fill_parent"
           android:layout_width="fill_parent" />

     </LinearLayout>

     <!-- view that sits on top -->
     <LinearLayout
       android:layout_height="wrap_content"
       android:layout_width="fill_parent"
       android:background="@drawable/curvedimage"
       android:orientation="vertical"
      >
        <!-- headers, buttons and other stuff -->
        <LinearLayout
          .....

     </LinearLayout>
</FrameLayout>

對於列表視圖的標題，您只需在列表視圖上使用addHeaderView函數。 您只需為所需的標題進行布局。 在本例中，我們僅使用具有不同背景色的文本視圖。

<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"

    android:text="@string/scans_right_now"
    android:layout_height="61dp"
    android:layout_width="fill_parent"
    android:gravity="bottom|center_horizontal"

    android:paddingBottom="3dp"

    android:textColor="#8b8b8b"
    android:background="#d3d3d3"
    android:textStyle="bold"

    android:shadowColor="#FFFFFF" 
    android:shadowDx="0.0"
    android:shadowDy="1.0"
    android:shadowRadius="1.0" />

然后將該視圖添加為活動內部的標題，如下所示：

ListView list = (ListView) findViewById(R.id.backgroundlist);
View recentScansHeader =        getLayoutInflater().inflate(R.layout.recent_products_header, recentViewList, false);
list.addHeaderView(recentScansHeader);