如何在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) 。