Android - 如何创建类似于市场或 Shopsavvy 的 UI

Question

最近，android 市场和 shopavvy 进行了 UI 大修。结果是一个列表似乎在带有按钮的弯曲顶部区域下滑动。顶部似乎在列表上投下了轻微的阴影，并且列表本身与列表的其余部分具有不同的颜色标题。这对安卓 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);