Android字体阴影

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:阴影的范围

    字体阴影是一种误称,因为实际上我们可以实现一些与阴影看起来毫不相关的效果,这个我们将在后面看到。无论如何,让我们从一个简单的类似阴影的效果开始:

01 <LinearLayout
02     xmlns:android="http://schemas.android.com/apk/res/android"
03     android:orientation="vertical"
04     android:background="@color/White"
05     android:layout_width="fill_parent"
06     android:layout_height="fill_parent">
07     <TextView android:textColor="@color/Black"
08         android:layout_width="wrap_content"
09         android:text="Simple
Shadow"
10         android:layout_height="wrap_content"
11         android:padding="2dp"
12         android:shadowColor="@color/TransparentGrey"
13         android:shadowDx="3"
14         android:shadowDy="3"
15         android:shadowRadius="0.01" />
16 </LinearLayout>

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

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

    以及res/drawables/gradient.xml:

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

    如果运行程序,我们将会看到一个简单的投影效果。

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

    好了,这个例子实现了一个灰色的阴影,水平垂直方向上偏移3个像素(似乎应该是dp?但是不是3dp。),并且用一个非常非常小的阴影半径实现了硬边缘的阴影。

    我们可以通过增加阴影半径来软化阴影:

01 <LinearLayout
02     xmlns:android="http://schemas.android.com/apk/res/android"
03     android:orientation="vertical"
04     android:background="@color/White"
05     android:layout_width="fill_parent"
06     android:layout_height="fill_parent">
07     <TextView android:textColor="@color/Black"
08         android:layout_width="wrap_content"
09         android:text="Soft
Shadow"
10         android:layout_height="wrap_content"
11         android:padding="2dp"
12         android:shadowColor="@color/TransparentGrey"
13         android:shadowDx="3"
14         android:shadowDy="3"
15         android:shadowRadius="1.5" />
16 </LinearLayout>

    这个效果如下:

    还有一件事情是,我们可以通过改变偏移量来有效的改变光源的方向:

01 <LinearLayout
02     xmlns:android="http://schemas.android.com/apk/res/android"
03     android:orientation="vertical"
04     android:background="@color/White"
05     android:layout_width="fill_parent"
06     android:layout_height="fill_parent">
07     <TextView android:textColor="@color/Black"
08         android:layout_width="wrap_content"
09         android:text="Soft
Shadow (Below)"
10         android:layout_height="wrap_content"
11         android:padding="2dp"
12         android:shadowColor="@color/TransparentGrey"
13         android:shadowDx="3"
14         android:shadowDy="-3"
15         android:shadowRadius="1.5" />
16 </LinearLayout>

    效果如下:


    有一种“浮雕效果”(engraved)在当前相当广泛的流传着,此效果在灰色或金属背景上尤为出色。我们可以通过用一点儿白色的模糊阴影和小量的偏移来实现此效果: 

01 <LinearLayout
02     xmlns:android="http://schemas.android.com/apk/res/android"
03     android:orientation="vertical"
04     android:background="@color/White"
05     android:layout_width="fill_parent"
06     android:layout_height="fill_parent">
07     <TextView android:textColor="@color/Black"
08         android:layout_width="wrap_content"
09         android:text="Soft
Shadow (Below)"
10         android:layout_height="wrap_content"
11         android:padding="2dp"
12         android:shadowColor="@color/TransparentGrey"
13         android:shadowDx="3"
14         android:shadowDy="-3"
15         android:shadowRadius="1.5" />
16 </LinearLayout>

    它看起来是这样子的:


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

01 <LinearLayout
02     xmlns:android="http://schemas.android.com/apk/res/android"
03     android:orientation="vertical"
04     android:background="@color/Black"
05     android:layout_width="fill_parent"
06     android:layout_height="fill_parent">
07     <TextView android:textColor="@color/White"
08         android:layout_width="wrap_content"
09         android:text="Glowing
Text"
10         android:layout_height="wrap_content"
11         android:padding="2dp"
12         android:shadowColor="@color/White"
13         android:shadowDx="0"
14         android:shadowDy="0"
15         android:shadowRadius="3" />
16 </LinearLayout>

    效果如图:


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

01 <LinearLayout
02     xmlns:android="http://schemas.android.com/apk/res/android"
03     android:orientation="vertical"
04     android:background="@color/Black"
05     android:layout_width="fill_parent"
06     android:layout_height="fill_parent">
07     <TextView android:textColor="@color/Black"
08         android:layout_width="wrap_content"
09         android:text="Ethereal
Text"
10         android:layout_height="wrap_content"
11         android:padding="2dp"
12         android:shadowColor="@color/White"
13         android:shadowDx="0"
14         android:shadowDy="0"
15         android:shadowRadius="2" />
16 </LinearLayout>

    效果如图:

    通过简单的改变阴影的颜色,我们也可以改变发光的效果。

01 <LinearLayout
02     xmlns:android="http://schemas.android.com/apk/res/android"
03     android:orientation="vertical"
04     android:background="@color/Black"
05     android:layout_width="fill_parent"
06     android:layout_height="fill_parent">
07     <TextView android:textColor="@color/Black"
08         android:layout_width="wrap_content"
09         android:text="Spooky
Text"
10         android:layout_height="wrap_content"
11         android:padding="2dp"
12         android:shadowColor="@color/Green"
13         android:shadowDx="0"
14         android:shadowDy="0"
15         android:shadowRadius="2" />
16 </LinearLayout>

    效果如图: 



    最后,让我们思考一个相当具有实用性的问题。有时候文字下的背景即是一个渐变或者甚至是一个花花绿绿的位图,背景上的文字在有些地方显得非常醒目,但是在别的地方就与背景色混在一起了。 
    下面有一个例子: 

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

