CollapsingToolbarLayout-展开时隐藏ImageView，折叠时显示 [英] CollapsingToolbarLayout - Hide ImageView when Expanded, show when Collapsed

问题描述

我想在CollapsingToolbarLayout展开时隐藏ImageView(徽标)，而仅在CollapsingToolbarLayout折叠时才显示ImageView. (我知道如何反过来说).

I would like to hide an ImageView (logo) when CollapsingToolbarLayout is expanded and only show the ImageView when the CollapsingToolbarLayout is collapsed. (I know how to do the reverse of this question).

如下面的屏幕截图所示.桅杆大头实际上是一个大徽标，图像在左侧，然后在公司名称在右侧.在折叠模式下，我只想显示徽标的小缩略图.

As you can see from the screenshot below. The big mast head is actually one big logo, image on left and then company name on right. In collapsed mode I only want to show a small thumbnail of the logo.

请问如何用XML或代码完成此操作?代码和下面的屏幕截图:

How can I accomplish this in XML or code please? Code & screenshots below:

<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"/>

推荐答案

遵循以下代码:

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

感谢此.

这篇关于CollapsingToolbarLayout-展开时隐藏ImageView，折叠时显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！