只有在折叠时显示CollapsingToolbarLayout标题

Question

我已经尝试过使用setExpandedTitleColor和setCollapsedTitleColor并切换到透明状态，但仍无法实现效果。我也没有发现内置的方法可以达到我想要的效果。

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

有什么提示吗？

- Psest328

Answer 1

你可以向 AppBarLayout 添加OnOffsetChangedListener，以确定 CollapsingToolbarLayout 折叠或展开时的状态，并设置其标题。

Java

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

Kotlin

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

- steven274

---

此解决方案适用于API 23及以上版本。这是最正确的解决方案。 - Simon

对我来说它起作用了，但是我必须将“boolean isShow = false”更改为true，才能在活动开始时移除扩展工具栏中的应用程序名称。 - DH28

@Giuseppe：这没区别。在API 16上测试过-->可行。 - luckyhandler

这对我没用，有时候即使我的日志清楚地表明调用了“setTitle”并传入了“Title”，标题仍然根本没有显示出来。 - user1354603

谢谢，这个可行。但是我通过 if (scrollRange + verticalOffset <120) 获得了更好的效果。这样总是会在应用栏上有一些文本，而不是一个空的应用栏。 - Parag Kadam

Answer 2

我尝试了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">

- Rúben Sousa

---

好的，像往常一样，这是另一个解决方案，并不适用于所有设备。在Kitkat上，0sp似乎可以工作，但在Jellybean上会导致应用程序崩溃。0.1sp在Jellybean上可以工作，但在Kitkat上会使文本抖动:( - Rúben Sousa

我们如何在样式上设置API级别限制？ - Mahm00d

这似乎是正确的解决方案...addOnOffsetChangedListener是后来添加到支持库中的，而且在Xamarin上也不可用 :-P - kenyee

这在N上有效，而@dlohani的解决方案则无效。 - Tyler Pfaff

问题仍然存在：当可折叠工具栏被折叠时，文本仍会逐渐消失（这意味着它将覆盖显示的任何其他文本）。 - Richard

Answer 3

通过将以下属性添加到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">

- dlohani

---

很糟糕，你能看到它在坍塌时渐渐消失。最好是直接在最终位置淡入。 - CaptRisky

工作正常，但在4.2.2版本中出现错误：“宽度和高度必须大于0”。 - Akshay

同CaptRisky所说。不幸的是，我认为没有其他选择 :-( - kenyee

只有在使用Android API 22或更低版本时，此方法才有效。对于23或更高版本，该解决方案无效。您需要使用@steven274提供的解决方案。 - Simon

当我尝试时，它在Android API 23上运行得更好。 - dlohani

Answer 4

我有一个更简单的答案：

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

快乐编码！

- Shrini Jaiswal

---

这会导致与其他答案提到的一样的淡化问题。 - themichaelscott

我只想改变工具栏标题的颜色，使用mCollapsingToolbarLayout.setExpandedTitleColor(Color.argb(255,0,0,0))就可以实现。 - kosiara - Bartosz Kosarzycki

@Bartosz Kosarzycki，我在mCollapsingToolbarLayout.setExpandedTitleColor(Color.argb(255,0,0,0)) 上遇到了不幸，但是mCollapsingToolbarLayout.setExpandedTitleColor(context.getResources().getColor(android.R.color.transparent)) 却完成了工作，但肯定来源于您的解决方案 :) - ShayHaned

Answer 5

这个代码对我有效： 使用color.parse颜色，因为如果您的背景颜色不同，则替换为白色，这样您的标题就不会显示。

这段代码对我有用： 使用color.parse颜色，因为如果你的背景颜色不同，就替换为白色，否则你的标题将无法显示。

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

或者你可以使用下面的代码来实现透明效果： collapsingToolbarLayout.setExpandedTitleColor(Color.TRANSPARENT);

- Hardik Dudhaiya

Answer 6

我成功地添加了一个淡出的TextView，只需在工具栏中添加一个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()));
        }
    });

- Vishal

---

float range = appBarLayout.getTotalScrollRange(); float alpha = Math.abs(verticalOffset / range); if(alpha > 0.8) { mToolbar.setAlpha(alpha); } else { mToolbar.setAlpha(.0f); } - qinmiao

Answer 7

以下是最简单且适用于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"

就这样吧，伙计们！

- Alecs

Answer 8

以下解决方案完美运行。

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

- Parth Patel

Answer 9

这是我的解决方案：

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>

- Shaun

Answer 10

只需添加此代码：

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

collapsingToolbarLayout.setExpandedTitleColor(ContextCompat.getColor(this , android.R.color.transparent));

- AlimItTech