如何在Android中透明地将TextView中的文本结束

Question

我在Google Play应用中发现了一个有趣的设计功能。

正如您在此图片中所看到的，文本在某些渐变中变得不可见。 我怎么能在我的应用程序中做类似的事情？

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重叠

Answer 2

可能可以通过使View重叠TextView背景透明渐变来完成，如下所示：

在drawable文件夹中创建一个带有名称的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 。

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);
    }

注意：如果View是布局，请改为覆盖dispatchDraw(Canvas canvas) 。