Android TextView加上阴影效果

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

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.  

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组试验：

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.  

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位置较大就行了，字体颜色跟阴影颜色要协调（建议使用相同，相近，相差太大就难看比如黑色跟白色）

  试验代码：

    

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）的那么结果为：

代码：

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值

代码：

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>

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

代码：

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也可以这么美，完全不需要使用图片

 

https://blog.youkuaiyun.com/hewence1/article/details/39993415