[英]Show CollapsingToolbarLayout title only when collapsed
I've tried setExpandedTitleColor
and setCollapsedTitleColor
(switching to and from transparent) with no luck.我已经尝试过
setExpandedTitleColor
和setCollapsedTitleColor
(在透明之间切换),但没有成功。 I can't see any built in methods that'll do what I'm looking for, either.我也看不到任何内置方法可以满足我的要求。
I only want to show the title when the CollapsingToolbarLayout is fully collapsed, otherwise, I need it hidden.我只想在 CollapsingToolbarLayout 完全折叠时显示标题,否则,我需要隐藏它。
Any hints?有什么提示吗?
You can add OnOffsetChangedListener
to AppBarLayout
to determine when CollapsingToolbarLayout
is collapsed or expanded and set it's title.您可以将
OnOffsetChangedListener
添加到AppBarLayout
以确定何时CollapsingToolbarLayout
或展开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
}
})
I tried dlohani's solution, but didn't like it because of the fading out.我尝试了 dlohani 的解决方案,但由于淡出而不喜欢它。 With this solution, you remove the fading completely.
使用此解决方案,您可以完全消除褪色。
The trick is to create a new style with textSize equal to 0.1sp or 0sp (this one crashes on SDK < 19) and textColor transparent:诀窍是创建一个 textSize 等于 0.1sp 或 0sp(这个在 SDK < 19 上崩溃)和 textColor 透明的新样式:
For SDK < 19对于 SDK < 19
<style name="CollapsingToolbarLayoutExpandedTextStyle" parent="AppTheme">
<item name="android:textColor">@android:color/transparent</item>
<item name="android:textSize">0.1sp</item>
</style>
For SDK >= 19对于 SDK >= 19
<style name="CollapsingToolbarLayoutExpandedTextStyle" parent="AppTheme">
<item name="android:textColor">@android:color/transparent</item>
<item name="android:textSize">0sp</item>
</style>
Then apply it to the CollapsingToolbarLayout in your layout:然后将其应用于布局中的 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">
I was able to get the desired effect by adding following property to the xml layout:通过向 xml 布局添加以下属性,我能够获得所需的效果:
app:expandedTitleTextAppearance="@android:color/transparent"
so my CollapsingToolbarLayout looks like this所以我的 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">
I have a more simple answer:我有一个更简单的答案:
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
Happy Coding!快乐编码!
This code works for me: Use color.parse color because if your background color is different then replace with white and your title not display此代码适用于我:使用 color.parse 颜色,因为如果您的背景颜色不同,则替换为白色并且您的标题不显示
collapsingToolbarLayout.setExpandedTitleColor(Color.parseColor("#00FFFFFF"));
Or you can use for transparent collapsingToolbarLayout.setExpandedTitleColor(Color.TRANSPARENT);
或者你可以使用透明
collapsingToolbarLayout.setExpandedTitleColor(Color.TRANSPARENT);
I successfully added a fading textview, simply add a text view in toolbar, and setting it's alpha based on the verticalOffset in appbar callback我成功添加了一个淡入淡出的文本视图,只需在工具栏中添加一个文本视图,并根据 appbar 回调中的 verticalOffset 设置它的 alpha
mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
mTitleTextView.setAlpha(Math.abs(verticalOffset / (float)
appBarLayout.getTotalScrollRange()));
}
});
Here the simplest and working solution also with api 23:这里也是 api 23 的最简单和有效的解决方案:
app:expandedTitleTextAppearance has to inherit TextAppearance. app:expandedTitleTextAppearance 必须继承 TextAppearance。
So, in your styles.xml add this rows:所以,在你的styles.xml 中添加以下行:
<style name="TransparentText" parent="@android:style/TextAppearance">
<item name="android:textColor">#00000000</item>
</style>
Then, in your CollapsingToolbarLayout, add this row.然后,在您的 CollapsingToolbarLayout 中,添加这一行。
app:expandedTitleTextAppearance="@style/TransparentText"
That's all folks!这就是所有的人!
The below solution works perfectly.下面的解决方案完美地工作。
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("");
}
}
});
Here is my solution:这是我的解决方案:
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>
just add this code :只需添加此代码:
CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collaps_main);
collapsingToolbarLayout.setExpandedTitleColor(ContextCompat.getColor(this , android.R.color.transparent));
This works for me.这对我有用。
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;
}
}
});
In my oppinion a bit more elegant solution would be something like this.在我看来,更优雅的解决方案是这样的。
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);
}
}
}
And usage would look something like this用法看起来像这样
<butter.droid.widget.BurtterCollapsingToolbarLayout
app:toolbarId="@+id/toolbar"
...>
There is also a possibility to fade out/in text instead of just showing or hiding it.还可以淡出/淡入文本,而不仅仅是显示或隐藏它。
This is kotlin version which works for me :这是对我有用的 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
}
}
})
Kotlin extension: 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)
})
and after that:在那之后:
appBarLayout.onAppBarLayoutCollapsed({
if(it){
///set text
}else{
///remove text
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.