Android片段之间的阴影分隔符

Question

我的布局类似于平板电脑的ICS Gmail应用程序(ListFragment左侧和右侧内容),我想知道如何构建布局,以便在两个片段之间存在阴影分隔符(例如在Gmail中)应用程序,如下所示)

.

此外,由于这适用于此问题,如何在活动列表项的布局中具有漂亮的三角形/箭头标记？我假设要实现这一点,ListView本身必须位于阴影"层" 之上,但我不知道如何创建它.

Answer 1

只是为了让每个人都知道(因为这个主题似乎缺乏信息),这是在各个列表行视图的后台选择器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 drawables,你可以让每个列表项在中间为该行贡献它的阴影宽度值,当它被激活时,该段阴影将被箭头替换.我希望这有助于某人,因为它确实帮助了我!

Answer 2

我想做你想做的事情; 创造一个片段比另一个片段"更接近"的效果.

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>; 否则,渐变将在线性布局下绘制,因此您将看不到它.