修复CoordinatorLayout中滚动CollapsingToolbar上图标下方的标题文本

Question

我有一个布局，该布局的标题部分带有图标和文本。在标题下方的嵌套滚动视图中有更多描述（如下所示）。

当用户滚动查看更多说明时，我希望图标逐渐消失，标题文本保留在原位。但是，不确定如何执行此操作。目前，它只是全部滚动，直到像下面一样停止，

布局的XML是

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/coordinator"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/app_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:id="@+id/collapsingToolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:expandedTitleGravity="center_horizontal|top"
                app:expandedTitleMarginTop="?actionBarSize"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <LinearLayout
                    android:id="@+id/header_view"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:orientation="vertical"
                    android:paddingLeft="?horizontalSpacing"
                    android:paddingRight="?horizontalSpacing"
                    app:layout_collapseMode="parallax">

                    <androidx.legacy.widget.Space
                        android:layout_width="match_parent"
                        android:layout_height="?actionBarSize" />

                    <FrameLayout
                        android:id="@+id/user_icon_container"
                        android:layout_width="128dp"
                        android:layout_height="128dp"
                        android:layout_gravity="center_horizontal"
                        android:background="@drawable/circle_full_white_transparent">

                        <TextView
                            android:id="@+id/user_initial"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:textAllCaps="true"
                            android:textColor="@color/white"
                            android:textSize="@dimen/user_initial_size"
                            tools:text="O" />

                        <ImageView
                            android:id="@+id/user_icon"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:layout_gravity="center"
                            android:scaleType="fitCenter" />

                    </FrameLayout>

                    <TextView
                        android:id="@+id/header_user_name"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="16dp"
                        android:layout_marginBottom="8dp"
                        android:textColor="@color/white" />

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="32dp"
                        android:gravity="center_vertical"
                        android:orientation="horizontal">

                        <TextView
                            android:id="@+id/header_user_account"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginStart="6dp"
                            android:textColor="@color/white"
                            android:text="User Account" />

                    </LinearLayout>

                </LinearLayout>

                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar_main"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin" />

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

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

        <androidx.core.widget.NestedScrollView
            android:id="@+id/scroll_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/default_margin"
            android:layout_marginEnd="@dimen/default_margin"
            android:scrollbars="none"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:layout_marginBottom="16dp"
                android:text="Lorem ipsum dolor sit amet, sed fringilla mi, nec magna erat purus massa lectus eleifend, nulla morbi, faucibus curabitur at sit amet in. Ornare sed, fuga in fermentum wisi etiam id porta, quam morbi eu tortor placerat eget, nec nec diam quia risus nec, sapien vulputate. Feugiat erat suscipit, velit metus duis nulla suscipit eu condimentum, nullam elit facere id iaculis venenatis morbi, vel at orci metus. Sed ut lectus, vitae turpis tincidunt vel. Aptent vestibulum egestas eget felis sed. Semper morbi quisque curabitur eros ante, ligula imperdiet arcu, nullam ultricies vitae ut wisi eu, nec nam. Arcu tellus elit massa, vitae quam ac dolor ante eget. Eros nec bibendum id sapien in, justo vestibulum nec nisl nunc, aliquet vitae, erat est donec at nostra proin, posuere accumsan sem nascetur. Risus magna elit vehicula quam sed fermentum, scelerisque sed, fusce morbi purus volutpat varius.

Mauris in lacus molestie tristique occaecati quam. Lorem dictumst ipsum sagittis ac praesent ut, felis vel ultrices velit maecenas, suspendisse sapien libero, at vivamus nibh ac cras vel. Urna dui phasellus quisque odio, leo venenatis, neque rutrum ut nostra viverra. Et est venenatis id erat, blandit nisl pede dui nec varius, metus mattis, sollicitudin phasellus nulla nulla cillum quam, aliquam nec. Quis nisl risus diam donec amet. Suscipit varius in ante netus, rutrum purus sapien libero nulla eu, feugiat nulla, eros amet et metus sed. Netus sed convallis volutpat ut, sed rhoncus sociis lacus praesent. Per neque dapibus arcu, ultrices dui sodales pulvinar potenti. Integer a vivamus, molestie metus ut dui justo. Tempor metus sit vestibulum adipiscing, fringilla pede felis metus, magna dolor elementum, integer sed, sed lorem donec nulla interdum. Egestas cursus ac quis fusce in nullam, porta a sit. Per necessitatibus id ipsum, neque augue pede aliquam vestibulum justo, nec a platea, accumsan eros lobortis, pede in.

