Показывать заголовок CollapsingToolbarLayout только в свернутом виде


145

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

Я хочу показывать заголовок только тогда, когда CollapsingToolbarLayout полностью свернут, в противном случае мне нужно его скрыть.

Есть намеки?

Ответы:


285

Вы можете добавить, OnOffsetChangedListenerчтобы AppBarLayoutопределить, когда 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
    }
})

1
Это решение работает для API 23 и выше. Это самое правильное решение.
Саймон

Пожалуйста, отметьте это как правильный ответ. Ответ от @dlohani, который в настоящее время помечен как правильный, не скрывает текст, потому что вы можете видеть его переход.
themichaelscott

9
Это сработало для меня, но пришлось изменить "boolean isShow = false" на true, чтобы удалить имя приложения на расширенной панели инструментов при запуске активности.
DH28

3
@ Джузеппе: это то же самое. Проверено на API 16 -> работает
luckyhandler

1
У меня это не сработало, иногда заголовок вообще не отображается, даже когда в моих журналах четко указано, что setTitle был вызван с «Заголовком»
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, но текст на Киткате шатается :(
Рубен Соуза

Как мы можем установить этот предел уровня API для стиля?
Mahm00d

Вам нужно использовать папку values-v19 для SDK> = 19 и папку values ​​для SDK <19. Взгляните на это для справки: stackoverflow.com/questions/16624317/…
Rúben Sousa

1
Это работает на N, в то время как решение от @dlohani нет
Тайлер Пфафф

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 Кумар

19

Я успешно добавил исчезающее текстовое представление, просто добавил текстовое представление на панели инструментов и установил его альфа на основе verticalOffset в обратном вызове панели приложения.

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 / range); if (alpha> 0.8) {mToolbar.setAlpha (alpha); } else {mToolbar.setAlpha (.0f); }
Qinmiao

13

Вот самое простое и рабочее решение также с API 23:

Приложение: extendedTitleTextAppearance должно наследовать 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

Это версия котлина, которая работает для меня:

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.