【译：Styling Android】字体阴影

转载声明：Ryan的博客文章欢迎您的转载，但在转载的同时，请注明文章的来源出处，不胜感激！ :-) 

http://my.oschina.net/ryanhoo/blog/86874

译者：Ryan Hoo

来源：http://blog.stylingandroid.com/archives/378#

译者按：在外企工做的半年多中花了很多时间在国外的网站上搜寻资料，其中有一些至关有含金量的文章，我会陆陆续续翻译成中文，与你们共享之。初次翻译，“信达雅”三境界恐怕只到信的层次，望你们见谅！

-------------------------------------------------------------------------------------

译文：

    一般一些像Photoshop这样的工具能够用来建立各类各样的文字效果，而且咱们常常用到的一种效果就是阴影。Android是支持字体阴影的，在这片文章中，咱们将会探讨各类建立阴影的方式。在TextView中实现字体阴影效果比在位图元素中的效率更高，而且使得设计可适配多种屏幕尺寸。相同条件下，Android的LayoutManager缩放TextView控件可比在ImageView中缩放位图要简单多了。

    字体阴影须要四个相关参数：
        1. android:shadowColor：阴影的颜色
        2. android:shadowDx：水平方向上的偏移量
        3. android:shadowDy：垂直方向上的偏移量
        4. android:shadowRadius：阴影的范围

    字体阴影是一种误称，由于实际上咱们能够实现一些与阴影看起来绝不相关的效果，这个咱们将在后面看到。不管如何，让咱们从一个简单的相似阴影的效果开始：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="@color/White"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView android:textColor="@color/Black"
        android:layout_width="wrap_content"
        android:text="Simple Shadow"
        android:layout_height="wrap_content"
        android:padding="2dp"
        android:shadowColor="@color/TransparentGrey"
        android:shadowDx="3"
        android:shadowDy="3"
        android:shadowRadius="0.01" />
</LinearLayout>

    这里有一些定义了颜色的支持文件，咱们将在本文中用到它们。它们是 res/values/colours.xml：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="White">#FFF</color>
    <color name="Black">#000</color>
    <color name="Grey">#7F7F7F</color>
    <color name="DarkGrey">#4F4F4F</color>
    <color name="Green">#0F0</color>
    <color name="TransparentGrey">#7F000000</color>
</resources>

    以及res/drawables/gradient.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="@color/White"
        android:endColor="@color/Black"
        android:angle="0"/>
</shape>

    若是运行程序，咱们将会看到一个简单的投影效果。

    这里只有一个方向的阴影而且有可能引发一些问题：阴影的范围必须始终存在，而且不能设置为'0'，不然阴影是不会被绘制出来的。在这个例子中，我想要硬边缘的阴影效果，因此我将shadowRadius设置为一个较小的数字以达到此效果。

    好了，这个例子实现了一个灰色的阴影，水平垂直方向上偏移3个像素(彷佛应该是dp?可是不是3dp。)，而且用一个很是很是小的阴影半径实现了硬边缘的阴影。

    咱们能够经过增长阴影半径来软化阴影：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="@color/White"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView android:textColor="@color/Black"
        android:layout_width="wrap_content"
        android:text="Soft Shadow"
        android:layout_height="wrap_content"
        android:padding="2dp"
        android:shadowColor="@color/TransparentGrey"
        android:shadowDx="3"
        android:shadowDy="3"
        android:shadowRadius="1.5" />
</LinearLayout>

    这个效果以下：

    还有一件事情是，咱们能够经过改变偏移量来有效的改变光源的方向：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="@color/White"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView android:textColor="@color/Black"
        android:layout_width="wrap_content"
        android:text="Soft Shadow (Below)"
        android:layout_height="wrap_content"
        android:padding="2dp"
        android:shadowColor="@color/TransparentGrey"
        android:shadowDx="3"
        android:shadowDy="-3"
        android:shadowRadius="1.5" />
</LinearLayout>

    效果以下：

    有一种“浮雕效果”(engraved)在当前至关普遍的流传着，此效果在灰色或金属背景上尤其出色。咱们能够经过用一点儿白色的模糊阴影和小量的偏移来实现此效果：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="@color/White"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView android:textColor="@color/Black"
        android:layout_width="wrap_content"
        android:text="Soft Shadow (Below)"
        android:layout_height="wrap_content"
        android:padding="2dp"
        android:shadowColor="@color/TransparentGrey"
        android:shadowDx="3"
        android:shadowDy="-3"
        android:shadowRadius="1.5" />
</LinearLayout>

    它看起来是这样子的：

    另外咱们可使用阴影建立光芒特效，经过将水平和垂直方向上的偏移量置为0，设置较大的模糊以及和文本颜色相匹配的阴影色。

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="@color/Black"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView android:textColor="@color/White"
        android:layout_width="wrap_content"
        android:text="Glowing Text"
        android:layout_height="wrap_content"
        android:padding="2dp"
        android:shadowColor="@color/White"
        android:shadowDx="0"
        android:shadowDy="0"
        android:shadowRadius="3" />
</LinearLayout>

    效果如图：

    咱们也可使用阴影建立外发光效果，方法是将文本的颜色设置为TextView的Parent背景颜色并将X，Y轴的偏移量设置为0已造成对比效果。

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="@color/Black"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView android:textColor="@color/Black"
        android:layout_width="wrap_content"
        android:text="Ethereal Text"
        android:layout_height="wrap_content"
        android:padding="2dp"
        android:shadowColor="@color/White"
        android:shadowDx="0"
        android:shadowDy="0"
        android:shadowRadius="2" />
</LinearLayout>

    效果如图：

    经过简单的改变阴影的颜色，咱们也能够改变发光的效果。

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="@color/Black"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView android:textColor="@color/Black"
        android:layout_width="wrap_content"
        android:text="Spooky Text"
        android:layout_height="wrap_content"
        android:padding="2dp"
        android:shadowColor="@color/Green"
        android:shadowDx="0"
        android:shadowDy="0"
        android:shadowRadius="2" />
</LinearLayout>

    效果如图：

    最后，让咱们思考一个至关具备实用性的问题。有时候文字下的背景便是一个渐变或者甚至是一个花花绿绿的位图，背景上的文字在有些地方显得很是醒目，可是在别的地方就与背景色混在一块儿了。
    下面有一个例子：

    左边的文本很容易阅读，可是越靠近右边，背景颜色就与文本颜色相趋近了，到最后文本会与背景变得一致而难以阅读。让咱们建立一个发光效果使得文本显出明显的差别。

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="@drawable/gradient"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView android:textColor="@color/Black"
        android:layout_width="wrap_content"
        android:text="This is text which gets lost in the background"
        android:layout_height="wrap_content"
        android:textStyle="bold"
        android:padding="2dp"
        android:shadowColor="@color/White"
        android:shadowDx="0"
        android:shadowDy="0"
        android:shadowRadius="0.7" />
</LinearLayout>

    这个效果使得文本在与背景颜色相近的时候依然很显眼。


    最后有一点很重要的是，咱们学了新的技术就值得去好好运用，可是这不意味着你要处处使用。对内容字体应用这种效果会致使它们变得更加难以阅读。 将这些花哨的效果限制在标题和独立的文本块中使用。

-------------------------------------------------------------------------------------

附录：+Kirill Grouchnikov 这篇文章中的方法有一个优势是：Android中为添加文本阴影并不会使文本边框增大。

    文章中全部的例子都是android:padding="2dp"，设置其余的阴影或许会出现阴影被裁减的现象（译者注：阴影偏移量过多，超出文本框范围的现象。所以偏移量要适中。:-)）。一个具备大范围的阴影，或者较大的偏移量须要更多的padding以防止这种现象。（译者注：意为增长TextView的padding）

    这篇文章的全部源码均可以在这里找到。

    ©Mark Allison. All rights reserved.这篇文章最先出如今 Styling Android。

    此页的某些部分是基于Google的创造和共享内容，并使用知识共享许可协议3.0版(CreativeCommons 3.0 Attribution License)。