android - 在 CoordinatorLayout 内滚动 CollapsingToolbar 时修复图标下方的标题文本

Question

我的布局有一个标题部分，标题部分下面有一个图标和文本。在标题下的嵌套 ScrollView 中有更多描述(如下所示)。

当用户滚动查看更多描述时，我希望图标慢慢消失，标题文本保留在原位。但是我不确定该怎么做。目前它只是滚动直到停止，如下所示，

布局的 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();
        }
    }