Показати заголовок CollapsingToolbarLayout лише при згортанні


145

Я спробував setExpandedTitleColorі setCollapsedTitleColor(перехід на прозоре та з нього) не пощастило. Я не бачу жодних вбудованих методів, які б виконували те, що я шукав.

Я хочу показати заголовок лише тоді, коли CollapsingToolbarLayout повністю згорнуто, інакше мені це потрібно приховати.

Якісь підказки?

Відповіді:


285

Ви можете додати, 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
    }
})

1
Це рішення працює для api 23 і вище. Це найбільш правильне рішення.
Саймон

Будь ласка, позначте це правильною відповіддю. Відповідь від @dlohani, яка наразі позначена як правильна, не приховує текст, оскільки ви можете бачити його перехідним.
themichaelscott

9
Це працювало для мене, але довелося змінити "boolean isShow = false" на true, щоб видалити ім'я програми з розширеної панелі інструментів на початку роботи.
DH28

3
@Giuseppe: те саме. Тестовано на API 16 -> робочий
пощастило

1
Це не спрацювало для мене, іноді заголовок взагалі не відображається, навіть коли в моїх журналах чітко зазначено, що setTitle викликався "Title"
user1354603

47

Я спробував розчин длохані, але він не сподобався через згасання. За допомогою цього рішення ви повністю видаляєте вицвітання.

Трюк полягає у створенні нового стилю з 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">

Гаразд, як завжди, це ще одне рішення, яке працює не однаково для всіх пристроїв. На Kitkat 0sp, здається, працює, але на Jellybean це додаток виходить з ладу. 0.1sp працює на Jellybean, але робить текст хитким на Kitkat :(
Rúben Sousa

Як ми можемо встановити обмеження рівня api для стилю?
Mahm00d

Вам потрібно використовувати папку значень-v19 для SDK> = 19 та папку значень для SDK <19. Подивіться на це для довідки: stackoverflow.com/questions/16624317/…
Rúben Sousa

1
Це працює на N, поки рішення від @dlohani цього не зробило
Tyler Pfaff

1
Це найпростіше і найкраще рішення. Дуже дякую.
Вікаш Параджулі

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

це дивовижно :) Чи є якийсь вей за титул, щоб придумати якусь анімацію?
Любош Мудрак

7
Це жахливо, ви бачите, як він затухає, як його руйнується. Швидше він просто затухає в остаточному положенні.
CaptRisky

1
Дітто, що сказав CaptRisky. На жаль, я не думаю, що існує альтернатива :-(
kenyee

9
Це буде працювати лише в тому випадку, якщо ви використовуєте android api 22 або нижче. Для 23 або вище рішення не працює. Вам доведеться використовувати рішення від @ steven274.
Саймон

1
Це працює ще краще, коли на android api 23, коли я спробував
dlohani

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

Щасливе кодування!


4
Це викликає те саме згасання питання, на яке посилається в інших відповідях.
themichaelscott

Я хотів лише змінити колір заголовка Панелі інструментів, і це працювало для мене зmCollapsingToolbarLayout.setExpandedTitleColor(Color.argb(255,0,0,0))
kosiara - Bartosz 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);


Жодних зайвих слухачів не працює, як очікувалося!
Mrityunjay Kumar

19

Я успішно додав перегляд зникаючого тексту, просто додав перегляд тексту на панелі інструментів і встановив альфа на основі вертикального відключення в зворотному виклику панелі додатків

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 (вертикальнийOffset / діапазон); якщо (альфа> 0,8) {mToolbar.setAlpha (альфа); } else {mToolbar.setAlpha (.0f); }
qinmiao

13

Ось найпростіше і робоче рішення також з api 23:

додаток: extensionTitleTextAppearance має успадкувати TextAppearance.

Отже, у свої styles.xml додайте ці рядки:

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

Потім додайте в свій CollapsingToolbarLayout цей рядок.

app:expandedTitleTextAppearance="@style/TransparentText"

Це все, шановні!


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

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>

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

Існує також можливість вимкнути текст / текст замість того, щоб просто показати або приховати його.


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

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

0

просто додайте цей код:

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

collapsingToolbarLayout.setExpandedTitleColor(ContextCompat.getColor(this , android.R.color.transparent));
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.