android - View 上的 Google Now 阴影

Question

我想要像 Google Now Cards 这样很棒的阴影.我如何创建它？我一直在谷歌上搜索很多，但没有找到我的问题的任何答案。我已经试过this回答，但我只得到这个结果:

是的，我的 ninepatch 以 .9.png 结尾。

Answer 1

所以我为完成这项工作所做的是使用来自 Google Music 的 card_background.9.png 九补丁文件:

将此文件复制到 card_background.9.png 并放在您的 res/drawable-xhdpi 文件夹中，您也可以这样做:

在 res/drawable-hdpi 和:

在 res/drawable-mdpi 中。

接下来是内容 View 和网格项目布局。要做到正确，您必须注意填充的方式和位置以及所有重要的 clipToPadding 属性。首先是网格布局，它作为我在 Activity 中的主要内容 View ，在文件 board_grid_layout.xml 中:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/board_grid_layout"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="0dp">    
    <GridView
            android:id="@+id/board_grid_view"
            style="@style/BoardGridView"
            />
</RelativeLayout>

这是我在 styles.xml 中用于 BoardGridView 的样式，我对支持平板电脑/景观的常量进行了维度化，但为了便于使用，我在这里对它们进行了硬编码:

<style name="BoardGridView" parent="AppTheme">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:padding">8dp</item>
    <item name="android:clipToPadding">false</item>
    <item name="android:gravity">top|left</item>
    <item name="android:smoothScrollbar">true</item>
    <item name="android:cacheColorHint">#00000000</item>
    <item name="android:fastScrollEnabled">true</item>
    <item name="android:horizontalSpacing">8dp</item>
    <item name="android:verticalSpacing">8dp</item>
    <item name="android:numColumns">3</item>
    <item name="android:stretchMode">columnWidth</item>
    <item name="android:scrollbarStyle">outsideOverlay</item>
</style>

然后是带有卡片背景的网格项目布局。这是我的布局文件 board_grid_item.xml:

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

        <RelativeLayout
                android:id="@+id/grid_item_thread_image_wrap"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                >

            <ImageView
                    android:id="@+id/grid_item_thread_thumb"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:scaleType="centerCrop"
                    android:contentDescription="Thread thumbnail"
                    />
            <ImageView
                    android:id="@+id/grid_item_country_flag"
                    android:layout_width="18dp"
                    android:layout_height="11dp"
                    android:scaleType="fitXY"
                    android:layout_alignParentTop="true"
                    android:layout_alignParentRight="true"
                    android:contentDescription="Thread country flag"
                    />
        </RelativeLayout>

        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="84dp"
                android:orientation="vertical"
                >

            <TextView
                    android:id="@+id/grid_item_thread_subject"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingLeft="8dp"
                    android:paddingRight="8dp"
                    android:textColor="#444"
                    android:textSize="14sp"
                    android:maxLines="2"
                    />

            <TextView
                    android:id="@+id/grid_item_thread_info"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingLeft="8dp"
                    android:paddingRight="8dp"
                    android:textColor="#aaa"
                    android:textSize="12sp"
                    android:maxLines="3"
                    />

        </LinearLayout>

</LinearLayout>

现在要将其连接在一起，您需要一个游标加载器和适配器，但这超出了问题的范围。这个布局应该让你像谷歌音乐一样制作卡片 View 。这是上面 9-patch 图像和 xml 在我的三星 Galaxy S3 上以纵向模式应用的结果截图: