Question

当我们向下滚动 RecyclerView 时，我只想让 android.support.v7.widget.Toolbar 透明，并在我们向上滚动时清晰可见

这是我的代码

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/coordinatorlayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbarlayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar1"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#ae43ff"
        />
    <ImageView
        android:id="@+id/imageview1"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:src="@drawable/unnamed"
        android:scaleType="center"
        app:layout_scrollFlags="scroll"
        />

    <!--app:layout_scrollFlags="scroll|enterAlways"-->

    <!--app:layout_collapseMode="parallax"
    app:layout_collapseParallaxMultiplier="0.7"-->
</android.support.design.widget.AppBarLayout>

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerview1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:background="#6fffc6">

</android.support.v7.widget.RecyclerView>

我正在获得的输出

我尝试了许多不同的方法，但它不能按我的意愿工作。

我不想要我们在 android.support.design.widget.CollapsingToolbarLayout

中获得的效果

我希望效果如Video

所示

Answer 1

我也面临着类似的问题，我已经以这种方式破解了。

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/detail_backdrop_height"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="206dip"
        android:background="@android:color/transparent"
        app:expandedTitleTextAppearance="@android:color/transparent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:fitsSystemWindows="true"
        app:contentScrim="@android:color/transparent"
        app:expandedTitleMarginStart="48dp"
        app:titleEnabled="false">




        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/backdrop"
            android:src="@drawable/ss"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/backdrop"
            android:layout_marginBottom="20dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/txtSomeTextDisplay"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Text Display1"
                android:textSize="16sp"
                android:textColor="#ffffff" />

            <TextView
                android:id="@+id/txtSomeOtherText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Text Display 2"
                android:textSize="12sp"
                android:textColor="#ffffff" />

        </LinearLayout>



        </RelativeLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:background="@color/colorPrimary"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />



    </android.support.design.widget.CollapsingToolbarLayout>       
</android.support.design.widget.AppBarLayout>




<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_marginTop="10dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

在Activity类中，OnCreate我所做的是 -

AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar);
    appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {


        int intColorCode=0;

        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {


           intColorCode=-(verticalOffset);
            if(intColorCode>255)
                intColorCode=255;

            toolbar.getBackground().setAlpha(intColorCode);
            toolbar.setAlpha(intColorCode);


        }
    });

我设法为我的一个项目获得了预期的效果。如果您需要更多帮助，请与我们联系。由于我仍然在完善代码，因此代码可以更好，如果有人有建议，可以随意添加您的评论。

Answer 2

您可以通过将layout_behavior设置为Toolbar来实现。写了一篇文章，可以帮助您了解它是如何工作的，以及如何利用CoordinatorLayout.Behavior的力量。这里还有gist。

基本上，它计算AppBarLayout和当前AppBarLayout底部的总滚动范围之间的比率。该比率用于将alpha设置为Toolbar背景。

https://medium.com/@nullthemall/1-20f-behaviors-of-alpha-6f506c9cb6a7

向上滚动时使工具栏变为透明，并在向下滚动时使其可见

2 个答案: