Question

我想将个人资料图片移动并缩放到1/4th of app_bar_height，然后将其垂直移动并缩放到1/2 of app_bar_height。因此，当视差效果完成后，我的profile_image将显示在AppBarLayout的中心，当它折叠时，它将位于工具栏的开头。

这是我的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">

<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/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/quila2"
            app:layout_collapseMode="parallax" />

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

            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/profile_image"
                android:layout_width="@dimen/profile_image_initial_size"
                android:layout_height="@dimen/profile_image_initial_size"
                android:src="@drawable/quila" />

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

<android.support.v4.widget.NestedScrollView
    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>
</android.support.design.widget.CoordinatorLayout>

Answer 1

您可以设置ScaleType="MATRIX"根据用户的捏拉手势比例因子构建并缩放Matrix，然后根据此缩放的矩阵设置ImageView。

请访问Android ImageView ScaleType

最后

 <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/profile_image"
            android:layout_width="@dimen/profile_image_initial_size"
            android:layout_height="@dimen/profile_image_initial_size"
            android:src="@drawable/quila"
            android:scaleType="matrix" />

Answer 2

要移动具有视差效果的图像，我们需要在设计库中实现CoordinatorLayout.Behavior（View）类提供的自定义行为。这里的视图将是（CircleImageView）。

它有两个功能：

public boolean layoutDependsOn(CoordinatorLayout parent, CircleImageView child, View dependency) {
    return dependency instanceof AppBarLayout; // here dependency is the view on which child has depends
}

和

public boolean onDependentViewChanged(CoordinatorLayout parent, CircleImageView child, View dependency) {
return true; //if child has changed
}

因此，您可以使用appBarLayout更改来移动circularImageView。

如何在进行视差效果的同时移动和缩放图像？

2 个答案: