Question

我正在为配置文件创建一个android滚动活动，我希望该滚动活动包括一个用于用户配置文件的圆形图像视图，并在滚动页面时使用操作栏使其隐藏和折叠。

我创建了滚动活动，其中包括：coordinateLayout，AppBarLayout，CollapsingToolBarLayout，circularImageView，FAB和nestedScrollView。它工作正常，但无论滚动如何，circularImageView始终位于顶部，我只希望它与操作栏一起折叠，就像FAB在向上滚动时消失一样。谢谢。

<?xml version="1.0" encoding="utf-8"?>
<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:fitsSystemWindows="true"
    tools:context=".ProfileActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/profile_app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/profile_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:toolbarId="@+id/profile_toolbar">

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="match_parent"
                android:id="@+id/place_image"
                android:scaleType="fitXY"
                android:adjustViewBounds="true"
                android:background="@drawable/zeal"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/profile_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

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

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

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/profile_image"
            android:layout_width="124dp"
            android:layout_height="124dp"
            android:src="@drawable/wale"
            app:civ_border_color="@color/colorPrimary"
            app:civ_border_width="2dp"
            app:layout_anchor="@id/profile_app_bar"
            app:layout_anchorGravity="bottom|center"
            />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/profile_app_bar"
        app:layout_anchorGravity="bottom|end"
        app:srcCompat="@android:drawable/ic_menu_edit" />

    <include layout="@layout/content_profile" />
</android.support.design.widget.CoordinatorLayout>

我只希望它与操作栏一起折叠，就像FAB在向上滚动时消失一样。谢谢。

Answer 1

FloatingActionButton是专门为与CollapsingToolBar一起使用而设计的，CircularImageView不是。因此，折叠工具栏时该对象不会消失。

但是，您可以通过编程方式进行。

    circleImageView = findViewById(R.id.profile_image);
    appBarLayout = findViewById(R.id.profile_app_bar); // get the AppBarLayout
    // create a Listener to detect collapse
    appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            if ( verticalOffset < -26) { // change this value to match your needs
                // Collapsed
                circleImageView.setVisibility(View.GONE);
            } else {
                // Expanded
                circleImageView.setVisibility(View.VISIBLE);
            }
        }
    });

当然，您可以使用收缩动画来匹配与FloatingActionButton相同的效果。

编辑

收缩动画

在res / anim中创建一个新的xml文件

shrink.xml

<?xml version="1.0" encoding="utf-8"?>
<set
    xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:fromXScale="1"
        android:toXScale="0"
        android:fromYScale="1"
        android:toYScale="0"
        android:duration="5000"
        android:pivotX="50%"
        android:pivotY="50%" >
    </scale>

    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"
        android:duration="5000" >
    </alpha>
</set>

创建一个名为boolean collapsed;的全局变量

像这样使用：

    appBarLayout = findViewById(R.id.profile_app_bar);
    appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            if ( verticalOffset < -26) {
                if (!collaped) {
                    circleImageView.animate().scaleX(0f).scaleY(0f).setDuration(200).start();
                    collapsed = true;
                }

            } else {
                if (collapsed) {
                    circleImageView.animate().scaleX(1).scaleY(1f).setDuration(200).start();
                    collapsed = false;
                }


            }
        }
    });

带有圆形轮廓图像视图的滚动活动

1 个答案: