具有自定义视图的Android CollapsingToolbarLayout

Question

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

我想知道是否有办法使用ImageView,标题和副标题的自定义视图(如Telegram),而不是CollapsingToolbarLayout小部件提供的简单标题.

谢谢.

Answer 1

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

首先,您需要CollapsingToolbarLayout使用视差属性在视图中添加视图:

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

  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并添加以下内容:

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,这样在折叠工具栏时您的视图仍然可见.如果你真的需要折叠背景效果,我相信你可以通过在背景中设置背景ImageView的alpha来"伪造"它OffsetChangeListener.;)