使用图片作为TextView的字体颜色(前景?)

在dribbble上看到一个效果 https://dribbble.com/shots/2918663-INVES-profolio-cover,如下图:

就想如果用Android来实现该怎么做呢?

首先想到的是,把图片当做ViewGroup或者TextView的背景,在dispatchDraw()或者onDraw()里面使用PorterDuffXfermode进行DST_IN进行扣取,实际上试过之后,发现TextView的text绘制给扣取带来的坑太多,不是有断断续续的前景色就是文字区域文字笔画之外处理的有问题,还有就是TextView的bound和text的bound不好建立好的关联。ViewGroup形式,试过,直接pass,懒得放这过程中的效果图了。

接下来想到TextView可以设置Span,比如ForegroundColorSpan,看了下Span所有的已经实现的子类,并没有支持Drawable或者Image的。自定义貌似也不大可行。

最后,Shader,还是shader,它竟然有ImageShader。众里寻他千百度,它竟然在这儿,,

Android中提供了Shader类专门用来渲染View,或者称为着色器。它有5个子类BitmapShader(图片 CLAMP:边缘拉伸模式,MIRROR:镜像,REPEAT:重复), ComposeShader(对个Shader组合), LinearGradient(线性渐变), RadialGradient(径向渐变), SweepGradient(梯度渐变)。

Shader其他具体的信息参考:http://www.cnblogs.com/tianzhijiexian/p/4298660.html

首先准备一张背景图,dribble上的那个图片没有找到,就随便找了一张替代了:

字体倒是找到了:下载地址

开始写代码。。。。

新建一个View-->MagicTextView,继承TextView。

代码极少,就在View进行初始化的时候给paint进行设置。

getPaint().setShader(new BitmapShader(BitmapFactory.decodeResource(getResources(), R.drawable.bg), Shader.TileMode.REPEAT, Shader.TileMode.CLAMP));

设置shader,这样就OK了。

setTypeface(Typeface.createFromAsset(getContext().getAssets(), "LEVIBRUSH.TTF"));

设置个比较炫的字体。

全部代码:

public class MagicTextView extends TextView{

    public MagicTextView(Context context) {
        this(context, null);
    }

    public MagicTextView(Context context, AttributeSet attrs) {
        super(context, attrs);

        init();
    }

    private void init() {
        getPaint().setShader(new BitmapShader(BitmapFactory.decodeResource(getResources(), R.drawable.bg), Shader.TileMode.REPEAT, Shader.TileMode.CLAMP));
        setTypeface(Typeface.createFromAsset(getContext().getAssets(), "LEVIBRUSH.TTF"));
    }
}

只有两三行代码搞定。。。。

效果如下: