Question

最近Android市场和shopavvy经历了UI大修。结果是一个列表然后似乎在弯曲的顶部区域下滑动，其上有按钮。顶部似乎在列表上投下了一些小阴影，列表本身对列表的其余部分有不同的颜色标题。这对于Android UI的外观来说是一个非常大的改进，更加专业。

那么如何实现弯曲顶部下方的滑动和阴影？

谢谢你们

Answer 1

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

在shopavvy，我们采取了一种更简单的方法，并取得了大致相同的结果。我们使用具有两个彼此重叠的子布局的框架布局。顶部布局具有背景，即包含阴影的自定义图像（我们有一个很棒的图形人）。底部布局只是一个列表视图，顶部有一个边距，可以放在我们想要的位置。它的伪代码看起来像这样。

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

Android - 如何创建像市场或Shopsavvy这样的UI

1 个答案: