Pokaż tytuł CollapsingToolbarLayout tylko wtedy, gdy jest zwinięty


145

Próbowałem setExpandedTitleColori setCollapsedTitleColor(przechodząc do i od przezroczystego) bez powodzenia. Nie widzę też żadnych wbudowanych metod, które zrobiłyby to, czego szukam.

Chcę pokazać tytuł tylko wtedy, gdy CollapsingToolbarLayout jest całkowicie zwinięty, w przeciwnym razie potrzebuję go ukryć.

Jakieś wskazówki?

Odpowiedzi:


285

Możesz dodać element OnOffsetChangedListenerdo, AppBarLayoutaby określić, kiedy CollapsingToolbarLayoutjest zwinięty lub rozwinięty i ustawić jego tytuł.

Jawa

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

1
To rozwiązanie działa w przypadku interfejsu API 23 i nowszych. To jest najbardziej poprawne rozwiązanie.
Simon

Zaznacz to jako poprawną odpowiedź. Odpowiedź z @dlohani, która jest obecnie oznaczona jako poprawna, nie powoduje ukrycia tekstu, ponieważ widać, jak przechodzi.
themichaelscott

9
U mnie zadziałało, ale musiałem zmienić „boolean isShow = false” na true, aby usunąć nazwę aplikacji z rozszerzonego paska narzędzi na początku działania.
DH28

3
@Giuseppe: to to samo. Testowane na API 16 -> działa
luckyhandler

1
To nie zadziałało, czasami tytuł w ogóle się nie pojawia, nawet jeśli moje dzienniki wyraźnie wskazują, że setTitle został wywołany z „Title”
user1354603

47

Wypróbowałem rozwiązanie dlohani, ale nie podobało mi się to z powodu zanikania. Dzięki takiemu rozwiązaniu całkowicie usuniesz blaknięcie.

Sztuczka polega na utworzeniu nowego stylu z textSize równym 0,1sp lub 0sp (ten ulega awarii w SDK <19) i textColor przezroczystym:

Dla SDK <19

<style name="CollapsingToolbarLayoutExpandedTextStyle" parent="AppTheme">
    <item name="android:textColor">@android:color/transparent</item>
    <item name="android:textSize">0.1sp</item>
</style>

Dla SDK> = 19

<style name="CollapsingToolbarLayoutExpandedTextStyle" parent="AppTheme">
    <item name="android:textColor">@android:color/transparent</item>
    <item name="android:textSize">0sp</item>
</style>

Następnie zastosuj go do CollapsingToolbarLayout w swoim układzie:

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

Ok, jak zawsze, to kolejne rozwiązanie, które nie działa tak samo na wszystkich urządzeniach. Na Kitkat 0sp wydaje się działać, ale w Jellybean powoduje awarię aplikacji. Wersja 0.1sp działa na Jellybean, ale sprawia, że ​​tekst drży na Kitkacie :(
Rúben Sousa

Jak możemy ustawić limit poziomu API dla stylu?
Mahm00d

Musisz użyć folderu values-v19 dla zestawu SDK> = 19 i folderu wartości dla zestawu SDK <19. Spójrz na to w celach informacyjnych: stackoverflow.com/questions/16624317/ ...
Rúben Sousa

1
Działa to na N, podczas gdy rozwiązanie z @dlohani nie
Tyler Pfaff

1
To najprostsze i najlepsze rozwiązanie. Dziękuję bardzo.
Vikash Parajuli

38

Udało mi się uzyskać pożądany efekt, dodając następującą właściwość do układu xml:

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

więc mój CollapsingToolbarLayout wygląda tak

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

to jest super :) czy jest jakaś odrobina animacji w tytule?
Lubos Mudrak

7
To okropne, widzisz, jak zanika, gdy się zapada. Raczej po prostu zanika w swojej ostatecznej pozycji.
CaptRisky

1
Podobnie jak powiedział CaptRisky. Niestety, nie sądzę, aby istniała alternatywa :-(
kenyee

9
Będzie to działać tylko wtedy, gdy korzystasz z Android API 22 lub starszego. W przypadku wersji 23 lub nowszej rozwiązanie nie działa. Będziesz musiał użyć rozwiązania z @ steven274.
Simon

1
Działa jeszcze lepiej, gdy próbowałem na
Androidzie

24

Mam prostszą odpowiedź:

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

Miłego kodowania!


4
Powoduje to ten sam problem z zanikiem, co w innych odpowiedziach.
themichaelscott

Chciałem tylko zmienić kolor tytułu paska narzędzi i zadziałało to dla mniemCollapsingToolbarLayout.setExpandedTitleColor(Color.argb(255,0,0,0))
kosiara - Bartosz Kosarzycki

@Bartosz Kosarzycki, miałem pecha z mCollapsingToolbarLayout.setExpandedTitleColor (Color.argb (255,0,0,0)); ale mCollapsingToolbarLayout.setExpandedTitleColor (context.getResources (). getColor (android.R.color.transparent)); wykonał robotę, ale na pewno wynika z twojego rozwiązania :)
ShayHaned

24

Ten kod działa dla mnie: użyj koloru color.parse, ponieważ jeśli kolor tła jest inny, zastąp go białym, a tytuł nie będzie wyświetlany

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

Lub możesz użyć przezroczystości collapsingToolbarLayout.setExpandedTitleColor(Color.TRANSPARENT);


Żadni dodatkowi słuchacze nie działają zgodnie z oczekiwaniami!
Mrityunjay Kumar

19

Pomyślnie dodałem zanikający widok tekstu, po prostu dodałem widok tekstu na pasku narzędzi i ustawiłem jego alfa na podstawie verticalOffset w wywołaniu zwrotnym paska aplikacji

mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {

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

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

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

13

Tutaj najprostsze i działające rozwiązanie również z interfejsem API 23:

app: extendedTitleTextAppearance musi dziedziczyć TextAppearance.

Więc w swoim styles.xml dodaj te wiersze:

<style name="TransparentText" parent="@android:style/TextAppearance">
   <item name="android:textColor">#00000000</item>
</style>

Następnie dodaj ten wiersz w CollapsingToolbarLayout.

app:expandedTitleTextAppearance="@style/TransparentText"

To wszystko ludzie!


5

Poniższe rozwiązanie sprawdza się idealnie.

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

4

Oto moje rozwiązanie:

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>

2

W mojej opinii nieco bardziej eleganckim rozwiązaniem byłoby coś takiego.

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

}

A użycie wyglądałoby mniej więcej tak

<butter.droid.widget.BurtterCollapsingToolbarLayout
        app:toolbarId="@+id/toolbar"
        ...>

Istnieje również możliwość wygaszania / pojawiania się tekstu zamiast jego pokazywania lub ukrywania.


2

To działa dla mnie.

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

0

To jest wersja Kotlin, która działa dla mnie:

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

0

po prostu dodaj ten kod:

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

collapsingToolbarLayout.setExpandedTitleColor(ContextCompat.getColor(this , android.R.color.transparent));
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.