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

Question

我正在为配置文件创建一个Android滚动活动，我希望滚动活动包括用户配置文件的圆形图像视图，并在页面为" Action Bar"时，将其隐藏和崩溃滚动。

我创建了滚动活动，其中包括：coordinateLayout，appbarlayout，collapsingtoolbarlayout，coundularImageView，fab和nestedscrollview ..它可以正常工作，但是无论滚动如何，圆形视频视图都保持在顶部，我只希望它与动作栏崩溃，就像晶圆厂在滚动时消失的方式一样。谢谢。

<?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文件

shink.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;
                }

            }
        }
    });