web-dev-qa-db-ja.com

アンドロイドでビューに影を設定する方法は？

Androidの一般的なビューにシャドウレイヤーを追加する方法を知りたい。たとえば、次のようなものを表示するレイアウトxmlがあるとします。

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout  
    Android:layout_height="wrap_content"  
    Android:layout_width="wrap_content"  
    <Button....  
    ...  
</LinearLayout>

今、それが表示されるとき、私はその周りに影を持ちたいです。

androidviewshadow
24
aqs

シャドウを形成する2つのビューを使用する簡単なトリックがあります。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="fill_parent"
    Android:layout_height="fill_parent" 
    Android:padding="10dp"
    Android:background="#CC55CC">
    <LinearLayout
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        Android:orientation="vertical">
        <TableLayout
            Android:layout_width="fill_parent"
            Android:layout_height="wrap_content"
            Android:stretchColumns="0">
            <TableRow>
                <LinearLayout
                    Android:id="@+id/content"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content">
                    <TextView  
                        Android:layout_width="fill_parent" 
                        Android:layout_height="wrap_content"
                        Android:background="#FFFFFF" 
                        Android:text="@string/hello" />
                </LinearLayout>
                <View
                    Android:layout_width="5dp"
                    Android:layout_height="fill_parent"
                    Android:layout_marginTop="5dp"
                    Android:background="#55000000"/>
            </TableRow>
        </TableLayout>
        <View
            Android:layout_width="fill_parent"
            Android:layout_height="5dp"
            Android:layout_marginLeft="5dp"
            Android:background="#55000000"/>
    </LinearLayout>
</FrameLayout>

この助けを願っています。

2
Fede

影を作成する最良の方法は、ビューの背景として9patchイメージ（またはビューをラップするViewGroup）を使用することです。

最初のステップは、周囲に影のあるpng画像を作成することです。私はそのような画像を作成するためにPhotoshopを使用しました。本当に簡単です。

  • Photoshopで新しい画像を作成します。
  • レイヤーを追加して、4x4の黒い正方形を作成します。
  • レイヤーエクスプローラーでレイヤーを選択し、fxという名前のボタンをクリックしてドロップシャドウを選択することにより、レイヤーに影を作成します。
  • 画像をpngとしてエクスポートします。

次のステップは、この画像から9パッチのドロウアブルを作成することです。

  • draw9patchからAndroid-sdk/toolsを開きます
  • draw9patchで画像を開きます
  • 次のように正方形の4辺に4本の黒い線を作成し、shadow.9.pngとして画像を保存します。

これで、この影を追加したいビューの背景としてこの影を追加できます。 shadow.9.pngをres/drawablesに追加します。次に、背景として追加します。

<LinearLayout
  Android:layout_width="fill_parent"
  Android:layout_height="wrap_content"
  Android:background="@drawable/shadow"
  Android:paddingBottom="5px"
  Android:paddingLeft="6px"
  Android:paddingRight="5px"
  Android:paddingTop="5px"
>

私は最近、これを詳細に説明する ブログ投稿 を書きました。これには、シャドウの作成に使用する9patchイメージが含まれています。

38
Sapan Diwakar

Uが線形レイアウトを使用すると仮定すると（私は垂直線形レイアウトとみなされます）。そして線形レイアウトのすぐ下にビューがあります。このビューでは開始色と終了色を提供します。私のために働きます。さらに良い効果が必要な場合は、開始色と終了色を回避します。

activity_main

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical" >

    <LinearLayout
        Android:id="@+id/vertical"
        Android:layout_width="match_parent"
        Android:layout_height="150dp"
        Android:background="@drawable/layout_back_bgn"
        Android:orientation="vertical" >
    </LinearLayout>

    <View
        Android:layout_below="@+id/vertical"
        Android:layout_width="match_parent"
        Android:layout_height="10dp"
        Android:background="@drawable/shadow"
        >
    </View>


</LinearLayout>

layout_back_bgn.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle" >

<solid Android:color="#FF4500" />

</shape>

shadow.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"  Android:shape="rectangle">    
    <gradient
        Android:startColor="#4D4D4D"
        Android:endColor="#E6E6E6"
        Android:angle="270"
        >
    </gradient>
</shape>

私は上記のコードを使用した後、それを持っている画像を投稿しようとしましたが、stackoverflowは私に評判を持っていないことを許可しません..それについてはごめんなさい。

13
DJphy

APIレベル21以降で利用可能な昇格を使用できます

Zプロパティによって表されるビューの標高は、その影の視覚的外観を決定します。Z値が高いほど、大きくて柔らかい影が投影されます。 Z値が高いビューは、Z値が低いビューをオクルードします。ただし、ビューのZ値は、ビューのサイズには影響しません。ビューの標高を設定するには：

レイアウト定義では、

Android:elevation

属性。アクティビティのコードでビューの標高を設定するには、

View.setElevation()

方法。

ソース

7
Shlomi Fresko

ここにソリューションの安っぽいバージョンがあります...これは見つかったソリューションの修正です here

角がどのように見えるか気に入らなかったので、すべてを色あせました...

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
<!--Layer 0-->
<!--Layer 1-->
<!--Layer 2-->
<!--Layer 3-->
<!--Layer 4 (content background)-->

<!-- dropshadow -->
<item>
    <shape>
        <gradient 
            Android:startColor="@color/white"
            Android:endColor="@color/white"
            Android:centerColor="#10CCCCCC"
            Android:angle="180"/>
        <padding Android:top="0dp" Android:right="0dp" Android:bottom="2dp" Android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            Android:startColor="@color/white"
            Android:endColor="@color/white"
            Android:centerColor="#20CCCCCC"
            Android:angle="180"/>
        <padding Android:top="0dp" Android:right="0dp" Android:bottom="2dp" Android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            Android:startColor="@color/white"
            Android:endColor="@color/white"
            Android:centerColor="#30CCCCCC"
            Android:angle="180"/>

        <padding Android:top="0dp" Android:right="0dp" Android:bottom="2dp" Android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            Android:startColor="@color/white"
            Android:endColor="@color/white"
            Android:centerColor="#40CCCCCC"
            Android:angle="180"/>
        <padding Android:top="0dp" Android:right="0dp" Android:bottom="2dp" Android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            Android:startColor="@color/white"
            Android:endColor="@color/white"
            Android:centerColor="#50CCCCCC"
            Android:angle="180"/>
        <padding Android:top="0dp" Android:right="0dp" Android:bottom="2dp" Android:left="0dp" />
    </shape>
</item>

<!-- content background -->
<item>
    <shape>
        <solid Android:color="@color/PostIt_yellow" />
    </shape>
</item>
4
Johnny Wu