在CollapsingToolbarLayout中设置视差图像的初始高度 [英] Set initial height of parallax image in CollapsingToolbarLayout

问题描述

我有一个Android活动，该活动使用CoordinatorLayout内的CollapsingToolbarLayout实现以图像为背景/横幅的滚动/折叠工具栏.

I have an Android activity which uses a CollapsingToolbarLayout inside a CoordinatorLayout to achieve a scrolling / collapsing toolbar with an image as the backdrop / banner.

图像是从互联网上加载的，我事先不知道它的大小.

The image is loaded from the internet and I don't know its size beforehand.

我希望工具栏最初具有一定的高度(160dp)，但是如果图像大于此高度，则我希望允许用户向下滚动以进一步显示图像的其余部分.但是，这永远不会自动发生.初始状态为160dp高度，但用户应该可以向下滚动以进一步增加图像的高度.

I would like the toolbar to be a certain height (160dp) initially, but if the image is larger than this I would then like to allow the user to scroll down even further to reveal the rest of the image. However, this should never happen automatically. Initial state is 160dp height, but user should be able to scroll it down to increase the height of the image further.

我似乎找不到正确的身高/最小身高组合来实现这一目标.甚至有可能吗?

I can't seem to find the correct combination of height / minheight to achieve this. Is this even possible at all?

这是我的布局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:background="@color/toolbar_text">

    <android.support.design.widget.CoordinatorLayout
            android:id="@+id/coordinatorLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true">

        <android.support.design.widget.AppBarLayout
                android:id="@+id/appBarLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fitsSystemWindows="true">

            <android.support.design.widget.CollapsingToolbarLayout
                    android:id="@+id/collapsing_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed"
                    app:contentScrim="?attr/colorPrimary"
                    android:fitsSystemWindows="true">

                <!-- The background banner -->
                <ImageView
                        android:id="@+id/imgBanner"
                        android:layout_width="match_parent"
                        android:layout_height="160dp"
                        android:scaleType="centerCrop"
                        android:fitsSystemWindows="true"
                        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"
                        app:theme="@style/AppToolbarTheme" />

            </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"
                android:layout_gravity="fill_vertical"
                android:clipToPadding="false"
                app:layout_behavior="@string/appbar_scrolling_view_behavior" >

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

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

</LinearLayout>

横幅图像的高度设置为160dp，它可以控制工具栏最初的大小，但是很显然，由于这是视图的高度，因此我无法将其扩展到160dp之外.

The height of the banner image is set to 160dp which controls how large the toolbar is initially, but obviously this way I cannot extend it beyond the 160dp because that is the height of the view.

我尝试将160dp的高度设置为CollapsingToolbarLayout或AppBarLayout，但没有帮助，它的最大高度始终为160dp，即使图像很多，我也只能向上滚动(较小的图像)而不向下滚动较大，并且ImageView设置为缩放为wrap_content.

I tried setting 160dp height to the CollapsingToolbarLayout or the AppBarLayout but nothing helps, it is always maximum 160dp in height and I can only scroll it up (smaller image) and not down, even if the image is much larger and the ImageView is set to scale as wrap_content.

以下是我想实现的目标，以防不清楚:

Here's a drawing of what I want to achieve in case it isn't clear:

推荐答案

以下是完成此操作的一种简便方法，我不确定是否有更好的方法，但希望听到.查看 ControllableAppBarLayout

Here is one hacky way to accomplish this, I am not sure of a better way but would love to hear it. Check out ControllableAppBarLayout

将该代码放在您的项目中并替换:

Place that code in your project and replace:

    android.support.design.widget.AppBarLayout

使用:

   ControllableAppBarLayout

将ControllableAppBarLayout的android:layout_height设置为工具栏的最大尺寸，即您在向下滚动"图片中所需的尺寸.

Set the android:layout_height of ControllableAppBarLayout to be the maximum size of your toolbar, i.e. the size you want in your "scrolling further down" picture.

然后，在代码中的onCreate()方法中，您可以访问ControllableAppBarLayout:

Then, in your code in the onCreate() method, you can get access to the ControllableAppBarLayout:

appBarLayout = (ControllableAppBarLayout) findViewById(R.id.appBarLayout);
appBarLayout.collapseToolbar();

appBarLayout.collapseToolbar()将完全关闭工具栏.但是，您可以在ControllableAppBarLayout中修改此方法:

appBarLayout.collapseToolbar() will completely close the toolbar. However, you can modify this method in ControllableAppBarLayout:

private void performCollapsingWithoutAnimation() {
    if (mParent.get() != null) {
        mBehavior.onNestedPreScroll(mParent.get(), this, null, 0, getHeight(), new int[]{0, 0});
    }
}

具体来说，将getHeight()更改为dp中的数字，该数字表示工具栏图像的最大高度和您要最初显示的高度之间的差.也就是说，如上所示，初始状态"和向下滚动"之间的区别.

specifically, change getHeight() to the number in dp representing the difference between the max height of the toolbar image and the height you want to initially show. That is, the difference between "initial state" and "scrolling further down" as you showed above.

此hack应该可以完成您想要的事情.

This hack should accomplish what you want.

这篇关于在CollapsingToolbarLayout中设置视差图像的初始高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！