Android TextView加上阴影效果

废话不多说直接说关键的：

字体阴影需要四个相关参数：

1. android:shadowColor：阴影的颜色
2. android:shadowDx：水平方向上的偏移量
3. android:shadowDy：垂直方向上的偏移量

4. android:shadowRadius：是阴影的的半径大少

最好这4个值都一起设计

          shadowColor这个属性就不多说了，android:shadowDx跟android:shadowDy

        为了更清楚的演示就做个试验，分三组xml布局如下：

[html]  view plain  copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical"  
6.     android:background="#ff895544" >  
7.   
8.      <TextView   
9.             android:id="@+id/test_shadow"  
10.             android:layout_width="wrap_content"  
11.             android:layout_height="wrap_content"  
12.             android:textSize="60sp"  
13.             android:textColor="#ffffffff"  
14.             android:shadowColor="#ff000000"  
15.             android:text="Test Shadow"  
16.             android:layout_gravity="center"  
17.             android:shadowRadius="1"  
18.             android:shadowDx="0"  
19.             android:shadowDy="0"  
20.             />  
21.          
22.         <TextView   
23.             android:id="@+id/test_shadow2"  
24.             android:layout_width="wrap_content"  
25.             android:layout_height="wrap_content"  
26.             android:textSize="60sp"  
27.             android:textColor="#ffffffff"  
28.             android:layout_gravity="center"  
29.             android:text="Test Shadow"  
30.             android:shadowColor="#ff000000"  
31.             android:shadowRadius="1"  
32.             android:shadowDx="10"  
33.             android:shadowDy="10"  
34.             />  
35.           
36.         <TextView   
37.             android:id="@+id/test_shadow3"  
38.             android:layout_width="wrap_content"  
39.             android:layout_height="wrap_content"  
40.             android:textSize="60sp"  
41.             android:textColor="#ffffffff"  
42.             android:layout_gravity="center"  
43.             android:text="Test Shadow"  
44.             android:shadowColor="#ff000000"  
45.             android:shadowRadius="1"  
46.             android:shadowDx="30"  
47.             android:shadowDy="30"  
48.             />  
49.           
50. </LinearLayout>  

dx  dy 分别为   （0 ， 0） ， （10 ， 10 ） ， （30 ， 30）

结果如下：

现在更加清楚了吧！

下一个属性是android:shadowRadius  是阴影的的半径大少

对于此属性进行6组试验：

扫描二维码关注公众号，回复： 182895 查看本文章

dx  dy 都是 30  shadowRadius  分别为： 0 ， 0.01 ， 1 ， 2 ， 5 ， 10

结果如下：

从结果分析：

1 这个值为0的话是不会显示的

2 值越大，阴影就越大，而且越模糊

到现在应该都清楚这4个值会影响什么效果了，经验丰富的从属性名字就大概知道是什么意思了。

现在回到正常阴影的效果：

      1.可以把shadowRadius  变大来实现阴影模糊，使得看起来更加的自然：

代码：

     <TextView 
   android:id="@+id/test_shadow"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:textSize="60sp"
   android:textColor="#ffffffff"
   android:shadowColor="#ff000000"
   android:text="Test Shadow"
   android:layout_gravity="center"
   android:shadowRadius="1"
   android:shadowDx="5"
   android:shadowDy="5"
   />
       
<TextView 
   android:id="@+id/test_shadow2"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:textSize="60sp"
   android:textColor="#ffffffff"
   android:layout_gravity="center"
   android:text="Test Shadow"
   android:shadowColor="#ff000000"
   android:shadowRadius="5"
   android:shadowDx="5"
   android:shadowDy="5"
   />

<TextView 
   android:id="@+id/test_shadow2"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:textSize="60sp"
   android:textColor="#ffffffff"
   android:layout_gravity="center"
   android:text="Test Shadow"
   android:shadowColor="#ff000000"
   android:shadowRadius="10"
   android:shadowDx="5"
   android:shadowDy="5"
   />

