Android CollapsingToolbarLayout 与自定义 View

Question

我正在关注 Cheesesquare 示例项目以了解新的设计 Material 库。

我想知道是否有办法使用带有 ImageView、标题和副标题的自定义 View (如 Telegram)，而不是 CollapsingToolbarLayout 小部件提供的简单标题。

谢谢。

Answer 1

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

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

        <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 的帮助下设置 View 的缩放:

  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 对我来说无法正常工作(您可能仍然应该先尝试使用默认监听器)，所以我使用了 https://gist.github.com/blipinsk/3f8fb37209de6d3eea99 中的 ControllableAppBarLayout 和添加了以下内容:

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，因此当工具栏折叠时您的 View 仍然可见。如果你真的需要折叠背景效果，我相信你可以通过在 OffsetChangeListener 中设置背景 ImageView 的 alpha 来“伪造”它。 ;)