谷歌现在，阴影效果的看法 [英] Google Now dropshadow on view

问题描述

我想这真棒阴影效果，如谷歌现在卡。如何创建呢？我一直在Google上搜寻周围有很多，但没有发现任何回答我的问题。我的有无的尝试这个的答案，但我只得到这样的结果：

I want this awesome dropshadow like the Google Now Cards. How do I create it? I've been googling around a lot but haven't found any answer to my question. I have tried this answer, but I only get this result:

是的，我ninepatch即将结束与 .9.png 。

And yes, my ninepatch is ending with .9.png.

推荐答案

所以我做了什么，使这个工作是使用 card_background.9.png 九补丁从谷歌音乐文件：

So what I did to make this work was to use the card_background.9.png nine-patch file from Google Music:

将此文件复制到 card_background.9.png 和发生在你的 RES /绘制-xhdpi 文件夹，也可以做相同的：

Copy this file to card_background.9.png and place in your res/drawable-xhdpi folder, you can also do the same for:

在 RES /绘制，华电国际和

在 RES /绘制-MDPI 。

接下来是内容视图，和电网项目布局。为了得到它的权利，你必须要小心你如何以及在哪里做填充和所有重要的 clipToPadding 属性。首先有网格布局，这对作为活动我的主要内容来看，在文件 board_grid_layout.xml ：

Next come the content view, and grid item layouts. To get it right you have to be careful about how and where you do the padding and the all important clipToPadding property. First there's the grid layout, this acts as my main content view in the activity, in file 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 ，我dimensionalise支持平板电脑/美化的常量用于BoardGridView的风格，但我很难codeD他们在这里为方便使用：

This is the style I used for the BoardGridView in my styles.xml, I dimensionalise the constants for supporting tablets/landscaping, but I've hardcoded them here for ease of use:

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

现在一起挂钩这一点，你需要使用游标加载器和适配器，但是这是问题的范围。这种布局应该让你做一个卡片视图，如谷歌音乐。下面是上述九片图像和XML在纵向模式应用在我的三星Galaxy S3所产生的截图：

Now to hook this together you need a cursor loader and adapter, but that's outside the scope of the question. This layout should let you make a card-view like Google Music. Here's the resulting screenshot of the above nine-patch image and xml applied on my Samsung Galaxy S3 in portrait mode:

这篇关于谷歌现在，阴影效果的看法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！