37

我有一个类似于平板电脑的 ICS Gmail 应用程序的布局（ListFragment左侧和右侧的内容），我想知道如何构建布局，以便在两个片段之间有一个阴影分隔符（就像在 Gmail应用程序，如下所示）

.看看那美丽的影子！

另外，由于这适用于这个问题，我怎样才能在活动列表项的布局中拥有那个漂亮的三角形/箭头标记？我假设要实现这一点，ListView 本身必须位于阴影“层”之上，但我不知道如何创建它。

4

2 回答 2

34

只是为了让每个人都知道（因为似乎缺乏关于这个主题的信息），这是在单个列表行视图的背景选择器 XML 中实现的。例如，这是主屏幕的布局，

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/list_row"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@drawable/list_item_selector">

    ...<!-- Rest of layout goes here -->

</RelativeLayout>

但魔法来自list_item_selector：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/list_pressed" />
    <item android:state_activated="true" android:drawable="@drawable/list_arrow_activated"  />
    <item android:drawable="@drawable/list_default" />
</selector>

通过将这些定义为像这样的 9-patch 可绘制对象，您可以让每个列表项将其宽度值的阴影贡献给中间的那条线，并且当它被激活时，该部分阴影将被箭头替换。我希望这对某人有所帮助，因为它肯定对我有所帮助！

于 2012-05-20T06:47:55.943 回答
23

我正在寻找与您尝试做的事情相同的事情；创建一个片段比另一个片段“更接近”的效果。

Roboguy 的回答处理了如何在列表项上有白色箭头“选择器”；我将尝试更具体地说明阴影。 另一个使用背景选择器的好例子可以在 Google IO 2011 App 的源代码中看到。获得源代码后，查看 fragment_dashboard.xml 图标选择器。

阴影分隔符是一个渐变，应用于视图的左侧。有两个部分；

首先，“影子”本身：

res/shadow_left.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:angle="0"
    android:startColor="#55000000" 
    android:endColor="#00000000"
    />
</shape>

然后，将其实际应用于布局：

布局/my_lower_layer

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
<View
    android:layout_width="20dp"
    android:layout_height="fill_parent"
    android:background="@drawable/fragment_shadow_left" />
<ImageView
    android:id="@+id/imageview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true" />
</RelativeLayout>

这必须通过相对布局来完成（据我所知）。如果您使用的是线性布局，则可以将整个 linearLayout 包装在相对布局中，然后添加渐变。

请注意，如果这样做，渐变<View>必须低于<LinearLayout>; 否则，渐变将在线性布局下绘制，因此您将看不到它。

于 2012-07-16T17:49:45.237 回答