4

我正在尝试更改 android appBarLayout 的高度以产生这样的效果（示例来自 iOS，但我试图在 android 中做类似的事情）：当我们向上滚动时，appBar 的 appBar 高度应该减小并且图片应该缩放。
示例 1：http ://take.ms/nxVJ7 示例 2：http ://take.ms/jXQst

经过一些研究和几次尝试，我取得了一些进展，但我不知道下一步该做什么。

这是我的活动资料：

<?xml version="1.0" encoding="utf-8"?>


<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="350dp"
    android:theme="@style/AppTheme.AppBarOverlay"
    android:minHeight="250dp"
    app:elevation="0dp"
    app:layout_behavior=".utils.behaviors.DisappearBehavior"
    >

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

        <TextView
            android:id="@+id/title"
            style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"/>

    </android.support.v7.widget.Toolbar>

    <LinearLayout
        android:id="@+id/app_bar_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorWhite"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp">

            <TextView
                android:id="@+id/status"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:text="online"/>

            <ImageButton
                android:id="@+id/edit_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:background="@drawable/button_circle"
                android:src="@drawable/ic_edit"
                android:tint="@color/colorPrimary"
                android:visibility="gone"/>

            <ImageView
                android:id="@+id/vip_status_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:layout_toRightOf="@+id/status"
                android:src="@drawable/ic_vip"
                android:tint="@color/colorPrimary"/>

        </RelativeLayout>

        <ImageView
            android:id="@+id/avatar"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_gravity="center_horizontal"
            android:src="@drawable/ic_avatar_placeholder"
            android:adjustViewBounds="true"
            android:layout_weight="1"/>

        <TextView
            android:id="@+id/name"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:gravity="center"
            android:text="Демин Сергей"
            android:textColor="@color/colorBlack"
            android:textSize="18sp"
            />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:gravity="center"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:src="@drawable/ic_avatar_placeholder"
                />

            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:src="@drawable/ic_avatar_placeholder"
                />

            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:src="@drawable/ic_avatar_placeholder"
                />
        </LinearLayout>

    </LinearLayout>

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


<FrameLayout
    android:id="@+id/frame_content"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorWhite"
    app:layout_behavior="@string/appbar_scrolling_view_behavio">

    <ProgressBar
        android:id="@+id/progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:visibility="visible"/>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="visible">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

</FrameLayout>

和消失行为：

public class DisappearBehavior extends CoordinatorLayout.Behavior<AppBarLayout> {

public DisappearBehavior(Context context, AttributeSet attrs) {
    super(context, attrs);
}

@Override
public boolean onStartNestedScroll(
        CoordinatorLayout coordinatorLayout, AppBarLayout child, View directTargetChild, View target, int nestedScrollAxes) {
    if (nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL) {
        return true;
    } else {
        return false;
    }
}

@Override
public void onNestedPreScroll(
        CoordinatorLayout coordinatorLayout, AppBarLayout child, View target, int dx, int dy, int[] consumed) {
    consumed = new int[2];
    consumed[1] = dy;
    ViewGroup.LayoutParams params = child.getLayoutParams();
    Log.d("Behavior", "dy = " + dy);
    params.height -= dy;
    child.setLayoutParams(params);
}

@Override
public void onNestedScroll(
        CoordinatorLayout coordinatorLayout, AppBarLayout child, View target, int dxConsumed, int dyConsumed,
        int dxUnconsumed,
        int dyUnconsumed) {
    ViewGroup.LayoutParams params = child.getLayoutParams();
    child.setLayoutParams(params);
    int xxx = child.getBottom();
    Log.d("Behavior", "height = " + params.height + " " + xxx);
}

@Override
public void onStopNestedScroll(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target) {
    super.onStopNestedScroll(coordinatorLayout, child, target);
    ViewGroup.LayoutParams params = child.getLayoutParams();
    child.setLayoutParams(params);
    int xxx = child.getBottom();
    Log.d("Behavior", "stop height = " + params.height + " " + xxx);
}
}

结果，当 appBarLayout 和 FrameLayout 同时滚动内容时我有效果（如果我能找到一种方法，我会尝试添加图像。我需要超过 10 个声誉。image3，image4）。还有一些starnge效果。当您（例如）缓慢地向上滚动时，您会看到屏幕上的文本向上移动并再次向下移动。类似地震的效果。

如您所见，我在代码中有日志，当我向一个方向滚动时，他们说 dy 是正数和负数。记录慢速滚动，例如：

dy = 42
height = 924 1026
dy = -36
height = 960 984
dy = 43
height = 917 1020
dy = -37
height = 954 977
dy = 42
height = 912 1014
dy = -36
height = 948 972
dy = 48
height = 808 916
dy = -44
height = 852 868
dy = 46
height = 806 912
dy = -46
height = 852 866
stop height = 852 866

我明白所有问题都会出现，AppBarLayout$ScrollingViewBehavior但我不明白要改变什么。

4

0 回答 0