CollapsingToolbarLayout - 展开时隐藏ImageView，折叠时显示

Question

我希望在CollapsingToolbarLayout展开时隐藏一个ImageView（即标志），并且只有在CollapsingToolbarLayout折叠时才显示该ImageView。（我知道如何回答相反的问题。）

如下所示的屏幕截图中可以看到，大型标头实际上是一个大型标志，左侧是图像，右侧是公司名称。在折叠模式下，我只想显示标志的小缩略图。

请问我如何在XML或代码中实现这一点？以下是代码和屏幕截图：

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:adjustViewBounds="true">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbarlayout_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="@color/colorPrimary">

        <ImageView
            android:id="@+id/mast_logo_main"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="fitCenter"
            android:adjustViewBounds="true"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.9"
            android:src="@drawable/uj_logo_rectangle_orange_background" />


        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="100dp"
            app:contentInsetStart="40dp"
            app:layout_collapseMode="parallax"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="80dp"
            android:orientation="horizontal"
            app:layout_collapseMode="pin">

            <ImageView
                android:id="@+id/thumbnail_logo_main"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:scaleType="fitCenter"
                android:adjustViewBounds="true"
                android:layout_marginTop="50dp"
                android:layout_marginLeft="10dp"
                android:src="@drawable/uj_rgb_logo_01" />

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_weight="4">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20dp"
                    android:paddingTop="20dp"
                    android:layout_marginLeft="10dp"
                    android:textSize="20sp"
                    android:textColor="#fff"
                    android:textStyle="bold"

                    android:text="Courses &amp; Programmes"/>

                <android.support.v7.widget.SearchView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>

            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1">

                <ImageView
                    android:layout_width="57dp"
                    android:layout_height="40dp"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="10dp"
                    android:layout_marginTop="50dp"
                    android:adjustViewBounds="true"
                    android:scaleType="fitCenter"
                    android:src="@drawable/empty_avatar" />

            </LinearLayout>

        </LinearLayout>

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

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

<include layout="@layout/fragment_all_faculties"/>

- Werner

---

可以通过编写代码来实现。您需要处理AppBar布局的所有3个状态。创建一个类，该类将实现AppBarLayout.OnOffsetChangedListener接口，并使用它来处理状态，这样您就可以顺利完成了。 - Umair

Answer 1

请按照以下代码：

AppBarLayout appBarLayout = (AppBarLayout) view.findViewById(R.id.app_bar_layout);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            if (Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange()) {
                // If collapsed, then do this
                imageViewBigLogo.setVisibility(View.GONE);
                imageViewSmallLogo.setVisibility(View.VISIBLE);
            } else if (verticalOffset == 0) {
                // If expanded, then do this
                imageViewBigLogo.setVisibility(View.VISIBLE);
                imageViewSmallLogo.setVisibility(View.GONE);
            } else {
                // Somewhere in between
                // Do according to your requirement
            }
        }
    }););

感谢这个。

- tahsinRupam

Answer 2

在我的代码中，我将尝试这样做：

AppBarLayout appBarLayout = findViewById(R.id.app_bar_layout);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    boolean isShow;
    int scrollRange = -1;

    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        if (scrollRange == -1) {
            scrollRange = appBarLayout.getTotalScrollRange();
        }
        if (scrollRange + verticalOffset == 0) {
            //visible image view
            isShow = true;
        } else if (isShow) {
            //invisible image view
            isShow = false;
        }
    }
});

- Mitesh Vanaliya

Answer 3

@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
   
            YOUR0VIEW.setAlpha((float) Math.abs(verticalOffset) / appBarLayout.getTotalScrollRange());


            YOUR0VIEW.setAlpha(1f - (float) Math.abs(verticalOffset) / appBarLayout.getTotalScrollRange());

}

- CosmicFREAK

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - primo