Question

我想实现工具栏圆形图像的视差效果 https://www.youtube.com/watch?v=sCP-b0a1x5Y 在这个视频中。但我希望通过使用CoordinateLayout.Behaviour类来实现这一点。关于自定义行为的任何帮助？

这是我的xml：

<?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:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.vats.vatishs.materialdesignlayouts.ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/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/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

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

            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/text_margin"
            android:text="@string/large_text" />
    </android.support.v4.widget.NestedScrollView>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/ic_dialog_email"
        android:layout_margin="10dp"
        app:layout_behavior="com.vats.vatishs.materialdesignlayouts.ImageViewBehaviour" />

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

这是我的代码：

public class ImageViewBehaviour extends CoordinatorLayout.Behavior<ImageView> {

public ImageViewBehaviour(Context context, AttributeSet attrs) {
}

@Override
public boolean layoutDependsOn(CoordinatorLayout parent, ImageView child, View dependency) {
    return dependency instanceof AppBarLayout;
}

@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, ImageView child, View dependency) {
    /* What should i do here so that the image (that is displayed on the start of toolbar) will be moved along with toolbar expanded and fit on the center of appbar when toolbar is fully expanded? */
    return true;
}
}

Answer 1

将ImageView放在CollapsingToolbarLayout内，并将其layout_collapseMode="parallax"。请注意，ImageView是第一个孩子，因此它将在Toolbar后面绘制。使用固定尺寸代替wrap_content，或者您可以使用match_parent，因为AppBarLayout已指定固定高度。

<android.support.design.widget.CollapsingToolbarLayout ... >
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_collapseMode="parallax"
        ... />

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_collapseMode="pin"
        ... />

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

如何使用CoordinateLayout.Behaviour实现视差效果？

1 个答案: