Android自定义Shape 加上阴影shadow之方法

http://www.jtben.com/document/1273830

 

Android支持自定义Shape， 以画出需要的形状，可以作为TextView, EditText, Button的背景drawable资源。Shape很简单，就是一个XML文件，SDK文档里描述其格式如下：

 

 xml version="1.0" encoding="utf-8"?>
 <shape
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape=["rectangle" | "oval" | "line" | "ring"] >
     <corners
         android:radius="integer"
         android:topLeftRadius="integer"
         android:topRightRadius="integer"
         android:bottomLeftRadius="integer"
         android:bottomRightRadius="integer" />
     <gradient
         android:angle="integer"
         android:centerX="integer"
         android:centerY="integer"
         android:centerColor="integer"
         android:endColor="color"
         android:gradientRadius="integer"
         android:startColor="color"
         android:type=["linear" | "radial" | "sweep"]
         android:usesLevel=["true" | "false"] />
     <padding
         android:left="integer"
         android:top="integer"
         android:right="integer"
         android:bottom="integer" />
     <size
         android:width="integer"
         android:height="integer" />
     <solid
         android:color="color" />
     <stroke
         android:width="integer"
         android:color="color"
         android:dashWidth="integer"
         android:dashGap="integer" />
 shape>

 

其支持的属性没有shadow， 做Web前端开发的同学写CSS可以很方便地加一个shadow属性值，如何给Android Shape加一个shadow，以得到类似的效果呢？

 

答案是使用layer-list !   直接上代码如下：

 

 xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">

     <item>
         <shape android:shape="rectangle">
             <solid android:color="#792a03" />
             <corners android:radius="19dp" />
         shape>
     item>

     <item  android:top="1px">
         <shape android:shape="rectangle">
             <gradient android:startColor="#ffdb8f" android:endColor="#ffdb8f"
                 android:angle="270" />
             <padding android:left="5dp" android:top="3dp" android:right="5dp"
                 android:bottom="3dp" />
             <corners android:radius="20dp" />
         shape>

     item>

  layer-list>

 

将以上xml存成btn_test, 放到res/drawable/目录下。 将该drawable xml设为一个TextView的backgroiund,

 

 <TextView
        android:background="@drawable/btn_test"

         android:layout_marginTop="20dip"
         android:layout_marginLeft="5dip"
     android:textColor="#792a03"

         android:text="1天2小时14分20秒"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

 

 

其效果如下图所示：

 

 

 

关于layer-list的进一步解释见SDK文档，如下：

 

 

Layer List

A LayerDrawable is a drawable object that manages an array of other drawables. Each drawable in the list is drawn in the order of the list—the last drawable in the list is drawn on top.

Each drawable is represented by an  element inside a single  element.

file location: res/drawable/filename .xml 
The filename is used as the resource ID.compiled resource datatype:Resource pointer to a  LayerDrawable .resource reference:In Java:  R.drawable.filename
In XML:  @[package :]drawable/filename syntax:

 xml version="1.0" encoding="utf-8"?>
 <layer-list
     xmlns:android="http://schemas.android.com/apk/res/android" >
     <item
         android:drawable="@[package:]drawable/drawable_resource"
         android:id="@[+][package:]id/resource_name"
         android:top="dimension"
         android:right="dimension"
         android:bottom="dimension"
         android:left="dimension" />
 layer-list>

 

 

elements: Required. This must be the root element. Contains one or more   elements.

attributes:

xmlns:android String .  Required. Defines the XML namespace, which must be "http://schemas.android.com/apk/res/android" . Defines a drawable to place in the layer drawable, in a position defined by its attributes. Must be a child of a   element. Accepts child   elements.

attributes:

android:drawable Drawable resource .  Required . Reference to a drawable resource. android:id Resource ID . A unique resource ID for this drawable. To create a new resource ID for this item, use the form:  "@+id/name " . The plus symbol indicates that this should be created as a new ID. You can use this identifier to retrieve and modify the drawable with  View.findViewById() or  Activity.findViewById() . android:top Integer . The top offset in pixels. android:right Integer . The right offset in pixels. android:bottom Integer . The bottom offset in pixels. android:left Integer . The left offset in pixels.

All drawable items are scaled to fit the size of the containing View, by default. Thus, placing your images in a layer list at different positions might increase the size of the View and some images scale as appropriate. To avoid scaling items in the list, use a  element inside the  element to specify the drawable and define the gravity to something that does not scale, such as "center" . For example, the following defines an item that scales to fit its container View:

 <item android:drawable="@drawable/image" />

 

To avoid scaling, the following example uses a  element with centered gravity:

 <item>
   <bitmap android:src="@drawable/image"
           android:gravity="center" />
 item>

  example:XML file saved at  res/drawable/layers.xml :

 xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item>
       <bitmap android:src="@drawable/android_red"
         android:gravity="center" />
     item>
     <item android:top="10dp" android:left="10dp">
       <bitmap android:src="@drawable/android_green"
         android:gravity="center" />
     item>
     <item android:top="20dp" android:left="20dp">
       <bitmap android:src="@drawable/android_blue"
         android:gravity="center" />
     item>
 layer-list>

Notice that this example uses a nested  element to define the drawable resource for each item with a "center" gravity. This ensures that none of the images are scaled to fit the size of the container, due to resizing caused by the offset images.

This layout XML applies the drawable to a View:

 

This layout XML applies the drawable to a View:

 

 <ImageView
     android:layout_height="wrap_content"
     android:layout_width="wrap_content"
     android:src="@drawable/layers" />

 

The result is a stack of increasingly offset images:

see also:

• LayerDrawable