仅在折叠时显示CollapsingToolbarLayout标题

145

我试过setExpandedTitleColor和setCollapsedTitleColor（开关，并从透明的），没有运气。我也看不到任何可以满足我要寻找的内置方法。

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

有什么提示吗？

android  android-collapsingtoolbarlayout 
— 328
source

Answers:

285

您可以添加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
    }
})
— 史蒂文274
source
1
此解决方案适用于api 23及更高版本。这是最正确的解决方案。
— 西蒙（Simon）
请将此标记为正确答案。@dlohani中当前被标记为正确的答案不会隐藏文本，因为您可以看到它的过渡。
— themichaelscott
9
它对我有用，但必须在活动开始时将“ boolean isShow = false”更改为true才能在展开的工具栏中删除应用程序名称。
— DH28
3
@Giuseppe：一样。经过API 16测试->工作
— luckyhandler
1
这对我不起作用，即使我的日志明确指出setTitle是用“ Title”调用的，有时标题也根本没有显示
— user1354603
47

我尝试了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úbenSousa）
source
好的，像往常一样，这是另一种解决方案，不适用于所有设备。在Kitkat 0sp上似乎可以正常工作，但在Jellybean上，它会使应用程序崩溃。0.1sp适用于杰利贝恩但会使文本上奇巧:(摇摇欲坠
— 鲁本·索萨
我们如何在样式上设置该API级别限制？
— Mahm00d
需要使用的值-V19文件夹SDK> = 19和值文件夹SDK <19.在此看一看用于参考：stackoverflow.com/questions/16624317/...
— RUBEN Sousa的
1
这适用于N，而来自@dlohani的解决方案却不起作用
— Tyler Pfaff
1
这是最简单，最好的解决方案。非常感谢。
— Vikash Parajuli
38

通过将以下属性添加到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">
— 德洛尼
source
这太糟糕了:)标题有没有动画的动画呢？
— Lubos Mudrak
7
这太可怕了，您会看到它的崩溃逐渐消失。相反，它只是淡入最终位置。
— CaptRisky
1
同上CapsRisky说的话。不幸的是，我认为没有其他选择：-(
— kenyee
9
仅当您使用的是android api 22或更低版本时，此方法才有效。对于23或更高版本，解决方案不起作用。您将必须使用@ steven274中的解决方案。
— 西蒙（Simon）
1
当我尝试使用android api 23时，效果甚至更好
— dlohani 2015年
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

编码愉快！

— 斯里尼·杰伊斯瓦尔
source
4
这会引起与其他答案相同的问题淡出。
— themichaelscott
我只是想改变工具栏标题颜色和它为我工作mCollapsingToolbarLayout.setExpandedTitleColor(Color.argb(255,0,0,0))
— kosiara -巴尔托什Kosarzycki
@Bartosz Kosarzycki，我很不幸使用mCollapsingToolbarLayout.setExpandedTitleColor（Color.argb（255,0,0,0））; 但是mCollapsingToolbarLayout.setExpandedTitleColor（context.getResources（）。getColor（android.R.color.transparent））; 做的工作，但肯定来自您的解决方案：）
— ShayHaned
24

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

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

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

— 哈迪克·杜海亚
source
没有额外的听众按预期工作！
— Mrityunjay Kumar
19

我成功添加了一个褪色的textview，只需在工具栏中添加一个text view，然后根据appbar回调中的verticalOffset将其设置为alpha

mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {

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

            mTitleTextView.setAlpha(Math.abs(verticalOffset / (float)
                    appBarLayout.getTotalScrollRange()));
        }
    });
— 维沙尔
source
浮动范围= appBarLayout.getTotalScrollRange（）; float alpha = Math.abs（verticalOffset / range）; if（alpha> 0.8）{mToolbar.setAlpha（alpha）; }其他{mToolbar.setAlpha（.0f）; }
— qinmiao
13

这也是使用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"

那就是所有人！

— 亚历克斯
source
5

下面的解决方案完美地工作。

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）
source
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>
— 肖恩
source
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"
        ...>

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

— 布拉兹
source
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;
        }
    }
});
— 阿斯蒂斯
source
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
                    }
                }
            })
— Realpranav
source
0

只需添加以下代码： 

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

collapsingToolbarLayout.setExpandedTitleColor(ContextCompat.getColor(this , android.R.color.transparent));
— AlimItTech
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.