Ultrices ut ipsum libero aliquam tempus bibendum, nibh pharetra sem eget in congue in, amet aliquet, sit ipsum mauris pulvinar in, quis sed integer nulla senectus. Porta pulvinar odio, luctus penatibus, velit cursus condimentum ut lectus malesuada nisl, sem erat sagittis ut ipsum orci rhoncus, sed nulla urna non vel netus lacus. Nec aliquam. Posuere ac in est erat tristique, turpis rhoncus sed tempor morbi ipsum. Vitae nam aliquam urna, neque erat ut, libero potenti semper libero proin scelerisque. Ante rutrum cras. Aut imperdiet dolor duis ultricies mi iure. Praesent vestibulum, vitae enim, ultrices eget, praesent euismod laoreet. Lobortis justo at congue. Lectus quis sed eu wisi lacus, platea cras diam.

Blandit sed expedita etiam varius, ac est, in donec. Dolor eget risus arcu malesuada in sit, ante mi egestas minus nonummy, per aliquam id a. Nulla id at imperdiet eget ante felis, mollis elit quam parturient vestibulum quam erat, maecenas netus amet malesuada quam, per ante. Felis non sem in, ac aliquam diam morbi wisi, eros commodo donec mollis. Suscipit in adipiscing non magnis blandit gravida. Malesuada elementum eu, non eu nunc phasellus magna viverra, eu odio elit quam wisi vestibulum, tortor ligula posuere ultrices vehicula sed urna, blandit nulla a quam orci. Nunc curabitur id, hendrerit amet at, urna leo in, integer aliquam at." />

        </androidx.core.widget.NestedScrollView>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            app:layout_anchor="@id/app_bar"
            app:layout_anchorGravity="bottom|right|end"
            app:srcCompat="@drawable/ic_fab" />

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

但是我希望它在滚动时像这样，

任何人都可以通过CoordinatorLayout和CollapsingToolbar分享如何实现这一目标吗？

Answer 1

据我了解，您需要隐藏user_icon_container。您可以通过以下实现来实现：

public class MyActivity extends AppCompatActivity
    implements AppBarLayout.OnOffsetChangedListener {

   private static final int PERCENTAGE_TO_ANIMATE_AVATAR = 20;
   private boolean mIsAvatarShown = true;

   private int mMaxScrollSize;

   @Override
   public void onCreate(Bundle savedInstanceState) {

        appbarLayout.addOnOffsetChangedListener(this);
        mMaxScrollSize = appbarLayout.getTotalScrollRange();
   }

   @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int i) {
        if (mMaxScrollSize == 0)
            mMaxScrollSize = appBarLayout.getTotalScrollRange();

        int percentage = (Math.abs(i)) * 100 / mMaxScrollSize;

        if (percentage >= PERCENTAGE_TO_ANIMATE_AVATAR && mIsAvatarShown) {
            mIsAvatarShown = false;

            user_icon_container.animate()
                .scaleY(0).scaleX(0)
                .setDuration(200)
                .start();
        }

        if (percentage <= PERCENTAGE_TO_ANIMATE_AVATAR && !mIsAvatarShown) {
            mIsAvatarShown = true;

            user_icon_container.animate()
                .scaleY(1).scaleX(1)
                .start();
        }
    }

Answer 2

