使用AppBarLayout自定义行为的CoordinatorLayout

Question

使用AppBarLayout自定义行为的CoordinatorLayout

androidandroid-coordinatorlayoutandroid-appbarlayout

21

我希望实现类似Telegram应用程序的设置页面的行为，即当向上滚动时，CircleImage会移到Topbar标题左侧；而向下滚动时，CircleImage会移动到展开的AppBarLayout的中心位置。

我基于以下示例进行工作：

https://github.com/saulmm/CoordinatorBehaviorExample

但在这种情况下，原始编码者对Topbar进行了两次重新创建。我不想那样做，我需要默认的Topbar行为，并且我还想利用开箱即用的汉堡菜单和选项菜单。

这是我的视图层次结构：

DrawerLayout
  |
  |---CoordinatorLayout
       |--AppBarLayout
       |    |-CollapsingToolbarLayout
       |        |-ImageView (backdrop image)
       |        |-Toolbar
       |--NestedScrollView
       |--ImageView (circleimage avatar)

正如您所见，我无法使工具栏布局成为我的CircleImage的兄弟姐妹，因此我无法在layoutDependsOn方法中将它们绑定在一起。我尝试绑定到AppBarLayout，并基于GitHub存储库上的代码来编写我的代码，但说实话，我无法理解原始代码中发生了什么。

- MichelReap

看这个：http://saulmm.github.io/mastering-coordinator 并滚动到Custom Behavior标题，您将找到您想要的行为。 - Vipul Asri

2个回答

1

一种可能的方法是为您的ToolBar创建一个自定义视图，并在ToolBar扩展时隐藏红点，而在折叠工具栏时显示带有红点的ImageView（该图像在折叠时隐藏）。

您可以查看此答案以了解如何将自定义视图添加到ToolBar: https://dev59.com/mF8d5IYBdhLWcg3wXRMX#27859966 完成此操作后，只需创建一个在ToolBar扩展时可见的ImageView。

final CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsingToolbarLayout);
AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appBarLayout);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
boolean isShow = false;
int scrollRange = -1;

@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
    if (scrollRange == -1) {
        scrollRange = appBarLayout.getTotalScrollRange();
    }
    if (scrollRange + verticalOffset == 0) {
        //show toolbar dot and hide imageview dot
        isShow = true;
    } else if(isShow) {
        //hide toolbar dot and show imageview dot
        isShow = false;
    }
}
});

很抱歉我现在无法测试，但我认为它应该可以工作；-)

- Katharina

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kris larson · Accepted Answer

我的行为实现方式与Saul的方式非常相似。最大的区别在于，我喜欢将类似于Space的不可见视图放在我想要圆形图片出现的位置，然后使用该视图的边界确定如何移动和调整圆形图片的大小。

public class CollapsingImageBehavior extends CoordinatorLayout.Behavior<View> {

    private final static int X = 0;
    private final static int Y = 1;
    private final static int WIDTH = 2;
    private final static int HEIGHT = 3;

    private int mTargetId;

    private int[] mView;

    private int[] mTarget;

    public CollapsingImageBehavior() {
    }

    public CollapsingImageBehavior(Context context, AttributeSet attrs) {

        if (attrs != null) {
            TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CollapsingImageBehavior);
            mTargetId = a.getResourceId(R.styleable.CollapsingImageBehavior_collapsedTarget, 0);
            a.recycle();
        }

        if (mTargetId == 0) {
            throw new IllegalStateException("collapsedTarget attribute not specified on view for behavior");
        }
    }

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

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {

        setup(parent, child);

        AppBarLayout appBarLayout = (AppBarLayout) dependency;

        int range = appBarLayout.getTotalScrollRange();
        float factor = -appBarLayout.getY() / range;

        int left = mView[X] + (int) (factor * (mTarget[X] - mView[X]));
        int top = mView[Y] + (int) (factor * (mTarget[Y] - mView[Y]));
        int width = mView[WIDTH] + (int) (factor * (mTarget[WIDTH] - mView[WIDTH]));
        int height = mView[HEIGHT] + (int) (factor * (mTarget[HEIGHT] - mView[HEIGHT]));

        CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) child.getLayoutParams();
        lp.width = width;
        lp.height = height;
        child.setLayoutParams(lp);
        child.setX(left);
        child.setY(top);

        return true;
    }

    private void setup(CoordinatorLayout parent, View child) {

        if (mView != null) return;

        mView = new int[4];
        mTarget = new int[4];

        mView[X] = (int) child.getX();
        mView[Y] = (int) child.getY();
        mView[WIDTH] = child.getWidth();
        mView[HEIGHT] = child.getHeight();

        View target = parent.findViewById(mTargetId);
        if (target == null) {
            throw new IllegalStateException("target view not found");
        }

        mTarget[WIDTH] += target.getWidth();
        mTarget[HEIGHT] += target.getHeight();

        View view = target;
        while (view != parent) {
            mTarget[X] += (int) view.getX();
            mTarget[Y] += (int) view.getY();
            view = (View) view.getParent();
        }

    }
}

以下是布局。我发现的一个重要问题是，圆形图像视图需要设置高度，以便在折叠模式下它会直接呈现在工具栏之上，否则它会在工具栏后面并且不可见。

<?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_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.krislarson.customcoordinatorlayoutbehavior.ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        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="280dp"
            android:minHeight="108dp"
            android:fitsSystemWindows="true"
            app:title="Abby"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleGravity="center_horizontal"
            app:expandedTitleMarginTop="140dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/background"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/sunset"
                app:layout_collapseMode="parallax"
                android:scaleType="centerCrop"/>

            <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">

                <Space
                    android:id="@+id/circle_collapsed_target"
                    android:layout_width="40dp"
                    android:layout_height="40dp"/>

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


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

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

    <include layout="@layout/content_scrolling"/>

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/circle_image_view"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:src="@drawable/abby"
        android:layout_marginTop="220dp"
        android:layout_gravity="top|center_horizontal"
        android:elevation="8dp"
        app:border_color="@android:color/black"
        app:border_width="2dp"
        app:collapsedTarget="@id/circle_collapsed_target"
        app:layout_behavior="com.krislarson.customcoordinatorlayoutbehavior.CollapsingImageBehavior"/>

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

您可以在https://github.com/klarson2/CustomCoordinatorLayoutBehavior上查看完整的演示项目。