带有自定义视图的 Android CollapsingToolbarLayout [英] Android CollapsingToolbarLayout with custom View

问题描述

我正在关注 Cheesesquare 示例项目以了解新的设计材料库.

I'm following the Cheesesquare example project to understand the new design material library.

我想知道是否有一种方法可以使用带有 ImageView、标题和副标题的自定义视图(如 Telegram)，而不是 CollapsingToolbarLayout 小部件提供的简单标题.

I'm wondering if there's a way to use a custom view (like Telegram) with ImageView, title and subtitle instead of the simple Title provided by CollapsingToolbarLayout widget.

谢谢.

推荐答案

我遇到了同样的问题，花了很多时间试图找到解决方案.我的解决方案是在 CollapsingToolbarLayout 中添加折叠视图(ImageView 和 TextView)，然后在代码中处理转换.这样它比从 CollapsingToolbarLayout 扩展更灵活和简单.

I had the same problem and spend many hours trying to find a solution. My solution was to add the collapsing Views (ImageView and TextView) inside the CollapsingToolbarLayout and then handle the transition in code. This way it's more flexible and simpler than extending from CollapsingToolbarLayout.

首先，您需要在具有视差属性的 CollapsingToolbarLayout 中添加您的视图:

First you'll need to add your Views inside the CollapsingToolbarLayout with the parallax properties:

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingTop:"80dp"
            android:src="@drawable/icon"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.8"/> //set vertical transition here

然后在 OnOffsetchangeListner 的帮助下设置视图的缩放比例:

Then set the scaling of the Views with the help of an OnOffsetchangeListner:

  private static final float SCALE_MINIMUM=0.5f;
  appBarLayout.setOnWorkingOffsetChange(new  ControllableAppBarLayout.OnWorkingOffsetChange() {
        @Override
        public void onOffsetChange(int offSet, float collapseDistance) {
            imageView.setScaleX(1 + (collapseDistance * SCALE_MINIMUM));
            imageView.setScaleY(1 + (collapseDistance * SCALE_MINIMUM));

            textView.setScaleX(1 + (collapseDistance * SCALE_MINIMUM));
            textView.setScaleY(1 + (collapseDistance * SCALE_MINIMUM));

            // You can also setTransitionY/X, setAlpha, setColor etc.
        }
    });

不知何故默认的 offsetChangedListener 对我来说不能正常工作(你可能仍然应该先用默认的监听器尝试它)，所以我使用了 ControllableAppBarLayout 来自 https://gist.github.com/blipinsk/3f8fb37209de6d3eea99 并添加以下内容:

Somehow the default offsetChangedListener didn't work properly for me (you probably still should try it with the default listener first), so I used the ControllableAppBarLayout from https://gist.github.com/blipinsk/3f8fb37209de6d3eea99 and added the following:

private OnWorkingOffsetChange onWorkingOffsetChange;

@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int i) {
    if (!isInEditMode()) {
        onWorkingOffsetChange.onOffsetChange(i, (float) i / appBarLayout.getTotalScrollRange());
    }
}

public void setOnWorkingOffsetChange(OnWorkingOffsetChange listener) {
    this.onWorkingOffsetChange = listener;
}

public interface OnWorkingOffsetChange {
    void onOffsetChange(int offSet, float collapseDistance);
}

唯一的问题是，您需要设置app:contentScrim="#00000000"(透明)对于您的 CollapsingToolbarLayout，因此当工具栏折叠时您的视图仍然可见.如果您真的需要折叠背景效果，我相信您可以通过在 OffsetChangeListener 中设置背景 ImageView 的 alpha 来伪造"它.;)

The only problem is, that you would need to set app:contentScrim="#00000000" (transparent) for your CollapsingToolbarLayout, so your views are still visible when the toolbar is collapsed. If you really need the collapsing-background effect I'm sure you could "fake" this by setting the alpha of a background ImageView in the OffsetChangeListener. ;)

这篇关于带有自定义视图的 Android CollapsingToolbarLayout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！