效果：

调节shadowRadius来确定最适合自己的阴影

2.调试dx  跟 dy来改变光源，使阴影偏向不同的方向 跟  距离

      如果光源是在左边，那么dx 是为正的， 

     光源在最右边，那么dx就是负

     光源在上  那么dy 为 正

     光源在下， 那么dy 为 负  

那么左上 ， 右下 就是。。。。。。

dx  跟 dy 的正负调节方向， 其值的大少影响距离 ，dx 跟 dy 的 比值 就影响光源的角度

[html]  view plain  copy

1. <TextView   
2.         android:id="@+id/test_shadow"  
3.         android:layout_width="wrap_content"  
4.         android:layout_height="wrap_content"  
5.         android:textSize="60sp"  
6.         android:textColor="#ffffffff"  
7.         android:shadowColor="#ff000000"  
8.         android:text="Test Shadow"  
9.         android:layout_gravity="center"  
10.         android:shadowRadius="1"  
11.         android:shadowDx="5"  
12.         android:shadowDy="0"  
13.         />  
14.         
15.     <TextView   
16.         android:id="@+id/test_shadow2"  
17.         android:layout_width="wrap_content"  
18.         android:layout_height="wrap_content"  
19.         android:textSize="60sp"  
20.         android:textColor="#ffffffff"  
21.         android:layout_gravity="center"  
22.         android:text="Test Shadow"  
23.         android:shadowColor="#ff000000"  
24.         android:shadowRadius="1"  
25.         android:shadowDx="-5"  
26.         android:shadowDy="0"  
27.         />  
28.       
29.     <TextView   
30.         android:id="@+id/test_shadow2"  
31.         android:layout_width="wrap_content"  
32.         android:layout_height="wrap_content"  
33.         android:textSize="60sp"  
34.         android:textColor="#ffffffff"  
35.         android:layout_gravity="center"  
36.         android:text="Test Shadow"  
37.         android:shadowColor="#ff000000"  
38.         android:shadowRadius="1"  
39.         android:shadowDx="0"  
40.         android:shadowDy="5"  
41.         />  
42.       
43.     <TextView   
44.         android:id="@+id/test_shadow3"  
45.         android:layout_width="wrap_content"  
46.         android:layout_height="wrap_content"  
47.         android:textSize="60sp"  
48.         android:textColor="#ffffffff"  
49.         android:layout_gravity="center"  
50.         android:text="Test Shadow"  
51.         android:shadowColor="#ff000000"  
52.         android:shadowRadius="1"  
53.         android:shadowDx="0"  
54.         android:shadowDy="-5"  
55.         />  

带一点浮雕效果的，把dx  dy都设置较小的值

现在三组 设置为 （0.2 ， 0.2） ， （1 ， 1） ， （2 ， 2）

结果

光圈效果：

     把dx  dy设置为0 ， Raduis位置较大就行了，字体颜色跟阴影颜色要协调（建议使用相同，相近，相差太大就难看比如黑色跟白色）

  试验代码：

    

[java]  view plain  copy

