如何在Android中使TextView的文本末尾透明化

Question

我在Google Play应用程序中发现了一个有趣的设计特点。

正如您在图片中看到的那样，文本在一些渐变颜色下会变得不可见。我该如何在我的应用程序中实现类似的效果？

- Vitalii

---

这不是透明文本，只是一个从白色到0 alpha的渐变形状。 ;) 绝对是一个“视觉技巧” ;) - Martin Marconcini

Answer 1

我会使用像这样的颜色渐变

color_gradient.xml

<shape android:shape="rectangle"
   xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#ffffff"
        android:endColor="#00ffffff"
        android:angle="180"/>
</shape>

例如，对于第一行：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="120dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_centerVertical="true"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World HelloWorld HelloWorld"
           android:textAppearance="@style/Base.TextAppearance.AppCompat.Title"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World HelloWorld HelloWorld"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Subhead"
        />
    </LinearLayout>

    <View
        android:id="@+id/gradient"
        android:layout_width="60dp"
        android:layout_height="match_parent"
        android:layout_toStartOf="@+id/button_box"
        android:background="@drawable/color_gradient"/>

    <FrameLayout
        android:id="@+id/button_box"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentEnd="true"
        android:padding="16dp"
        android:background="#ffffff">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:padding="8dp"
            android:text="Tout mettre a jour"
            android:textColor="#ffffff"
            android:background="#22bb66"/>
    </FrameLayout>
</RelativeLayout>

请注意，布局有几个选项。这种方法的核心思想是使渐变可绘制物加上包含“Button”的白色框重叠在“TextView”上。

- Bö macht Blau

Answer 2

这可能通过制作一个视图，使其与TextView重叠并具有透明渐变的背景来完成，如下所示:

在drawable文件夹中创建一个名为"gradient"的xml文件:

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <gradient 
            android:startColor="#FFFFFF"
            android:centerColor="#88FFFFFF"
            android:endColor="#FFFFFFFF"
            android:angle="90"
            android:dither="true"
         />
    </shape>

在“FFFFFF”之前添加额外的十六进制值会给颜色加上alpha参数，这可以被视为透明度或不透明度。现在，在覆盖布局的View中写入android:background="@drawable/gradient"，我没有测试过，但应该可以工作。当然，请确保扩展与android:layout_marginLeft="20dp"重叠的View。

- Equa

Answer 3

一个（更高效的）选项是覆盖 onDraw 方法，然后在您的视图上方绘制渐变。

   @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        Paint paint = new Paint();
        paint.setShader(new LinearGradient(0, 0, 0, getHeight(),
                        Color.WHITE, Color.TRANSPARENT, Shader.TileMode.CLAMP));
        canvas.drawPaint(paint);
    }

注意：如果您的视图是一个布局，请覆盖dispatchDraw(Canvas canvas)方法。

- allofmex