01 <LinearLayout
02     xmlns:android="http://schemas.android.com/apk/res/android"
03     android:orientation="vertical"
04     android:background="@drawable/gradient"
05     android:layout_width="fill_parent"
06     android:layout_height="fill_parent">
07     <TextView android:textColor="@color/Black"
08         android:layout_width="wrap_content"
09         android:text="This
is text which gets lost in the background"
10         android:layout_height="wrap_content"
11         android:textStyle="bold"
12         android:padding="2dp"
13         android:shadowColor="@color/White"
14         android:shadowDx="0"
15         android:shadowDy="0"
16         android:shadowRadius="0.7" />
17 </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)。

时间: 2024-10-21 11:53:46

Android字体阴影的相关文章

Win8系统桌面图标字体阴影不在了怎么办?

  在win8.1系统中,通常情况下桌面图标下方的文字会伴随着阴影存在,一时为了方便用户查找发现,其次是在一定基础上起到了美化的作用,不过近期有朋友发现,原本在桌面图标下方的文字阴影不在了,桌面图标文字也变得非常的难看,对于该问题我们如果来应对解决呢?下面随小编看下详细的解决方法吧! 方法如下: 1.首先右键点击--这台电脑,然后点击--属性. 2.在系统信息界面点击"高级系统设置"; 3.注意点击高级系统设置; 4.选择---高级-性能---设置; 5.自定义下面:勾选-在桌面上为图

Android字体修改,所有的细节都在这里 | 开篇

本文讲的是Android字体修改,所有的细节都在这里 | 开篇,在 Android 下使用自定义字体已经是一个比较常见的需求了,最近也做了个比较深入的研究. 那么按照惯例我又要出个一篇有关 Android 修改字体相关的文章,但是写下来发现内容还挺多的,所以我决定将它们拆分一下,分几篇来详细的讲解(可能是五篇).主要会是一些常用的替换字体的方案,最后还会介绍一些全局替换的方案,当然也会包含最新的 『Fonts in XML』的方案. 期待你持续关注. 一.开篇 因为 Android 字体相关的内

Android字体设置及Roboto字体使用方法_Android

本文实例讲述了Android字体设置及Roboto字体使用方法.分享给大家供大家参考.具体分析如下: 一.自定义字体 1.android Typeface使用TTF字体文件设置字体 我们可以在程序中放入ttf字体文件,在程序中使用Typeface设置字体. 第一步,在assets目录下新建fonts目录,把ttf字体文件放到这. 第二步,程序中调用: 复制代码 代码如下: AssetManager mgr=getAssets();//得到AssetManager Typeface tf=Type

Android字体Font相关知识

Android字体简介 Android系统默认支持三种字体,分别为:"sans","serif","monospace". android.graphic.typeface字体类: 本类的常量静态定义,首先为字体类型(typeface)名称 TypefaceDEFAULTTypeface DEFAULT_BOLDTypeface MONOSPACETypefaceSANS_SERIFTypeface SERIF 字体风格(style)名称 int

winform 字体阴影怎么实现啊?急急急!!!!!!!!

问题描述 winform字体阴影怎么实现啊? 解决方案 解决方案二:方法一,比如对于lable,放置两个,一个设置成阴影色,与另一个错开点方法二,重载组件,在OnPaint中画出阴影,也就是便宜一个位置画出文字解决方案三:<divSTYLE="position:absolute;top:13;left:18;width:400;height:100;"><h1CLASS="shadow"><fontcolor="#8000FF

Android字体设置及Roboto字体使用方法

本文实例讲述了Android字体设置及Roboto字体使用方法.分享给大家供大家参考.具体分析如下: 一.自定义字体 1.android Typeface使用TTF字体文件设置字体 我们可以在程序中放入ttf字体文件,在程序中使用Typeface设置字体. 第一步,在assets目录下新建fonts目录,把ttf字体文件放到这. 第二步,程序中调用: 复制代码 代码如下:AssetManager mgr=getAssets();//得到AssetManager Typeface tf=Typef

Android字体大小自适应不同分辨率的解决办法

Android字体大小自适应不同分辨率的解决办法 今天有人问我,Android系统不同分辨率,不同大小的手机,字体大小怎么去适应呢?其实字体的适应和图片的适应是一个道理的. 一.原理如下: 假设需要适应320x240,480x320分辨率.在res目录下新建文件夹values-320x240, values-480x320.然后在文件夹 values , values-320x240 和  values-480x320 下新建xml文件dimens.xml,该xml文件内容如下: vaules-

Android 字体库的使用

  开发Android的人大多都知道,Android里面对字体的支持少得可怜,默认情况下,TextView  的 typeface 属性支持 "Sans","serif","monospace" 这三种字体,如果在没有指定字体的情况下,系统缺省会使用 "Sans" 作为文本显示的字体.但这三种字体只支持英文,也就是说只要你显示的文字是中文,无论你选择这三种字体中的哪一种,显示效果都是一样的.   但这对开发一款精致的APP来说

Android字体随心换 《爱字体》试用

浏览及下载字体S60时代的手机玩家们肯定还记得用X-Plorer更换系统字体的乐趣,过程中一旦出了差错就得面对满屏幕的口口凭记忆还原字体文件,风险与乐趣并存.在Android系统中我们同样可以自行设置系统字体,而且更方便的是有专门的软件来实现这个操作,今天为大家介绍的就是Android系统字体更换小工具--爱字体.爱字体软件价格:免费软件评分:4.4(8,121)软件版本:1.8软件大小:2.2 MB系统需求:Android 2.1 及以上版本下载地址:浏览及下载字体由于涉及修改系统级文件,因此