164

我已经尝试过setExpandedTitleColor并且setCollapsedTitleColor（在透明之间切换）没有运气。我也看不到任何可以满足我要求的内置方法。

我只想在 CollapsingToolbarLayout 完全折叠时显示标题，否则我需要隐藏它。

有什么提示吗？

4

14 回答 14

313

您可以添加OnOffsetChangedListener到AppBarLayout以确定何时CollapsingToolbarLayout折叠或展开并设置其标题。

爪哇

final CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsingToolbarLayout);
AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appBarLayout);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    boolean isShow = true;
    int scrollRange = -1;

    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        if (scrollRange == -1) {
            scrollRange = appBarLayout.getTotalScrollRange();
        }
        if (scrollRange + verticalOffset == 0) {
            collapsingToolbarLayout.setTitle("Title");
            isShow = true;
        } else if(isShow) {
            collapsingToolbarLayout.setTitle(" ");//careful there should a space between double quote otherwise it wont work 
            isShow = false;
        }
    }
});

科特林

var isShow = true
var scrollRange = -1
appBarLayout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { barLayout, verticalOffset ->
    if (scrollRange == -1){
        scrollRange = barLayout?.totalScrollRange!!
    }
    if (scrollRange + verticalOffset == 0){
        collapsingToolbarLayout.title = "Title Collapse"
        isShow = true
    } else if (isShow){
        collapsingToolbarLayout.title = " " //careful there should a space between double quote otherwise it wont work
        isShow = false
    }
})
于 2015-09-22T18:37:24.343 回答
49

我尝试了 dlohani 的解决方案，但由于淡出不喜欢它。使用此解决方案，您可以完全消除褪色。

诀窍是创建一个 textSize 等于 0.1sp 或 0sp 的新样式（这个在 SDK < 19 上崩溃）和 textColor 透明：

对于 SDK < 19

<style name="CollapsingToolbarLayoutExpandedTextStyle" parent="AppTheme">
    <item name="android:textColor">@android:color/transparent</item>
    <item name="android:textSize">0.1sp</item>
</style>

对于 SDK >= 19

<style name="CollapsingToolbarLayoutExpandedTextStyle" parent="AppTheme">
    <item name="android:textColor">@android:color/transparent</item>
    <item name="android:textSize">0sp</item>
</style>

然后将其应用到布局中的 CollapsingToolbarLayout：

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:expandedTitleTextAppearance="@style/CollapsingToolbarLayoutExpandedTextStyle"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">
于 2015-09-11T17:26:08.133 回答
41

通过向 xml 布局添加以下属性，我能够获得所需的效果：

app:expandedTitleTextAppearance="@android:color/transparent"

所以我的 CollapsingToolbarLayout 看起来像这样

<android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsingToolbarLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:expandedTitleTextAppearance="@android:color/transparent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">
于 2015-07-28T07:21:04.903 回答
24

我有一个更简单的答案：

final CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.toolbar_layout);

collapsingToolbarLayout.setTitle("Your Title");
collapsingToolbarLayout.setExpandedTitleColor(getResources().getColor(R.color.transperent)); // transperent color = #00000000
collapsingToolbarLayout.setCollapsedTitleTextColor(Color.rgb(0, 0, 0)); //Color of your title

快乐编码！

于 2016-02-11T11:52:24.310 回答
24

此代码适用于我：使用 color.parse color 因为如果您的背景颜色不同，则替换为白色并且您的标题不显示

collapsingToolbarLayout.setExpandedTitleColor(Color.parseColor("#00FFFFFF"));

或者你可以使用透明 collapsingToolbarLayout.setExpandedTitleColor(Color.TRANSPARENT);

于 2017-03-13T14:01:05.247 回答
20

我成功添加了一个淡入淡出的textview，只需在工具栏中添加一个文本视图，并根据appbar回调中的verticalOffset设置它的alpha

mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {

        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {

            mTitleTextView.setAlpha(Math.abs(verticalOffset / (float)
                    appBarLayout.getTotalScrollRange()));
        }
    });
于 2016-08-05T20:44:38.373 回答
14

这里也是使用 api 23 的最简单且有效的解决方案：

app:expandedTitleTextAppearance 必须继承 TextAppearance。

因此，在您的 styles.xml 中添加以下行：

<style name="TransparentText" parent="@android:style/TextAppearance">
   <item name="android:textColor">#00000000</item>
</style>

然后，在您的 CollapsingToolbarLayout 中，添加这一行。

app:expandedTitleTextAppearance="@style/TransparentText"

这就是所有的人！

于 2016-06-30T22:49:06.070 回答
7

