如何在CollapsingToolbar内部的ImageView中添加渐变边框？

Question

我试图向CollapsingToolbarLayout中存在的ImageView添加褪色边框，但是失败了。

我所获得的成就如下图所示

我想要实现的是

我尝试过的代码只是一个简单的折叠工具栏

using Microsoft.MixedReality.Toolkit.Input;


public class MoveTo : BaseInputHandler, IMixedRealityInputHandler
{
    public GameObject Sphere;
    public GameObject Cursor;

    public void OnInputUp(InputEventData eventData)
    {
        GetComponent<MeshRenderer>().material.color = Color.red;
    }

    public void OnInputDown(InputEventData eventData)
    {
        Vector3 gazePos = Cursor.transform.position;
        Sphere.transform.position = gazePos;
        GetComponent<MeshRenderer>().material.color = Color.green;
    }
}

可绘制代码

  =IFERROR(IF(SEARCH("*local*",B2,1),"Local"),IF(SEARCH("*national*",B2,1),"National"))    

Answer 1

要实现ImageView的淡入淡出，可以在布局中添加一个名为FadingEdgeLayout的库。

1. 将FadingEdgeLayout添加到build.gradle中的项目中

implementation
'com.github.bosphere.android-fadingedgelayout:fadingedgelayout:1.0.0'

1. 完成此操作后，将FadingEdgeLayout添加到您的布局中，如下所示：

<com.google.android.material.appbar.CollapsingToolbarLayout 
    android:id="@+id/collapsing_detail_buddhism"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
    app:title=""
    app:expandedTitleMarginStart="10dp"
    app:expandedTitleMarginBottom="20dp"
    app:expandedTitleMarginTop="20dp"
    app:expandedTitleTextAppearance="@style/Base.TextAppearance.AppCompat.Display1"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/colorPrimaryDark"
    >

    <com.bosphere.fadingedgelayout.FadingEdgeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fel_edge="bottom"
        >

        <ImageView
            android:id="@+id/main_image"
            android:layout_width="match_parent"
            android:layout_height="220dp"
            android:src="@drawable/stories_background"
            android:scaleType="centerCrop"
            />

    </com.bosphere.fadingedgelayout.FadingEdgeLayout>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_detail_buddhism"
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        app:layout_collapseMode="pin"/>


</com.google.android.material.appbar.CollapsingToolbarLayout>

1. 将布局更改为上方会为ImageView添加褪色边缘。

2. 但是请记住，FadingEdgeLayout将背景色作为褪色边缘的颜色，因此我添加了android:background="@color/colorPrimaryDark"，因此您会注意到它需要的颜色边缘。

3. 您还可以添加更多边缘（底部，左侧，顶部，右侧），控制渐变的大小等。转到答案顶部提到的链接。