1. <TextView   
2.             android:id="@+id/test_shadow"  
3.             android:layout_width="wrap_content"  
4.             android:layout_height="wrap_content"  
5.             android:textSize="60sp"  
6.             android:textColor="#ffffffff"  
7.             android:layout_gravity="center"  
8.             android:text="Test Shadow"  
9.             android:shadowColor="#ff00ff00"  
10.             android:shadowRadius="1"  
11.             android:shadowDx="0"  
12.             android:shadowDy="0"  
13.             />  
14.        
15.      <TextView   
16.             android:id="@+id/test_shadow2"  
17.             android:layout_width="wrap_content"  
18.             android:layout_height="wrap_content"  
19.             android:textSize="60sp"  
20.             android:textColor="#ffffffff"  
21.             android:layout_gravity="center"  
22.             android:text="Test Shadow"  
23.             android:shadowColor="#ffee00ff"  
24.             android:shadowRadius="2"  
25.             android:shadowDx="0"  
26.             android:shadowDy="0"  
27.             />  
28.          
29.         <TextView   
30.             android:id="@+id/test_shadow2"  
31.             android:layout_width="wrap_content"  
32.             android:layout_height="wrap_content"  
33.             android:textSize="60sp"  
34.             android:textColor="#ffffffff"  
35.             android:layout_gravity="center"  
36.             android:text="Test Shadow"  
37.             android:shadowColor="#ffeedd00"  
38.             android:shadowRadius="5"  
39.             android:shadowDx="0"  
40.             android:shadowDy="0"  
41.             />  
42.           
43.           
44.           
45.         <TextView   
46.             android:id="@+id/test_shadow2"  
47.             android:layout_width="wrap_content"  
48.             android:layout_height="wrap_content"  
49.             android:textSize="60sp"  
50.             android:textColor="#ffffffff"  
51.             android:layout_gravity="center"  
52.             android:text="Test Shadow"  
53.             android:shadowColor="#ff335824"  
54.             android:shadowRadius="10"  
55.             android:shadowDx="0"  
56.             android:shadowDy="0"  
57.             />  

结果： 这样看起来还算好看把

荧光灯的效果： 把把dx  dy设置为0 ， Raduis位置较大就行了，最重要的事字体颜色 跟背景颜色一样（或者非常相近）

如果再把dx  跟  dy再设置一下的话 就会变成这样的dx dy 分别为 (1 ,1) , (2 , 2) , (5 , 5) ,(10 , 10)

上面使用的背景色跟字体都是为（#ff895544） 那么我们把字体设置为相近（#ff784433）的那么结果为：

代码：

[java]  view plain  copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical"  
6.     android:background="#ff895544" >  
7.   
8.      <TextView   
9.             android:id="@+id/test_shadow"  
10.             android:layout_width="wrap_content"  
11.             android:layout_height="wrap_content"  
12.             android:textSize="60sp"  
13.             android:textColor="#ff784433"  
14.             android:layout_gravity="center"  
15.             android:text="Test Shadow"  
16.             android:shadowColor="#ff00ff00"  
17.             android:shadowRadius="1"  
18.             android:shadowDx="1"  
19.             android:shadowDy="1"  
20.             />  
21.        
22.      <TextView   
23.             android:id="@+id/test_shadow2"  
24.             android:layout_width="wrap_content"  
25.             android:layout_height="wrap_content"  
26.             android:textSize="60sp"  
27.             android:textColor="#ff784433"  
28.             android:layout_gravity="center"  
29.             android:text="Test Shadow"  
30.             android:shadowColor="#ffee00ff"  
31.             android:shadowRadius="2"  
32.             android:shadowDx="2"  
33.             android:shadowDy="2"  
34.             />  
35.          
36.         <TextView   
37.             android:id="@+id/test_shadow2"  
38.             android:layout_width="wrap_content"  
39.             android:layout_height="wrap_content"  
40.             android:textSize="60sp"  
41.             android:textColor="#ff784433"  
42.             android:layout_gravity="center"  
43.             android:text="Test Shadow"  
44.             android:shadowColor="#ffeedd00"  
45.             android:shadowRadius="5"  
46.             android:shadowDx="5"  
47.             android:shadowDy="5"  
48.             />  
49.           
50.           
51.           
52.         <TextView   
53.             android:id="@+id/test_shadow2"  
54.             android:layout_width="wrap_content"  
55.             android:layout_height="wrap_content"  
56.             android:textSize="60sp"  
57.             android:textColor="#ff784433"  
58.             android:layout_gravity="center"  
59.             android:text="Test Shadow"  
60.             android:shadowColor="#ff335824"  
61.             android:shadowRadius="10"  
62.             android:shadowDx="10"  
63.             android:shadowDy="10"  
64.             />  
65. </LinearLayout>  

结果就是：

  这个更明显一点

再把dx  dy 都设置为0

结果：

颜色混合：主要是修改字体颜色的alpha值

代码：

[java]  view plain  copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical"  
6.     android:background="#ff000000" >  
7.   
8.      <TextView   
9.             android:id="@+id/test_shadow"  
10.             android:layout_width="wrap_content"  
11.             android:layout_height="wrap_content"  
12.             android:textSize="60sp"  
13.             android:textColor="#ffffffff"  
14.             android:layout_gravity="center"  
15.             android:text="Test Shadow"  
16.             android:shadowColor="#ffffff00"  
17.             android:shadowRadius="5"  
18.             android:shadowDx="0"  
19.             android:shadowDy="0"  
20.             />  
21.      <TextView   
22.             android:id="@+id/test_shadow"  
23.             android:layout_width="wrap_content"  
24.             android:layout_height="wrap_content"  
25.             android:textSize="60sp"  
26.             android:textColor="#afffffff"  
27.             android:layout_gravity="center"  
28.             android:text="Test Shadow"  
29.             android:shadowColor="#ffffff00"  
30.             android:shadowRadius="5"  
31.             android:shadowDx="0"  
32.             android:shadowDy="0"  
33.             />  
34.      <TextView   
35.             android:id="@+id/test_shadow"  
36.             android:layout_width="wrap_content"  
37.             android:layout_height="wrap_content"  
38.             android:textSize="60sp"  
39.             android:textColor="#9fffffff"  
40.             android:layout_gravity="center"  
41.             android:text="Test Shadow"  
42.             android:shadowColor="#ffffff00"  
43.             android:shadowRadius="5"  
44.             android:shadowDx="0"  
45.             android:shadowDy="0"  
46.             />  
47.      <TextView   
48.             android:id="@+id/test_shadow"  
49.             android:layout_width="wrap_content"  
50.             android:layout_height="wrap_content"  
51.             android:textSize="60sp"  
52.             android:textColor="#6fffffff"  
53.             android:layout_gravity="center"  
54.             android:text="Test Shadow"  
55.             android:shadowColor="#ffffff00"  
56.             android:shadowRadius="5"  
57.             android:shadowDx="0"  
58.             android:shadowDy="0"  
59.             />  
60.      <TextView   
61.             android:id="@+id/test_shadow"  
62.             android:layout_width="wrap_content"  
63.             android:layout_height="wrap_content"  
64.             android:textSize="60sp"  
65.             android:textColor="#3fffffff"  
66.             android:layout_gravity="center"  
67.             android:text="Test Shadow"  
68.             android:shadowColor="#ffffff00"  
69.             android:shadowRadius="5"  
70.             android:shadowDx="0"  
71.             android:shadowDy="0"  
72.             />  
73.           
74. </LinearLayout>  

结果：   可以让阴影颜色现在显示在字体颜色中

代码：