以下解决方案完美运行。

appbar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
                @Override
                public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                    if (Math.abs(verticalOffset)-appBarLayout.getTotalScrollRange() == 0)
                    {
                        // Collapsed
                        setTitle("Title To Show");
                    }
                    else
                    {
                        // Expanded
                        setTitle("");
                    }
                }
            });
于 2018-04-12T06:36:48.113 回答
4

这是我的解决方案：

collapsingToolbar.setCollapsedTitleTextAppearance(R.style.personal_collapsed_title);
collapsingToolbar.setExpandedTitleTextAppearance(R.style.personal_expanded_title);

<style name="personal_collapsed_title">
     <item name="android:textSize">18sp</item>
     <item name="android:textColor">@color/black</item>
</style>

<style name="personal_expanded_title">
     <item name="android:textSize">0sp</item>
</style>
于 2016-07-23T06:54:44.823 回答
4

只需添加此代码：

     CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collaps_main);

collapsingToolbarLayout.setExpandedTitleColor(ContextCompat.getColor(this , android.R.color.transparent));
于 2020-05-21T14:50:20.837 回答
2

这对我有用。

final Toolbar tool = (Toolbar)findViewById(R.id.toolbar);
CollapsingToolbarLayout c = (CollapsingToolbarLayout)findViewById(R.id.collapsing_toolbar);
AppBarLayout appbar = (AppBarLayout)findViewById(R.id.app_bar_layout);
tool.setTitle("");
setSupportActionBar(tool);
c.setTitleEnabled(false);

appbar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    boolean isVisible = true;
    int scrollRange = -1;
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        if (scrollRange == -1) {
            scrollRange = appBarLayout.getTotalScrollRange();
        }
        if (scrollRange + verticalOffset == 0) {
           tool.setTitle("Title");
            isVisible = true;
        } else if(isVisible) {
            tool.setTitle("");
            isVisible = false;
        }
    }
});
于 2016-05-04T11:44:07.263 回答
2

在我看来，一个更优雅的解决方案将是这样的。

public class MyCollapsingToolbarLayout extends CollapsingToolbarLayout {

    private final int toolbarId;
    @Nullable private Toolbar toolbar;

    public MyCollapsingToolbarLayout(Context context, AttributeSet attrs) {
        super(context, attrs);

        setTitleEnabled(false);

        TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.CollapsingToolbarLayout, 0,
                R.style.Widget_Design_CollapsingToolbar);

        toolbarId = a.getResourceId(android.support.design.R.styleable.CollapsingToolbarLayout_toolbarId, -1);

        a.recycle();

    }

    @Override public void setScrimsShown(boolean shown, boolean animate) {
        super.setScrimsShown(shown, animate);

        findToolbar();
        if (toolbar != null) {
            toolbar.setTitleTextColor(shown ? Color.WHITE : Color.TRANSPARENT);
        }
    }

    private void findToolbar() {
        if (toolbar == null) {
            toolbar = (Toolbar) findViewById(toolbarId);
        }
    }

}

用法看起来像这样

<butter.droid.widget.BurtterCollapsingToolbarLayout
        app:toolbarId="@+id/toolbar"
        ...>

也有可能淡出/淡入文本，而不仅仅是显示或隐藏它。

于 2017-01-25T15:15:41.867 回答
0

这是适用于我的 kotlin 版本：

appbar.addOnOffsetChangedListener(object : OnOffsetChangedListener {
                var isShow = true
                var scrollRange = -1
                override fun onOffsetChanged(appBarLayout: AppBarLayout, verticalOffset: Int) {
                    if (scrollRange == -1) scrollRange = appBarLayout.totalScrollRange

                    if (scrollRange + verticalOffset == 0) {
                        toolbarLayout.title = "Title"
                        isShow = true
                    } else if (isShow) {
                        toolbarLayout.title = " " //These quote " " with _ space is intended 
                        isShow = false
                    }
                }
            })
于 2020-01-02T03:22:02.483 回答
0

Kotlin 扩展：

fun AppBarLayout.onAppBarLayoutCollapsed(
  isShowing: (isShow: Boolean) -> Unit
) {
  var isShow: false
  var scrollRange = -1
  this.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { barLayout, verticalOffset ->
    if (scrollRange == -1) {
      scrollRange = barLayout?.totalScrollRange!!
    }
    isShow = scrollRange + verticalOffset == 0
    isShowing.invoke(isShow)
  })

在那之后：

appBarLayout.onAppBarLayoutCollapsed({
   if(it){
     ///set text
   }else{
     ///remove text
   }
})
于 2022-02-17T15:56:46.407 回答