[英]CollapsingToolbarLayout title disappears when ActionBarLayout is initially collapsed
[英]Hide TextView when CollapsingToolbarLayout is Collapsed, and show it when expanded
我正在使用 CollapsingToolbarLayout 開發一個應用程序,里面有一個 ImageView。 我想在它上面添加一個漸變以看起來更好,並且能夠更好地閱讀 CollapsingToolBar 標題,所以我做了一點修改並添加了一個相對布局,其中包含 textview,然后我添加了一個背景到相同的 TextView (這是我所說的漸變)。 這樣做的問題是,當 ToolBar 折疊時,漸變仍然顯示在上面,我不希望它發生,當 ToolBar 折疊時如何使它不可見?
設計:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".anime_page">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="450dp"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:collapsedTitleTextAppearance="@style/collapsedToolbarLayoutTitleColor"
app:expandedTitleTextAppearance="@style/expandedToolbarLayoutTitleColor"
android:theme="@style/Theme.AnimeWatcher"
android:id="@+id/anime_page_collapsing_toolbar">
<ImageView
android:id="@+id/anime_page_cover"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" >
<ImageView
android:id="@+id/anime_page_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_baseline_arrow_back_24"
android:paddingEnd="10dp" />
</androidx.appcompat.widget.Toolbar>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:background="@drawable/black_gradient" />
</RelativeLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/anime_page_rcv"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
</androidx.recyclerview.widget.RecyclerView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
設計圖片:
將OnOffsetChangedListener
添加到AppBar
並在其折疊或展開時收聽更改,並基於此隱藏/顯示您的TextView
。
將 ID 添加到應用欄
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="450dp"
android:fitsSystemWindows="true">
然后,訪問AppBar
並添加一個OnOffsetChangedListener
作為
appbar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
float percentage = (float) Math.abs(verticalOffset) / appBarLayout.getTotalScrollRange();
if (Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange()) {
// Collapsed
//Hide your TextView here
tv.setVisibility(View.GONE);
} else if(verticalOffset == 0) {
//Expanded
//Show your TextView here
tv.setVisibility(View.VISIBLE);
} else {
//In Between
tv.setVisibility(View.VISIBLE);
tv.animate().alpha(percentage);
}
});
您可以選擇僅使用alpha
屬性而不是visibility
,這取決於您。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.