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

问题描述

我下面的Cheesesquare示例项目，了解新的设计素材库。

我不知道是否有一种方法使用一个自定义视图（如电报）与ImageView的，所有权，而不是由CollapsingToolbarLayout部件提供简单的标题和副标题。

感谢。

解决方案

我有同样的问题，并花很多时间试图找到一个解决办法。我的解决办法是添加了崩溃的意见（ImageView的和的TextView）的 Col​​lapsingToolbarLayout 里面，然后处理在code的转移。这样它比从CollapsingToolbarLayout延伸更加灵活和简单。

首先，你需要添加你的意见在 Col​​lapsingToolbarLayout 的视差特性：

 ＆LT; ImageView的
            机器人：layout_width =WRAP_CONTENT
            机器人：layout_height =WRAP_CONTENT
            机器人：paddingTop：80dp
            机器人：SRC =@可绘制/图标
            应用程序：layout_collapseMode =视差
            应用程序：layout_collapseParallaxMultiplier =0.8/＆GT; //这里设置垂直过渡
 

然后设置的帮助视图的比例 OnOffsetchangeListner ：

 私有静态最终浮动SCALE_MINIMUM = 0.5F;
  appBarLayout.setOnWorkingOffsetChange（新ControllableAppBarLayout.OnWorkingOffsetChange（）{
        @覆盖
        公共无效onOffsetChange（INT抵消，浮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））;

            //你也可以setTransitionY / X，setAlpha，setColor等。
        }
    }）;
 

不知怎的，默认的 offsetChangedListener 没有正常工作对我来说（你也许还是应该尝试用默认的监听器第一次），所以我用了 ControllableAppBarLayout 从 https://gist.github.com/blipinsk/3f8fb37209de6d3eea99，并添加以下内容：

 私人OnWorkingOffsetChange onWorkingOffsetChange;

@覆盖
公共无效onOffsetChanged（AppBarLayout appBarLayout，int i）以{
    如果（！isInEditMode（））{
        onWorkingOffsetChange.onOffsetChange（我，（浮动）I / appBarLayout.getTotalScrollRange（））;
    }
}

公共无效setOnWorkingOffsetChange（OnWorkingOffsetChange监听器）{
    this.onWorkingOffsetChange =侦听器;
}

公共接口OnWorkingOffsetChange {
    无效onOffsetChange（INT抵消，浮collapseDistance）;
}
 

唯一的问题是，你需要设置      应用程序：contentScrim =＃00000000（透明） 为你的 Col​​lapsingToolbarLayout ，所以你的观点仍然可见当工具栏处于折叠状态。如果你真的需要压扁，背景效果，我相信你能假通过设置在 OffsetChangeListener 背景ImageView的阿尔法。 ;）

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

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.

Thanks.

解决方案

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.

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

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.
        }
    });

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);
}

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屋！