带有渐变 * 和 * 笔划的 Android TextView

Posted 2023-02-24

【中文标题】带有渐变 * 和 * 笔划的 Android TextView

【英文标题】：Android TextView with gradient *and* stroke

【发布时间】：2014-06-05 21:59:03

【问题描述】：

我现在正在寻找一段时间，我测试了很多东西，但没有任何效果。 我有一个 TextView，它应该有一个渐变填充颜色和一个笔触（不是 Textview 的背景，而是文本本身）。

我首先编写了一个 GradientTextView 类。目前我有一个带有渐变填充颜色和阴影的文本（阴影只是一个测试，也许我以后需要一个。目前笔触很重要）。但是当我尝试添加笔触时，只会显示笔触或渐变填充颜色。 我尝试了很多东西，例如解决方案 here.

import com.qualcomm.QCARSamples.ImageTargets.R;
import com.qualcomm.QCARSamples.ImageTargets.R.color;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Shader;
import android.graphics.Shader.TileMode;
import android.graphics.SweepGradient;
import android.util.AttributeSet;
import android.widget.TextView;

public class GradientTextView extends TextView

    public GradientTextView( Context context )
    
        super( context, null, -1 );
    
    public GradientTextView( Context context, 
        AttributeSet attrs )
    
        super( context, attrs, -1 );
    
    public GradientTextView( Context context, 
        AttributeSet attrs, int defStyle )
    
        super( context, attrs, defStyle );
    

int start_gradient = getResources().getColor(R.color.textview_start_gradient);
int end_gradient = getResources().getColor(R.color.textview_end_gradient);
Paint gradientpaint, strokepaint;

@Override
protected void onDraw(Canvas canvas) 
    // draw the shadow
    getPaint().setShadowLayer(10, 1, 1, 0xbf000000); 
    getPaint().setShader(null);
    super.onDraw(canvas);

    // draw the gradient filled text
    getPaint().clearShadowLayer();
    getPaint().setShader(new LinearGradient(0, 0, 0, getHeight(), 
        start_gradient, end_gradient, TileMode.CLAMP ) );
        super.onDraw(canvas);
        // **Attempts here**
    

（在“此处尝试”评论中插入的尝试）

第一次尝试：

super.onDraw(canvas);   
Paint one = new Paint();
one.setStyle(Style.STROKE);
one.setTextSize(20);
one.setStrokeWidth(5);
setTextColor(Color.BLACK); 
canvas.drawText(VIEW_LOG_TAG, 0, 0, one);

Paint two = new Paint();
two.setStyle(Style.FILL);
two.setTextSize(20);
two.setStrokeWidth(0);
setTextColor(Color.BLUE);
two.setShader(new LinearGradient(0, 0, 0, getHeight(), 
    start_gradient, end_gradient, TileMode.CLAMP ) );
canvas.drawText(VIEW_LOG_TAG, 0, 0, two);

第二次尝试：

Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
getPaint().setShader(new LinearGradient(0, 0, 0, getHeight(), 
    start_gradient, end_gradient, TileMode.CLAMP ) );
mPaint.setStyle(Paint.Style.FILL);
mPaint.setStrokeWidth(32);

super.onDraw(canvas);
Paint mCenterPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mCenterPaint.setStyle(Paint.Style.STROKE);
mCenterPaint.setColor(Color.GREEN);
mCenterPaint.setStrokeWidth(5);
super.onDraw(canvas);

第三次尝试：

gradientpaint = this.getPaint();
gradientpaint.setShader(new LinearGradient(0, 0, 0, getHeight(), 
    start_gradient, end_gradient, TileMode.CLAMP ) );
super.onDraw(canvas);
strokepaint = new Paint(gradientpaint);
strokepaint.setStyle(Paint.Style.STROKE);
strokepaint.setStrokeWidth(30);
strokepaint.setARGB(255, 0, 0, 0);

super.onDraw(canvas);

textview_start_gradient 和 textview_and_gradient 只是渐变的两种颜色。

每个都缺少描边或填充（完全透明）。

我该怎么做？

不，我试过这个：

新尝试：

// draw the shadow
getPaint().setShadowLayer(10, 6, 6, 0xbf000000); 
getPaint().setShader(null);
super.onDraw(canvas);

