【譯：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)。