转-Android TextView加上阴影效果

 

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

 

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

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

1. android:shadowColor:阴影的颜色
2. android:shadowDx:水平方向上的偏移量
3. android:shadowDy:垂直方向上的偏移量
4. Android:shadowRadius:是阴影的的半径大少

最好这4个值都一起设计

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

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

  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.      <TextView
  8.             android:id=“@+id/test_shadow”
  9.             android:layout_width=“wrap_content”
  10.             android:layout_height=“wrap_content”
  11.             android:textSize=“60sp”
  12.             android:textColor=“#ffffffff”
  13.             android:shadowColor=“#ff000000”
  14.             android:text=“Test Shadow”
  15.             android:layout_gravity=“center”
  16.             android:shadowRadius=“1”
  17.             android:shadowDx=“0”
  18.             android:shadowDy=“0”
  19.             />
  20.         <TextView
  21.             android:id=“@+id/test_shadow2”
  22.             android:layout_width=“wrap_content”
  23.             android:layout_height=“wrap_content”
  24.             android:textSize=“60sp”
  25.             android:textColor=“#ffffffff”
  26.             android:layout_gravity=“center”
  27.             android:text=“Test Shadow”
  28.             android:shadowColor=“#ff000000”
  29.             android:shadowRadius=“1”
  30.             android:shadowDx=“10”
  31.             android:shadowDy=“10”
  32.             />
  33.         <TextView
  34.             android:id=“@+id/test_shadow3”
  35.             android:layout_width=“wrap_content”
  36.             android:layout_height=“wrap_content”
  37.             android:textSize=“60sp”
  38.             android:textColor=“#ffffffff”
  39.             android:layout_gravity=“center”
  40.             android:text=“Test Shadow”
  41.             android:shadowColor=“#ff000000”
  42.             android:shadowRadius=“1”
  43.             android:shadowDx=“30”
  44.             android:shadowDy=“30”
  45.             />
  46. </LinearLayout>

dx  dy 分别为   (0 , 0) , (10 , 10 ) , (30 , 30)结果如下:

现在更加清楚了吧!

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

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

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 的 比值 就影响光源的角度

  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.     <TextView
  15.         android:id=“@+id/test_shadow2”
  16.         android:layout_width=“wrap_content”
  17.         android:layout_height=“wrap_content”
  18.         android:textSize=“60sp”
  19.         android:textColor=“#ffffffff”
  20.         android:layout_gravity=“center”
  21.         android:text=“Test Shadow”
  22.         android:shadowColor=“#ff000000”
  23.         android:shadowRadius=“1”
  24.         android:shadowDx=“-5”
  25.         android:shadowDy=“0”
  26.         />
  27.     <TextView
  28.         android:id=“@+id/test_shadow2”
  29.         android:layout_width=“wrap_content”
  30.         android:layout_height=“wrap_content”
  31.         android:textSize=“60sp”
  32.         android:textColor=“#ffffffff”
  33.         android:layout_gravity=“center”
  34.         android:text=“Test Shadow”
  35.         android:shadowColor=“#ff000000”
  36.         android:shadowRadius=“1”
  37.         android:shadowDx=“0”
  38.         android:shadowDy=“5”
  39.         />
  40.     <TextView
  41.         android:id=“@+id/test_shadow3”
  42.         android:layout_width=“wrap_content”
  43.         android:layout_height=“wrap_content”
  44.         android:textSize=“60sp”
  45.         android:textColor=“#ffffffff”
  46.         android:layout_gravity=“center”
  47.         android:text=“Test Shadow”
  48.         android:shadowColor=“#ff000000”
  49.         android:shadowRadius=“1”
  50.         android:shadowDx=“0”
  51.         android:shadowDy=“-5”
  52.         />


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

现在三组 设置为 (0.2 , 0.2) , (1 , 1) , (2 , 2)

结果

光圈效果:

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

试验代码:

 

  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.      <TextView
  15.             android:id=“@+id/test_shadow2”
  16.             android:layout_width=“wrap_content”
  17.             android:layout_height=“wrap_content”
  18.             android:textSize=“60sp”
  19.             android:textColor=“#ffffffff”
  20.             android:layout_gravity=“center”
  21.             android:text=“Test Shadow”
  22.             android:shadowColor=“#ffee00ff”
  23.             android:shadowRadius=“2”
  24.             android:shadowDx=“0”
  25.             android:shadowDy=“0”
  26.             />
  27.         <TextView
  28.             android:id=“@+id/test_shadow2”
  29.             android:layout_width=“wrap_content”
  30.             android:layout_height=“wrap_content”
  31.             android:textSize=“60sp”
  32.             android:textColor=“#ffffffff”
  33.             android:layout_gravity=“center”
  34.             android:text=“Test Shadow”
  35.             android:shadowColor=“#ffeedd00”
  36.             android:shadowRadius=“5”
  37.             android:shadowDx=“0”
  38.             android:shadowDy=“0”
  39.             />
  40.         <TextView
  41.             android:id=“@+id/test_shadow2”
  42.             android:layout_width=“wrap_content”
  43.             android:layout_height=“wrap_content”
  44.             android:textSize=“60sp”
  45.             android:textColor=“#ffffffff”
  46.             android:layout_gravity=“center”
  47.             android:text=“Test Shadow”
  48.             android:shadowColor=“#ff335824”
  49.             android:shadowRadius=“10”
  50.             android:shadowDx=“0”
  51.             android:shadowDy=“0”
  52.             />

结果:这样看起来还算好看把荧光灯的效果: 把把dx  dy设置为0 , Raduis位置较大就行了,最重要的事字体颜色 跟背景颜色一样(或者非常相近)

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

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

代码:

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

结果就是:  这个更明显一点

再把dx  dy 都设置为0

结果:

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

代码:

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

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

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

结果2:

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

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