// draw the stroke
getPaint().clearShadowLayer();
getPaint().setColor(Color.BLACK);
getPaint().setStyle(Style.STROKE);
getPaint().setStrokeWidth(5);
super.onDraw(canvas);
// draw the gradient filled text
getPaint().setStyle(Style.FILL);
getPaint().setShader(new LinearGradient(0, 0, 0, getHeight(), start_gradient, end_gradient, TileMode.CLAMP ));
//getPaint().setStrokeWidth(32);
super.onDraw(canvas);

有趣的是：阴影、填充渐变和笔触出现了！ *但笔画是白色的（不是黑色的）。我认为颜色设置是错误的，因此它显示为白色。有任何想法吗？

【问题讨论】：

您的尝试中有什么没有奏效？

大部分中风根本没有出现。有一次，有给定渐变的笔触，但没有填充颜色（透明）。

我会将第二次尝试的 Paint 对象合并为一个。避免在第二个drawText中设置文字颜色，否则会覆盖渐变。我也会避免对 super 的双重调用，并将其向上移动，就像第一次尝试一样。

感谢@DerGolem！所以我尝试了这样的事情：super.onDraw(canvas); Paint mPaint = getPaint(); mPaint.setStyle(Paint.Style.STROKE); mPaint.setColor(Color.GREEN); mPaint.setStrokeWidth(5); canvas.drawText(VIEW_LOG_TAG, 0, 0, mPaint); mPaint.setStyle(Paint.Style.FILL); getPaint().setShader(new LinearGradient(0, 0, 0, getHeight(), start_gradient, end_gradient, TileMode.CLAMP )); mPaint.setStrokeWidth(32); canvas.drawText(VIEW_LOG_TAG, 0, 0, mPaint);

...所以现在我看到了我想用白色填充的文本（现在不知道为什么）。此文本位于我的应用程序的右侧/顶部边缘（横向模式）。在此文本上方，我得到另一个带有（我认为是）笔划和填充的文本，但我看不到它，因为它超出了视图。可能我错过了一些愚蠢的东西，但我不知道它可能是什么！有人可以帮忙吗？

【参考方案1】：

所以经过多次尝试，我解决了这个问题。现在我的 TextView 有一个黑色描边、一个渐变填充颜色和一个阴影。

我仍然拥有相同的 GradientTextView.java 课程，但我对 onDraw 的解决方案是：

if(isInEditMode())

else
    start_gradient = getResources().getColor(R.color.textview_start_gradient);
    end_gradient = getResources().getColor(R.color.textview_end_gradient);


// draw the shadow
getPaint().setShadowLayer(10, 6, 6, 0xbf000000); 
getPaint().setShader(null);
super.onDraw(canvas);

// draw the stroke
getPaint().clearShadowLayer();
getPaint().setStyle(Style.STROKE);
getPaint().setStrokeWidth(5);
getPaint().setShader(new LinearGradient(0, 0, 0, getHeight(), Color.BLACK, Color.BLACK, TileMode.CLAMP ));
super.onDraw(canvas);

// draw the gradient filled text
getPaint().setStyle(Style.FILL);
getPaint().setShader(new LinearGradient(0, 0, 0, getHeight(), start_gradient, end_gradient, TileMode.CLAMP ));
//getPaint().setStrokeWidth(32);
super.onDraw(canvas);

getPaint().setColor(Color.BLACK); 没用，所以我简单地设置了一个带有黑色渐变的着色器（不知道这是否是一个不错的解决方案，但它有效）。

在我的xml 中，我只是将类（带包）作为 xmlns 添加到我的顶层布局中

类似的东西

xmlns:gradient="http://schemas.android.com/apk/lib/package-name"

我写的不是 TextView：

<package-name.GradientTextView
        android:id="@+id/textView_1"
        android:layout_
        android:layout_
        android:layout_gravity="right|top"
        android:textSize="20sp"
        android:text="@string/main1" />

感谢大家的帮助！

希望这对其他人有帮助！

【讨论】：

伙计，你做得很好，我不需要阴影，但拿走了其他部分，在其他解决方案中，通过 *** 上的其他帖子，他们正在调用一个函数在 onDraw 上重绘内部，这可能会导致很多的问题，但你只画两次或三次的解决方案非常好。谢谢大佬！