仅在折叠时显示 CollapsingToolbarLayout 标题

Posted

技术标签:

【中文标题】仅在折叠时显示 CollapsingToolbarLayout 标题【英文标题】:Show CollapsingToolbarLayout title only when collapsed 【发布时间】:2015-10-18 04:32:09 【问题描述】:

我试过setExpandedTitleColorsetCollapsedTitleColor(在透明之间切换),但没有成功。我也看不到任何可以满足我要求的内置方法。

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

有什么提示吗?

【问题讨论】:

【参考方案1】:

您可以将OnOffsetChangedListener 添加到AppBarLayout 以确定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;
        
    
);

科特林

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
    
)

【讨论】:

此解决方案适用于 api 23 及更高版本。这是最正确的解决方案。 它对我有用,但必须在活动开始时将“boolean isShow = false”更改为 true 以删除扩展工具栏中的应用名称。 @Giuseppe:是一样的。在 API 16 上测试 --> 工作 这对我不起作用,有时标题根本不显示,即使我的日志清楚地表明 setTitle 是用“标题”调用的 感谢您的解决方案。我在 Kotlin 中写了这段代码collapsingToolbar.title = if (abs(verticalOffset) != appBarLayout.totalScrollRange) " " else "Title Collapse"【参考方案2】:

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

诀窍是创建一个 textSize 等于 0.1sp 或 0sp 的新样式(这个在 SDK

对于 SDK

<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_
        android:layout_
        app:expandedTitleTextAppearance="@style/CollapsingToolbarLayoutExpandedTextStyle"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

【讨论】:

好的,像往常一样,这是另一种解决方案,并非对所有设备都适用。在 Kitkat 0sp 上似乎可以工作,但在 Jellybean 上它会使应用程序崩溃。 0.1sp 在 Jellybean 上有效,但在 Kitkat 上使文本不稳定:( 我们如何设置样式的 api 级别限制? SDK >= 19 需要使用 values-v19 文件夹,SDK ***.com/questions/16624317/… 这适用于 N 而来自@dlohani 的解决方案没有 问题依然存在:当折叠工具栏被折叠时,文本仍然会逐渐消失(这意味着它将覆盖显示的任何其他文本)。【参考方案3】:

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

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

所以我的 CollapsingToolbarLayout 看起来像这样

<android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsingToolbarLayout"
        android:layout_
        android:layout_
        app:expandedTitleTextAppearance="@android:color/transparent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

【讨论】:

这太棒了 :) 有没有什么标题可以制作一些动画? 这太可怕了,你会看到它在崩溃时逐渐消失。相反,它只是淡入其最终位置。 同上 CaptRisky 所说的。不幸的是,我认为没有其他选择:-( 这仅在您使用 android api 22 或更低版本时有效。对于 23 或以上,该解决方案不起作用。您将不得不使用来自@steven274 的解决方案。 当我尝试使用 android api 23 时,它运行得更好【参考方案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

编码愉快!

【讨论】:

这会导致与其他答案中提到的相同的淡入淡出问题。 我只想更改工具栏标题颜色,它对我有用 mCollapsingToolbarLayout.setExpandedTitleColor(Color.argb(255,0,0,0)) @Bartosz Kosarzycki ,我很不走运 mCollapsingToolbarLayout.setExpandedTitleColor(Color.argb(255,0,0,0) );但是 mCollapsingToolbarLayout.setExpandedTitleColor(context.getResources().getColor(android.R.color.transparent));完成了这项工作,但肯定来自您的解决方案:)【参考方案5】:

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

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

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

【讨论】:

【参考方案6】:

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

mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() 

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

            mTitleTextView.setAlpha(Math.abs(verticalOffset / (float)
                    appBarLayout.getTotalScrollRange()));
        
    );

【讨论】:

浮动范围 = appBarLayout.getTotalScrollRange(); float alpha = Math.abs(verticalOffset / range); if(alpha > 0.8) mToolbar.setAlpha(alpha); 其他 mToolbar.setAlpha(.0f); 【参考方案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"

就是这样!

【讨论】:

【参考方案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("");
                    
                
            );

【讨论】:

【参考方案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>

【讨论】:

【参考方案10】:

只需添加此代码:

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

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

【讨论】:

【参考方案11】:

在我看来,更优雅的解决方案是这样的。

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"
        ...>

还可以淡出/淡入文本,而不仅仅是显示或隐藏它。

【讨论】:

【参考方案12】:

这对我有用。

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

【讨论】:

【参考方案13】:

这是适合我的 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
                    
                
            )

【讨论】:

【参考方案14】:

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
   
)

【讨论】:

以上是关于仅在折叠时显示 CollapsingToolbarLayout 标题的主要内容,如果未能解决你的问题,请参考以下文章

java 仅在折叠工具栏时显示CollapsibleToolbar标题。

如何确定 CollapsingToolbar 已折叠?

工具栏折叠时显示视图

滚动没有内容时如何禁用 CollapsingToolbar 的折叠?

Bootstrap 4:在导航栏折叠时显示活动导航项

ModalViewController 仅在动画时显示