android - ビュー上の Google Now ドロップシャドウ

Question

Google Now Cardsのような素晴らしいドロップシャドウが欲しいです。作成方法を教えてください。私はたくさんグーグルで調べてきましたが、私の質問に対する答えは見つかりませんでした。この回答を試しましたが、次の結果しか得られません。

はい、私のninepatchは.で終わってい.9.pngます。

Answer 1

この作業を行うために私が行ったことはcard_background.9.png、Google ミュージックの 9 パッチ ファイルを使用することでした。

このファイルをコピーしてフォルダーにcard_background.9.png配置します。res/drawable-xhdpi以下についても同じことができます。

とres/drawable-hdpi:

でres/drawable-mdpi。

次は、コンテンツ ビューとグリッド アイテムのレイアウトです。それを正しく行うには、パディングとすべての重要なプロパティを行う方法と場所に注意する必要がありclipToPaddingます。まず、グリッド レイアウトがあります。これは、ファイル内のアクティビティのメイン コンテンツ ビューとして機能します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>

これは、私が の BoardGridView に使用したスタイルです。styles.xmlタブレット/ランドスケープをサポートするために定数を次元化していますが、使いやすいようにここにハードコーディングしました。

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

これを一緒にフックするには、カーソルローダーとアダプターが必要ですが、それは質問の範囲外です。このレイアウトでは、Google ミュージックのようなカード ビューを作成できます。上記の 9 パッチの画像と xml を私の Samsung Galaxy S3 にポートレート モードで適用した結果のスクリーンショットを次に示します。