无需使用Java-Kotlin，只需玩layout_collapseParallaxMultiplier。我还对LinearLayout进行了一些更改：

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

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:expandedTitleGravity="center_horizontal|top"
            app:expandedTitleMarginTop="?actionBarSize"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <LinearLayout
                android:id="@+id/header_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:orientation="vertical"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.1">

                <androidx.legacy.widget.Space
                    android:layout_width="match_parent"
                    android:layout_height="?actionBarSize" />

                <FrameLayout
                    android:id="@+id/user_icon_container"
                    android:layout_width="128dp"
                    android:layout_height="128dp"
                    android:layout_gravity="center_horizontal"
                    android:background="@drawable/ic_action_navigation_close"
                    app:layout_collapseMode="parallax">

                    <TextView
                        android:id="@+id/user_initial"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:textAllCaps="true"
                        android:textColor="@color/white" />

                    <ImageView
                        android:id="@+id/user_icon"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_gravity="center"
                        android:scaleType="fitCenter" />

                </FrameLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="32dp"
                    android:gravity="center_vertical"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/header_user_name"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="My activity title"
                        android:textColor="@color/white" />

                    <TextView
                        android:id="@+id/header_user_account"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:text="Subtitle"
                        android:textColor="@color/white" />

                </LinearLayout>

            </LinearLayout>

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar_main"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

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

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

    <androidx.core.widget.NestedScrollView
        android:id="@+id/scroll_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="none"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="16dp"
            android:text="Lorem ipsum dolor sit amet, sed fringilla mi, nec magna erat purus massa lectus eleifend, nulla morbi, faucibus curabitur at sit amet in. Ornare sed, fuga in fermentum wisi etiam id porta, quam morbi eu tortor placerat eget, nec nec diam quia risus nec, sapien vulputate. Feugiat erat suscipit, velit metus duis nulla suscipit eu condimentum, nullam elit facere id iaculis venenatis morbi, vel at orci metus. Sed ut lectus, vitae turpis tincidunt vel. Aptent vestibulum egestas eget felis sed. Semper morbi quisque curabitur eros ante, ligula imperdiet arcu, nullam ultricies vitae ut wisi eu, nec nam. Arcu tellus elit massa, vitae quam ac dolor ante eget. Eros nec bibendum id sapien in, justo vestibulum nec nisl nunc, aliquet vitae, erat est donec at nostra proin, posuere accumsan sem nascetur. Risus magna elit vehicula quam sed fermentum, scelerisque sed, fusce morbi purus volutpat varius.

Mauris in lacus molestie tristique occaecati quam. Lorem dictumst ipsum sagittis ac praesent ut, felis vel ultrices velit maecenas, suspendisse sapien libero, at vivamus nibh ac cras vel. Urna dui phasellus quisque odio, leo venenatis, neque rutrum ut nostra viverra. Et est venenatis id erat, blandit nisl pede dui nec varius, metus mattis, sollicitudin phasellus nulla nulla cillum quam, aliquam nec. Quis nisl risus diam donec amet. Suscipit varius in ante netus, rutrum purus sapien libero nulla eu, feugiat nulla, eros amet et metus sed. Netus sed convallis volutpat ut, sed rhoncus sociis lacus praesent. Per neque dapibus arcu, ultrices dui sodales pulvinar potenti. Integer a vivamus, molestie metus ut dui justo. Tempor metus sit vestibulum adipiscing, fringilla pede felis metus, magna dolor elementum, integer sed, sed lorem donec nulla interdum. Egestas cursus ac quis fusce in nullam, porta a sit. Per necessitatibus id ipsum, neque augue pede aliquam vestibulum justo, nec a platea, accumsan eros lobortis, pede in.

Ultrices ut ipsum libero aliquam tempus bibendum, nibh pharetra sem eget in congue in, amet aliquet, sit ipsum mauris pulvinar in, quis sed integer nulla senectus. Porta pulvinar odio, luctus penatibus, velit cursus condimentum ut lectus malesuada nisl, sem erat sagittis ut ipsum orci rhoncus, sed nulla urna non vel netus lacus. Nec aliquam. Posuere ac in est erat tristique, turpis rhoncus sed tempor morbi ipsum. Vitae nam aliquam urna, neque erat ut, libero potenti semper libero proin scelerisque. Ante rutrum cras. Aut imperdiet dolor duis ultricies mi iure. Praesent vestibulum, vitae enim, ultrices eget, praesent euismod laoreet. Lobortis justo at congue. Lectus quis sed eu wisi lacus, platea cras diam.

Blandit sed expedita etiam varius, ac est, in donec. Dolor eget risus arcu malesuada in sit, ante mi egestas minus nonummy, per aliquam id a. Nulla id at imperdiet eget ante felis, mollis elit quam parturient vestibulum quam erat, maecenas netus amet malesuada quam, per ante. Felis non sem in, ac aliquam diam morbi wisi, eros commodo donec mollis. Suscipit in adipiscing non magnis blandit gravida. Malesuada elementum eu, non eu nunc phasellus magna viverra, eu odio elit quam wisi vestibulum, tortor ligula posuere ultrices vehicula sed urna, blandit nulla a quam orci. Nunc curabitur id, hendrerit amet at, urna leo in, integer aliquam at." />

    </androidx.core.widget.NestedScrollView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|right|end"
        app:srcCompat="@drawable/fav_pic" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

您可以通过处理AppBarLayout.OnOffsetChangedListener来查看折叠的时间，例如将ImageView或setTitle()和Subtitle隐藏在Toolbar中。

结果：