[java]  view plain  copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical"  
6.     android:background="#ff000000" >  
7.   
8.     <TextView   
9.             android:id="@+id/test_shadow"  
10.             android:layout_width="wrap_content"  
11.             android:layout_height="wrap_content"  
12.             android:textSize="60sp"  
13.             android:textColor="#cc000000"  
14.             android:text="Test Shadow"  
15.             android:layout_gravity="center"  
16.             android:shadowColor="#aa22ff22"  
17.             android:shadowRadius="10"  
18.             android:shadowDx="0"  
19.             android:shadowDy="0"  
20.             />  
21.          
22.      <TextView   
23.             android:id="@+id/test_shadow"  
24.             android:layout_width="wrap_content"  
25.             android:layout_height="wrap_content"  
26.             android:textSize="60sp"  
27.             android:textColor="#aa000000"  
28.             android:text="Test Shadow"  
29.             android:layout_gravity="center"  
30.             android:shadowColor="#aa22ff22"  
31.             android:shadowRadius="10"  
32.             android:shadowDx="0"  
33.             android:shadowDy="0"  
34.             />  
35.       <TextView   
36.             android:id="@+id/test_shadow"  
37.             android:layout_width="wrap_content"  
38.             android:layout_height="wrap_content"  
39.             android:textSize="60sp"  
40.             android:textColor="#77000000"  
41.             android:text="Test Shadow"  
42.             android:layout_gravity="center"  
43.             android:shadowColor="#aa22ff22"  
44.             android:shadowRadius="10"  
45.             android:shadowDx="0"  
46.             android:shadowDy="0"  
47.             />  
48.        <TextView   
49.             android:id="@+id/test_shadow"  
50.             android:layout_width="wrap_content"  
51.             android:layout_height="wrap_content"  
52.             android:textSize="60sp"  
53.             android:textColor="#33000000"  
54.             android:text="Test Shadow"  
55.             android:layout_gravity="center"  
56.             android:shadowColor="#aa22ff22"  
57.             android:shadowRadius="10"  
58.             android:shadowDx="0"  
59.             android:shadowDy="0"  
60.             />  
61.          
62.         <TextView   
63.             android:id="@+id/test_shadow2"  
64.             android:layout_width="wrap_content"  
65.             android:layout_height="wrap_content"  
66.             android:textSize="60sp"  
67.             android:textColor="#33000000"  
68.             android:text="Test Shadow"  
69.             android:layout_gravity="center"  
70.             android:shadowColor="#aaffffff"  
71.             android:shadowRadius="10"  
72.             android:shadowDx="0"  
73.             android:shadowDy="0"  
74.             />  
75.           
76.         <TextView   
77.             android:id="@+id/test_shadow2"  
78.             android:layout_width="wrap_content"  
79.             android:layout_height="wrap_content"  
80.             android:textSize="60sp"  
81.             android:textColor="#55000000"  
82.             android:text="Test Shadow"  
83.             android:layout_gravity="center"  
84.             android:shadowColor="#ffffffff"  
85.             android:shadowRadius="10"  
86.             android:shadowDx="0"  
87.             android:shadowDy="0"  
88.             />  
89.         <TextView   
90.             android:id="@+id/test_shadow2"  
91.             android:layout_width="wrap_content"  
92.             android:layout_height="wrap_content"  
93.             android:textSize="60sp"  
94.             android:textColor="#77000000"  
95.             android:text="Test Shadow"  
96.             android:layout_gravity="center"  
97.             android:shadowColor="#ffffffff"  
98.             android:shadowRadius="10"  
99.             android:shadowDx="0"  
100.             android:shadowDy="0"  
101.             />  
102.         <TextView   
103.             android:id="@+id/test_shadow2"  
104.             android:layout_width="wrap_content"  
105.             android:layout_height="wrap_content"  
106.             android:textSize="60sp"  
107.             android:textColor="#99000000"  
108.             android:text="Test Shadow"  
109.             android:layout_gravity="center"  
110.             android:shadowColor="#ffffffff"  
111.             android:shadowRadius="10"  
112.             android:shadowDx="0"  
113.             android:shadowDy="0"  
114.             />  
115.         <TextView   
116.             android:id="@+id/test_shadow2"  
117.             android:layout_width="wrap_content"  
118.             android:layout_height="wrap_content"  
119.             android:textSize="60sp"  
120.             android:textColor="#aa000000"  
121.             android:text="Test Shadow"  
122.             android:layout_gravity="center"  
123.             android:shadowColor="#ffffffff"  
124.             android:shadowRadius="10"  
125.             android:shadowDx="0"  
126.             android:shadowDy="0"  
127.             />  
128.           
129. </LinearLayout>  

结果2：

通过改变   字体背景色， 字体颜色  字体阴影色 阴影半径 dx  dy alpha  就可以实现这么多种效果（当然还有更多的效果，主要是颜色搭配）

原来textView也可以这么美，完全不需要使用图片

原文地址：

http://blog.csdn.net/hewence1/article/details/39993415