web-dev-qa-db-fra.com

Afficher le titre CollapsingToolbarLayout UNIQUEMENT lorsqu'il est réduit

le titre dit tout. J'ai essayé setExpandedTitleColor et setCollapsedTitleColor (passage de transparent à transparent) sans succès. Je ne vois aucune méthode intégrée qui fasse ce que je cherche non plus.

Je souhaite uniquement afficher le titre lorsque CollapsingToolbarLayout est entièrement réduit, sinon je dois le masquer.

Des allusions?

androidandroid-collapsingtoolbarlayout
132
Psest328

Vous pouvez ajouter OnOffsetChangedListener à AppBarLayout pour déterminer quand CollapsingToolbarLayout est réduit ou développé et définir son titre.

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

J'ai essayé la solution de dlohani, mais je ne l'aimais pas à cause de l'évanouissement. Avec cette solution, vous supprimez complètement la décoloration.

L'astuce consiste à créer un nouveau style avec textSize égal à 0.1sp ou 0sp (celui-ci se bloque sur le SDK <19) et textColor transparent:

Pour SDK <19

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

Pour SDK> = 19

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

Puis appliquez-le à CollapsingToolbarLayout dans votre mise en page:

    <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">
43
Rúben Sousa

J'ai pu obtenir l'effet souhaité en ajoutant la propriété suivante à la présentation XML:

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

donc mon CollapsingToolbarLayout ressemble à ceci

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

J'ai une réponse plus simple:

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

Bon codage!

23
Shrini Jaiswal

Ce code fonctionne pour moi: utilisez color.parse color parce que si votre couleur d'arrière-plan est différente, remplacez-la par le blanc et votre titre ne s'affiche pas.

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

Ou vous pouvez utiliser pour transparent collapsingToolbarLayout.setExpandedTitleColor(Color.TRANSPARENT);

18
Hardik Dudhaiya

J'ai réussi à ajouter une vue en fondu, c'était si simple. Je ne peux pas croire que personne ne soit venu avec ça. Ajouter une vue de texte dans la barre d’outils et définir son alpha en fonction du rappel verticalOffset dans la barre d’application

mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {

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

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

Voici la solution la plus simple et la plus efficace également avec api 23:

app: expandTitleTextAppearance doit hériter de TextAppearance.

Donc, dans votre styles.xml, ajoutez ces lignes:

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

Ensuite, dans votre CollapsingToolbarLayout, ajoutez cette ligne.

app:expandedTitleTextAppearance="@style/TransparentText"

C'est tout les gens!

11
Alecs

Voici ma 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>
4
Shaun

La solution ci-dessous fonctionne parfaitement.

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

Cela fonctionne pour moi.

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

À mon avis, une solution un peu plus élégante pourrait ressembler à ceci.

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

}

Et l'utilisation ressemblerait à quelque chose comme ça

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

Il existe également une possibilité de fondu en fondu/texte au lieu de simplement le montrer ou le cacher.

1
Blaz