Android - 如何创建类似市场或 Shopsavvy 的用户界面

Question

最近，android 市场和 shopsavvy 进行了 UI 大修。结果是一个列表然后似乎在带有按钮的弯曲顶部区域下滑动。顶部部分似乎在列表上投下了轻微的阴影，列表本身与列表的其余部分有不同颜色的标题。这是对 Android UI 外观的重大改进，更加专业。

那么带阴影的弧形顶部下的滑动是如何实现的呢？

谢谢大家

Answer 1

开发市场应用程序的开发人员发表了一篇很棒的博文，您可以在这里找到它 http://www.pushing-pixels.org/2010/12/13/meet-the-green-goblin-part-1.html

在 shopsavvy，我们采用了一种更简单的方法并取得了大致相同的结果。我们使用具有两个相互重叠的子布局的框架布局。顶部布局的背景是包含阴影的自定义图像(我们有一个很棒的图形专家)。底部布局只是一个 ListView ，顶部有一个边距以将其放置在我们想要的位置。它的伪代码如下所示。

 <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>

对于 ListView 上的标题，您只需在 ListView 上使用 addHeaderView 函数。您只需为所需的页眉制作布局。在我们的例子中，我们只使用具有不同背景颜色的 TextView 。

<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" />

然后将该 View 作为标题添加到您的 Activity 中，如下所示:

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